I have this code:
function src(){
var id = document.getElementsByName("query")[0].value;
window.location.href = "/search/?query=" + id;
}
var f_src = document.getElementById("search_form");
if(f_src)
f_src.onsubmit = function(){src();return false;};
I'm having problems with the submit part: I want, when I enter "example" in the field "url" to be redirected to "/search/?query=example", but it's not working, any help?
HTML:
<form id="search_form" method="get" action="" name="search_f">
<input id="search_field" maxlength="100" name="query" type="text" value="" placeholder="<?php echo $src_txt; ?>">
<input id="search_button" type="submit" value="">
</form>
Thanks.
Aside from the problem you might have, you can achieve the same behavior without JavaScript. You just have to give the form element the name "query" and make it submit a GET request to /search:
<form id="search_form" method="get" action="/search/" name="search_f">
<input id="search_field" maxlength="100" name="query" type="text" value="" placeholder="<?php echo $src_txt; ?>">
<input id="search_button" type="submit" value="">
</form>
The action attribute tells the browser where to make the request to. Every form control element with a name will be included with its value in the query string.
No JavaScript required.
If You don't insist on using javascript, You can achieve this using good old HTML:
<form action="/search/" method="get">
<input name="query" />
</form>
Related
I want to set hidden input value(username) based on client other input(email) in a form, then submit to server. (to make sure username equal to email)
However, the assignment to the hidden input is processed AFTER the form submitted. So 'username' is already None on server side.
<form id="altForm" action="" method="post">
<input type="hidden" name="username" id="id_username" maxlength="40" >
<input type="email" name="email" id="id_email" maxlength="40">
<input class="btn btn-primary pull-right" type="submit" value="Register" />
</form>
<script>
$("#altForm").submit(function(e){
e.preventDefault();
var username = $("#id_email").val();
$("#id_username").val(username);
});
</script>
I would do this serverside, but if you want it clientside you can also accomplish it like this:
$('#id_email').keyup(function() {
$('#id_username').val($(this).val());
});
I am kind of new to javascript however I have created a submit form that I want to redirect me to a url based on form input. Here is my current code...
The issue I'm running into however is that the form is sending me the initial value rather than the updated form value (It is using "whatevs" no matter what).
HTML
<form id="Search-Form" onClick="genURL()"><label>Value: </label>
<input type="text" id="search" placeholder="Enter Value"></input>
<div id="search-buttons">
<input id="searchSubmit" value="whatevs" type="submit" tabindex="1" />
</div>
</form>
Javascript
function genURL() {
var searchSubmit = document.getElementById("searchSubmit").value;
window.location = "randomsite/view" + searchSubmit;
}
Add return and use onsubmit:
<form id="Search-Form" onsubmit="return genURL()"><label>Value: </label>
<input type="text" id="search" placeholder="Enter Value"></input>
<div id="search-buttons">
<input id="searchSubmit" value="whatevs" type="submit" tabindex="1" />
</div>
</form>
Revise function like so:
function genURL()
{
location.href = "randomsite/view" + document.getElementById("search").value;
return false;
}
If you were to use onclick, it would go on the button, not the form.
I have 2 forms, 1st form is to submit an input value to the next page, and on the next page there's the 2nd form which is a search map function.
the 1st form is displayed on the homepage
<form role="search-map" method="" id="search-map" action="/find">
<h4>Where To Buy</h4>
<input type="text" class="form-control" id="addressInput" name="addressInput" placeholder="Your Suburb or Postcode">
<button type="submit" class="btn btn-vc btn-default btn-lg" id="search-address-btn">Find</button>
</form>
the 2nd form is on another page which is /find that has a map search plugin
<form onsubmit="cslmap.searchLocations(); return false;" id="searchForm" action="">
<input type="text" id="addressInput" name="addressInput" placeholder="Your Suburb" size="50" value="where-i-want-value-to-be-pass">
<input type="submit" class="slp_ui_button" value="Find" id="addressSubmit">
</form>
any ideas how can i pass the value from the 1st form "addressInput" to the 2nd form? and the run the search on the 2nd form? here's the 2nd form btw
i tried searching here but what i need seems to be more complex that what i have found
or maybe how can i get the 2nd page to get the value from the url (?addressInput=North+Bega%2C+NSW%2C+2550) into the 2nd form input "addressInput" and run the submit button function when the page loads?
thanks in advance guys
I'm assuming you want to get the value from s to the second form.
replace where-i-want-value-to-be-pass
with <?php echo $_REQUEST['addressInput']; ?>
<form onsubmit="cslmap.searchLocations(); return false;" id="searchForm" action="">
<input type="text" id="addressInput" name="addressInput" placeholder="Your Suburb" size="50" value="<?php echo $_REQUEST['addressInput']; ?>">
<input type="submit" class="slp_ui_button" value="Find" id="addressSubmit">
</form>
I have a form that, when submitted, does not post the dynamically added hidden field.
html:
<div>
<form action="thankyou.php" onsubmit="return validate()" id="orderform" method="post">
<input type="text" name="name" /><br>
<input type="text" name="email" required /><br>
<input type="text" name="charterco" required /><br>
<input type="text" name="bname" /><br>
<input type="text" name="dtime" required /><br>
<input type="submit" />
</form>
</div>
jquery:
$('#orderform').submit(function(eventObj){
$('<input />').attr('type','hidden')
.attr('id','list')
.attr('name','shopList')
.attr('value',sliststr>)
.appendTo('#orderform');
return true;
});
POST data from Chrome DevTools:
name:b
email:b#b.com
charterco:b
bname:b
dtime:12:00
message:Comment
I can't work out what's gone wrong. My sliststr variable turns up filled and correct in my little debugging test on jsfiddle here. For whatever reason, it isn't POSTing.
EDIT: As #JayBlanchard pointed out below, I am adding to the form after the POST has been written.
Try to append the dynamic element, set the value of it and then submit the form. Otherwise it's submitting the form and then appending the html in callback.
Try the following.
function validate(){
var shoplist = [1,2,3];
$('#orderform').append("<input type='text' name='shop' id='list'>")
$('[name="shop"]').val(shoplist)
$('#orderform').submit(function(eventObj){
return true;
});
}
I apologize for asking such a "noob" question but I'm outside my area of expertise here.
I'm using Dojo 1.9 and I need to walk through a submitted form and determine if any of the input fields are blank. The tricky part is that the form is dynamic, it can contain an array of child elements of each array element, with names like itemList[1].myName:
<form id="businessReferences" action="/yabba/dabba/doo" method="post">
<input id="itemList[0].myName" name="itemList[0].myName" type="text" value=""/>
<input id="itemList[0].myAddress" name="itemList[0].myAddress" type="text" value=""/>
<input id="itemList[1].myName" name="itemList[1].myName" type="text" value=""/>
<input id="itemList[1].myAddress" name="itemList[1].myAddress" type="text" value=""/>
<input id="itemList[2].myName" name="itemList[2].myName" type="text" value=""/>
<input id="itemList[2].myAddress" name="itemList[2].myAddress" type="text" value=""/>
</form>
What is the best way to walk through this form and check to see if all the fields for each parent element are empty? For example if all the fields for itemList[2] are empty? Is there a particular method for doing this? Seems like it would be a fairly common problem but I haven't been able to track down an answer.
Just add an submit button in the form
<form id="businessReferences" action="/yabba/dabba/doo" method="post" onsubmit="return validate()">
<input id="itemList[0].myName" name="itemList[0].myName" type="text" value=""/>
<input id="itemList[0].myAddress" name="itemList[0].myAddress" type="text" value=""/>
<input id="itemList[1].myName" name="itemList[1].myName" type="text" value=""/>
<input id="itemList[1].myAddress" name="itemList[1].myAddress" type="text" value=""/>
<input id="itemList[2].myName" name="itemList[2].myName" type="text" value=""/>
<input id="itemList[2].myAddress" name="itemList[2].myAddress" type="text" value=""/>
<input type='submit' value="Submit"/> <!-- to trigger validation on this button click -->
</form>
Javscript for validation , it will account for dynamically added element also
<script type='text/javascript'>
function validate(){
FromRef = document.getElementById('businessReferences');
for(i=0; i<FromRef.elements.length; i++)
{
if((FromRef.elements[i].value).trim() ==""){ // see if the value is blank popup and alert
alert( FromRef.elements[i].name +"is required");
return false; // not to submit form
}
return true;//submit form
}
</script>