I stumbled on this site and want to know how the url is able to update the input values and also update the src of the divs which the gif and iframe which video are in.
http://gifsound.com/?gif=img836.imageshack.us/img836/7826/tumblrlfihla6zaq1qb0ebk.gif&v=DR91Rj1ZN1M
How would this be done with javascript?
It looks like "v" is a variable set to "http://www.youtube.com/watch?"
and the gif is similar and equal to "gif"
I think this thread has some basis, is it the right direction?
Is it possible to update a url link based on user text input?
It isn't done by Javascript. The querystring parameters are interpreted by a server-side process. The <form> which has the textbox submits them via the querystring because it has <form method="get"> instead of post.
Explanation in detail
HTTP has two main request methods: GET and POST.
When you make a straightforward request for a webpage, such as by clicking a link or typing an address into the address bar, the browser will make a GET request, which consists of the path to the resource to get and some headers, that's it. There is no "request body".
A resource path looks like this: /foo/bar?name1=value1&name2=value2
POST requests are different and can only be triggered by a submission of a <form method="post"> (note that method="post" is implied if the method attribute is missing) or AJAX request. They also have a request-body, which is a block of data sent along with the request. This block of data consists of key/value pairs corresponding to each <input> element contained within the <form> element that was posted.
When you have a <form method="get"> (rather than post) each <input> in the <form> is instead converted into a querystring parameter rather than being sent in a request-body, also the method used is GET instead of POST.
In example, this...
<form method="post" action="Page.php">
<input type="text" name="Foo" value="bar" />
<input type="text" name="Baz" value="qux" />
</form>
...results in this being sent from the browser to the client:
POST Page.php
Content-Type: application/x-www-form-urlencoded
Content-Length: 15
Foo=bar&Baz=qux
(the "Foo=bar..." bit is the request body)
However, this...
<form method="get" action="Page.php">
<input type="text" name="Foo" value="bar" />
<input type="text" name="Baz" value="qux" />
</form>
...results in this being sent from the browser to the client:
GET Page.php?Foo=bar&Baz=qux
(note the lack of a request body)
Related
Here is my form on domain1:
<form id ='myForm' action='domain2' method='GET' target='_top'>
<input type='hidden' name='id' value='00345897'>
<input type='hidden' name='status' value='Success'>
<input type="submit" value="Submit">
</form>
Now when I submit my form it goes to the domain2 as mentioned in the action. Is it possible to get the response back to domain1? I am getting the response if the target attribute is '_self' or if I remove the target attribute. But with target='_top' the page is redirected to domain2. How can I get the response back to domain1? Thanks.
The response can't go anywhere other than to the browser making the response.
If you don't specify a target, then it will appear in the same window or frame as the page with the form on it (replacing the page with the form on it).
If you specify target="_top" then it will appear in the top-level frame replacing that.
If you want to get the data to the site making the request then you need to either:
Make the HTTP request from domain1's server and not from a browser or
Use Ajax to make the request to domain1 (dealing with cross origin issues) and then use JavaScript to send the data to domain1.
In express app I have button which incrementing value, and that value should be multiple with price. That value is in a div, not in a form.
In JS I would do something like this:
document.getElementById('quantity').innerHTML;
But how to grab this value with express?
I was thinking with help of hidden form element, has anyone suggestion or better solution?
<td data-th="Quantity" id="quantity" class="text-right">5</td>
<form action="#" method="get">
<input type="hidden" name="quantityVal" value="{{ ?? }}">
</form>
img
You can't just "grab" a value from HTML with Express. The only way is to perform an AJAX request and send that value with your request to your Node server, where you can access it with req.body.
You can read more about AJAX here: https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started
The server can only reach what's in the request, it can never reach the web page itself. If you have 2 different pages that send exactly the same request, the server will treat them the same.
So you yes, hidden input is the way to go.
I have a HTTP Post form that receives info from AngularJS (that takes it from the PHP BE).
I use the following code sample:
<form method="post" action="{{aw('TI.sup');}}">
<input type='hidden' name='bla' value="{{aw('TI.sup');}}" />
<input type="submit" class="button s-button" value="bla" />
</form>
After page is loaded, I see the following result:
<form method="post" class="ng-pristine ng-valid">
<input type="hidden" name="bla" value="https://thisis.the/url">
Strings without 'https:' work fine.
Update
The problem was with $sce, and has slightly changed after I Added a function to the controller.
now I'm getting:
<form method="post" action="https://thisis.the/url" class="ng-pristine ng-valid">
Update, take 2
The form won't respond to submit because the previous URL was blank (before Angular changed it). I decided to take the info from PHP itself, but the following jquery will also do the trick:
$("#FormID").submit();
Thanks,
Dana.
You are facing a $sce:insecurl error , probably because the action URL is from other domain/protocol.
From $sce:insecurl error docs:
Processing of a Resource from Untrusted Source Blocked
...
To load templates from other domains and/or protocols, either adjust the whitelist/ blacklist or wrap the URL with a call to $sce.trustAsResourceUrl.
Here is an an example: http://jsbin.com/disef/2/edit
function ctrl($scope, $sce){
$scope.aw = function() {
return $sce.trustAsResourceUrl("https://thisis.the/url");
}
};
What I'm trying to do is the functional equivalent of setting the "location" property in javascript, but I want to send along JSON encoded data to the server. I don't want to use AJAX, I want to completely replace my page contents with whatever the server sends back.
I think I might be able to do what I want by using form.submit by setting the form enctype attribute to application/json, but I don't know how to get my JSON into the form data set. Is it possible to do this?
You could send the JSON as the query component of the URL:
document.location.href = server_url + "?" + encodeURIComponent(json_string);
One way of doing it is with a form like this (not as clean as you would like it to be, but if you do not want to use AJAX your choices are quite limited):
<form action="json.php" method="post">
<input type="hidden" name="json" value="{'x':1}" />
</form>
you could set an input value to stringified JSON when submitting the form:
<form method="post" action="myscript.php" onsubmit="DoSubmit();">
<input type="hidden" id="myjsoninput" name="json" value="{'x':1}" />
<input type="submit" name="submit" />
</form>
function DoSubmit(){
document.getElementById("myjsoninput").value = JSON.stringify({a:'b'});
return true;
}
I have an ajax based login form for my site and have noticed that browsers are not recognising it as a login form and are not remembering passwords for it to ease the user's login.
When the submit button is pressed the values and sent to serverside to check and a response is sent back. If the check passes the the session is set and the page performs a javascript redirect into the members area. The html is very simple and could be the cause of the problem.
HTML:
<input type='text' class='email'>
<input type='password' class='password'>
<a class='submitBtn'>SUBMIT</a>
Thanks guys!
I think I'll do it in another way.
Using a form to submit to a hidden iframe , so the window will act like ajax post(do not refresh the window) and the password remember feature will works
like
<form method="post" id="" action="checkDetail.php" target="myIframe">
<input type='text' class='email'>
<input type='password' class='password'>
<input type="submit" name="" value="" id="Submit"/>
</form>
<iframe name="myIframe" id="myIframe"></iframe>
in this way you have to change a little bit of your response code to notice iframe parent the submit result.
update
it will done automatically by browser. If a form specify 'target' attribute , and there is a iframe has a name attribute that exactly the same as the target attribute of the form, the form action will submit to the iframe.
so when your request is success , your response will appear in the iframe content. Try code like this in the response.
<?php
//php checks database here
?>
<script>
parent.formSuccess({
//your response infomation
});
</script>
and define a formSuccess method in the outer page to handle the submit callback
Found answer on stack : How can I get browser to prompt to save password?
My Version:
<form id='loginForm' target="passwordIframe" method='POST' action="blank.php">
<input name='email' type='text' st='Email'>
<input name='pass' type='password' st='Password'>
<button type='submit'>LOGIN</button>
</form>
<iframe id="passwordIframe" name="passwordIframe" style='display:none'></iframe>
I can confirm that this triggers the password remember features for Chrome (other browsers not yet tested). It is important that the action attribute points to a blank.php. I chose a blank php page and echoed out the $_POST array just to make sure that the values were being submitted via the form.
I will now implement this with my old code that simply uses javascript to pull the values out of the field and checks them via an ajax call. I wonder if I can do away with the submit button all together and just use javascript to submit the form?