Dynamic Hidden Form Field Data Absent From POST - javascript

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;
});
}

Related

How to add elements to a form before submitting? WITHOUT AJAX

Is there a way to add data to a form before submitting it?
or add this form to a formdata and submit the formdata (without .$post, .$ajax or
XMLHttpRequest). the formdata can be submitted as a normal form.
You could do form submit event
function test(){
document.querySelector('#new_insert').value="hi"
//do stuff here
return true
}
<form action="action.php" method="get" onsubmit="return test()">
<input type="text" name="one"/>
<input id="new_insert" name="new" type="text">
<input type="submit">
</form>
<form onsubmit="return addfield();" id="myform">
<input type="text" name="txtname" value="Your name">
<input type="submit" name="btnsubmit" value="Submit">
</form>
<script>
function addfield(){
var oldhtml=document.getElementById("myform").html();
var newhtml='<input type="text" name="txtcity" value="Your city">';
document.getElementById("myform").html(oldhtml+newhtml);
}
</script>
you can add any hidden input you want:
<input type="text" name="my_hidden_input" value="my_value" id="hidden_input" hidden/>
and change the value whenever you want (on form submit or after page gets load)
$('#hidden_input').val("my_second_value")

Issue with javascript retrieve form data for url

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.

Walk through a form in javascript and check for blank inputs?

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>

Form onsumbit executing a function

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>

How to prevent form element from sending some fields we don't want?

I have a form element that contains about 5 fields which final query is going to create by processing values those fields. So I want to send only final query, not all of those, to the server. How can I exclude those fields from being submitted (using jQuery)?
<form action="abc/def.aspx" method="get">
<input type="text" name="field1" />
<input type="text" name="field2" />
<input type="text" name="field3" />
<input type="text" name="field4" />
<input type="text" name="field5" />
<input type="hidden" name="final" />
<input type="submit" value="Send" />
</form>
Output of form submission looks like below:
abc/def.aspx?field1=val1&field2=val2&field3=val3&field4=val4&field5=val5&final=finalQuery
Remove the name attribute on the fields you do not want submitted to the server.
<form action="abc/def.aspx" method="get">
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="hidden" name="final" />
<input type="submit" value="Send" />
</form>
This is the simplest way to achieve what you want, and it works on all major browsers.
W3 spec talks about only submitting form values when name is present: http://www.w3.org/TR/html401/interact/forms.html#h-17.2
Remove the element on submit.
On the onsubmit handler:
$(formElement).submit(function() {
$(this.field1).remove(); //removing field 1 from query
return true; //send
});
Disabling the form element also stops it from being entered into the query.(tested on Chrome)
$(formElement).submit(function() {
this.field1.disabled = true;
return true; //send
});
I think the best solution is to handle the submit and then send the request yourself:
$(form).submit(function() {
//do everything you need in here to get the final result
var finalResult = alotoflogic();
$.get("abc/def.aspx",final=finalResult, "callbackfunction", "responseType");
return false;
});
that should do exactly what you want.
EDIT: as Alex pointed out this solution wouldnt send you to that page, just get the results if you need to go to the new page you can do:
$(form).submit(function() {
//do everything you need in here to get the final result
var finalResult = alotoflogic();
window.location('abc/def.aspx?final='+finalResult);
return false;
});
This way the browser is redirected to that page and only the final result is send.

Categories