HTML form losing its values when submitting? - javascript

I am attempting to submit a HTML form that has some values created via javascript. However, when I submit the form those input fields lose their values in favor of empty strings. What can I do to prevent the fields from dropping their new values upon hitting the submit button?
Form Code:
<form id="post-form" class="save-form" method="POST" action="/posts" style="display: none">
<input placeholder="Title" name="title" /><br>
<input placeholder="Location" name="location" /></br>
<input placeholder="Content" name="content" /><br>
<input id="formlat" name="latitude" type="hidden" />
<input id="formlng" name="longitude" type="hidden" />
<input name="user_id" type="hidden" value="<%= current_user.id %>" />
<input type="submit" value="Submit"/>
</form>
Relevant Javascript Code:
var newlat = newmarker.getPosition().lat();
var newlng = newmarker.getPosition().lng();
document.getElementById("formlat").value = newlat;
document.getElementById("formlng").value = newlng;
Setting default values, or not setting them, always produces the same result: the form submits with "" for those fields (or whatever was inside value=""). However, the console shows that those fields are correctly being filled with their lat/long up until I hit the submit button, where they revert to their default values (in this case ""). It is only in rails' logs that I can see the fields are blank in the actual POST.
The user id field, however, does keep its value when submitting. So I believe the form is overwriting its value fields upon hitting the submit button. Does anyone know how to prevent this behavior? Thanks in advance.

Related

How to get input data from html to nodejs [duplicate]

When I submit form by using below function it is submitting but values are not passed through this function. I use all functions but nothing found:
document.getElementById("postad").submit();
Form is given below.
<form action="register.php" id="postad" method="post">
<input class="textfield2" type="text" id="post_title" style="width:640px;" placeholder="Ad Title" onBlur="check('post_title')" />
<input class="button" type="button" name="save" value="Publish" onclick="send();" />
</form>
Your form contains two form controls. Neither will be a successful control (i.e. one that appears in the submitted data), but for different reasons.
Only form controls with name attributes can be successful. Your text input doesn't have a name. (It also doesn't have a default value, so you need to type in it first).
Buttons can only be successful if they are the submit button used to submit the form. Your button isn't a submit button and you use JavaScript to submit the form.
There is no name attribute in your input text fields
<input name="post_title" class="textfield2" type="text" id="post_title" style="width:640px;" placeholder="Ad Title" onBlur="check('post_title')" />
.........^

How to make form submit different button when I press enter on different text input?

For example, I have this form:
<form action="destination.jsp" method="POST">
<input type="text" name="Productqty1"/>
<input type="text" name="Productqty2"/>
<input type="text" name="Productqty3"/>
<input type="submit" name="RecalculatePrice" value="Recalculate Price"/>
<input type="text" name="ZipCode"/>
<input type="submit" name="RecalculateShipping" value="Recalculate Shipping"/>
<input type="text" name="Offercode"/>
<input type="submit" name="RecalculateDisc" value="Recalculate Discount"/>
<input type="submit" name="CheckOut"/>
</form>
I need that if the user press enter on Productqty1, Productqty2, or Productqty3, then the default action is suppressed, and button RecalculatePrice is clicked instead.
And the same goes with if user press enter on ZipCode, the RecalculateShipping button gets clicked instead. The same with Offercode input and RecalculateOffercode button.
But if the user press on CheckOut button, the whole form must be still submitted. That's why they're on the same form, multiple submit button on the same form.
I also need to suppress the default action of enter key, because IE8 did not sent button submit value along with the form submit, so let's disable it altogether to avoid confusion.
How can I find a unified solution for this? It's okay if it has to be made in multiple javascript function, just as long as I can understand the solution pattern, because form with multiple submit button and user can press enter on any input field is confusing me. JQuery solutions are welcomed. Thanks.
EDIT: sorry for the poor choice of words that lead to confusion. What I mean with suppress default action is that when you press enter, the form get submitted, using any (random?) button submit. That is the default behavior I want to suppress.
I have added classes and id for each submit button(added id) and text box(added class).
Try this
<form action="destination.jsp" method="POST">
<input type="text" name="Productqty1" class="class1"/>
<input type="text" name="Productqty2" class="class1"/>
<input type="text" name="Productqty3" class="class1"/>
<input type="submit" name="RecalculatePrice" value="Recalculate Price" id="class1"/>
<input type="text" name="ZipCode" class="class2"/>
<input type="submit" name="RecalculateShipping" value="Recalculate Shipping" id="class2"/>
<br><br>
<input type="text" name="Offercode" class="class3"/>
<input type="submit" name="RecalculateDisc" value="Recalculate Discount" id="class3"/>
<input type="submit" name="CheckOut"/>
</form>
Script
$(document).ready(function () {
$(".class1").keypress(function (event) {
if (event.which == 13) {
event.preventDefault();
$('#class1').click();
}
});
$(".class2").keypress(function (event) {
if (event.which == 13) {
event.preventDefault();
$('#class2').click();
}
});
$(".class3").keypress(function (event) {
if (event.which == 13) {
event.preventDefault();
$('#class3').click();
}
});
});
Fiddle Demo
I would argue that CheckOut is your special scenario here. While you could certainly catch the enter key and invoke different actions, there are primarily two reasons why I don't find that to be the optimal solution here:
Your IE8 concern seems to negate the entire prior discussion, and in my mind, this should advise you to look in another direction. Don't do a special solution for IE8, do something that all supported browsers can understand.
There is no field for which CheckOut should be the default action on enter.
I suggest that you make different forms, and use different actions, rather than checking which button was clicked by inspecting the name parameter of the button.
On click of the CheckOut-button, which should never be triggered by an enter key, you should submit all forms. You can serialize their combined values and post them like so:
$('#product-form, #zip-form, #offer-form').serialize();
You can use jquery/javascript function to change the form.action before submitting the page.
Submit type should submit the form to default form action, which has been added on form declaration.
<form action="destination.jsp" method="POST">
<input type="text" name="Productqty1"/>
<input type="text" name="Productqty2"/>
<input type="text" name="Productqty3"/>
<input type="button" name="RecalculatePrice" value="Recalculate Price"/ onClick="callDefault();">
<input type="text" name="ZipCode"/>
<input type="button" name="RecalculateShipping" value="Recalculate Shipping"/ onClick="callRecalculateShipping();">
<input type="text" name="Offercode"/>
<input type="button" name="RecalculateDisc" value="Recalculate Discount"/ onClick="callRecalculateDisc();">
<input type="button" name="CheckOut"/ onClick="callCheckout();">
</form>
<javascript>
function callCheckout(){
form.action="<some value>";
form.submit();
}
...so on with other functions...
</javascript>
Change input types to button .

Pass parameter from a text field contained in another form

I have two forms in a JSP page, one contains a text field. I need to make sure that whenever the other form is submitted, it copies the value contained in that text field, and writes it's text value in an hidden parameter.
More clearly:
One form is named "search";
Another form is named "changeInitialForm";
The text field is contained in the "search" form, and it's name is "searchString";
The "changeInitialForm" has an hidden field, also this named "searchString";
The purpose is to make sure that whether the user submits one or another form, a "searchString" parameter is passed, with the value of the text field.
I tried to include an action in javascript, executed when the "changeInitialForm" is submitted, that reads the text field value and writes it into the hidden parameter:
function searchContacts(form)
{
var searchString= document.search.searchString.value;
form.searchString.value= searchString;
}
...
<form name="search" >
<input type="text" name="searchString">
<button name="search"> Cerca </button>
</form>
...
<form name="changeInitialForm" method="post" action="AddressBookView.jsp" onSubmit="searchContacts(this.form);">
<input type="hidden" name="selectedInitial"/>
<input type="hidden" name="status" value="view"/>
<input type="hidden" name="searchString" />
</form>
But after the "changeInitialForm" is submitted, regardless of the text field value, and empty parameter is passed, I am seeing this with firebug:
I would also appreciate an alternative solution, because I know what I am doing is tricky, but I don't find another method to do that. "search" and "changeInitialForm" cannot be joined in a single form, because they do very different things.
The following seems to work
function searchContacts(form)
{
var searchString= document.search.searchString.value;
form.searchString.value= searchString;
}
...
Form 1:
<form name="search" >
<input type="text" name="searchString">
<button name="search"> Cerca </button>
</form>
...
Form 2:
<form name="changeInitialForm" method="post" action="AddressBookView.jsp" onSubmit="searchContacts(this);">
<input type="hidden" name="selectedInitial"/>
<input type="hidden" name="status" value="view"/>
<input type="hidden" name="searchString" />
</form>
Notice that searchContacts(this.form) was replaced with searchContacts(this).
UPDATE after some precisions by the author of the question:
The onsubmit event is not triggered when form.submit() is called by some javascript code. Thus, what you need when you submit the form is to call searchContacts separately, for example using
searchContacts(document.changeInitialForm);
document.changeInitialForm.submit();

JavaScript value not set during form submit

I've searched for a solution to this issue all over the web. After no success, here I am. I have a form that where I have 3 fields that should contain data. Field 1 is the Zip Code, Field 2 and 3 are City and State respectively.
The JS function getCityByZipHome and getStateByZipHome dynamically return the city and state and insert the values into the the city2 and state2 input fields.
For whatever reason, when I submit the form via mouse-click.. I see the data via $_POST. If the users presses ENTER, the data is never captured and I never see that data from the hidden fields.
Any idea what's wrong here? Note, I've tried almost all the event handlers onblur, onclick, onchange..etc.
<form method="post" name="something" action="xxSome.php">
<div class="s_row">
<label for="zippy">Enter Zip Code</label>
<input id="zipcode_home" tabindex="2" type="text" onkeypress="javascript:getCityByZipHome(document.getElementById('zipcode_home').value, this.form.elements['city3']);javascript:getStateByZipHome(document.getElementById('zipcode_home').value, this.form.elements['state3']);" name="zipcode_home"/>
<input id="state3" name="state3"type="hidden"/>
<input id="city3" name="city3" type="hidden"/>
<input type="submit" value="Start Now!"/>
</div>
</form>
I've tried adding onsubmit # the form level as such:
<form method="post" name="something" action="xxSome.php" onsubmit="javascript:getCityByZipHome(document.getElementById('zipcode_home').value, this.form.elements['city3']);javascript:getStateByZipHome(document.getElementById('zipcode_home').value, this.form.elements['state3']);">
<div class="s_row">
<label for="zippy">Enter Zip Code</label>
<input id="zipcode_home" tabindex="2" type="text" name="zipcode_home"/>
<input id="state3" name="state3"type="hidden"/>
<input id="city3" name="city3" type="hidden"/>
<input type="submit" value="Start Now!"/>
</div>
</form>
And I've tried onblur without any luck # the input level as such:
<form method="post" name="something" action="xxSome.php">
<div class="s_row">
<label for="zippy">Enter Zip Code</label>
<input id="zipcode_home" tabindex="2" type="text" onblur="javascript:getCityByZipHome(document.getElementById('zipcode_home').value, this.form.elements['city3']);javascript:getStateByZipHome(document.getElementById('zipcode_home').value, this.form.elements['state3']);" name="zipcode_home"/>
<input id="state3" name="state3"type="hidden"/>
<input id="city3" name="city3" type="hidden"/>
<input type="submit" value="Start Now!"/>
</div>
</form>
After all the messing around, I actually never solved the issue; rather, I disabled the ENTER key as a submit method.
I have some pretty serious time constraints, but I'm sure this will come up later and I will definitely come back to this issue.
You should do the getcitybyzip and getstatebyzip in the form onSubmit.
Change the type of the submit to button and then add on onClick method to it. ie instead of make it but you need an id on the form to do that. I would be interested though in finding the cause of what is going wrong. Did you try firebug?

How can I call a new page and add in the value of a form variable

I would like to link to a new page in the format:
/topic/create&qty=4
Right now I have the value (which is the number 4) stored in an field in a form. I tried to put everything in the form with a post but then realized this isn't what I want to do. I just need clicking on a button to go to link to a new page and send the input field value. The reason I want just a link is that later on I will have posts from that form and they will be handled completely differently.
Is this possible? All I know is that
<form action="/adminTopics" method="post">
isn't what I need.
you can not use POST to send data via url, but you can use GET like this: /topic/create?qty=4
EDIT: Clarification
Writing red in the text field and pressing submit on this form...
<form action="/handler.php" method="GET">
<input type="text" name="color" />
<input type="submit" />
</form>
will produce identical results on the server side to clicking this link
<a href='/handler.php?color=red'>rum</a>
If the url is
/topic/create?qty=4
and it has to be posted, then you can use
<form action="/topic/create" method="post">
<input type="hidden" name="qty" value="4" />
</form>
Send
or
<script>
window.onload=function() {
document.forms[0].submit();
}
</script>
If you do NOT need POST, then just call the URL which is the same as a GET
<input id="qty" type="hidden" name="qty" value="4" />
<a href="/topic/create"
onclick="location=this.href+'?qty='+document.getElementById('qty').value;
return false">Go</a>

Categories