How to get Form data after posting in javascript - javascript

Have form in testPage.html. And want to read form data in testPageResult.html
I have a html page testPage.html with form post action like below.
<h2>HTML Forms</h2>
<form action="http://test.com/testPageResult.html" method="POST" name="myForm">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
age<br>
<input type="number" name="age">
<br>
email<br>
<input type="email" name="email">
<br>
<input type="submit" value="Submit">
</form>
I want to read the Form data in testPageResult.html
How to get the formdata which is mentioned in above pic.
Thanks
update:
Trying to get document.forms['myform'] but got undefined

The FormData object lets you compile a set of key/value pairs to send using XMLHttpRequest. Its primarily intended for use in sending form data, but can be used independently from forms in order to transmit keyed data. The transmitted data is in the same format that the form's submit() method would use to send the data if the form's encoding type were set to "multipart/form-data".
However you can achieve it using simple Javascript like this
var formElements = document.forms['myform'].elements['inputTypeName'].value;
Simple Eg
HTML
<input type="text" name="name" id="uniqueID" value="value" />
JS
var nameValue = document.getElementById("uniqueID").value;

Related

Javascript Submit from from pageA to pageB

I am trying to write some code where I have the pageA.html and pageB.html
On pageB.html I have a form:
<form>
First name:<br>
<input type="text" name="firstname" value="">
<br>
Last name:<br>
<input type="text" name="lastname" value="">
<br><br>
<input type="submit" value="Submit">
</form>
Both pages are on my localhost.
I need to add some code on pageA.html that with hit the submit button on pageB.html
Is this possible? If yes, How can I do this?
No, It is not possible by using only html. You have to use any server-side scripting language like PHP or C# etc.

Change json file (update) from HTML form

I have a JSON file and I want to change its properties through an HTML form:
<h1>product detail</h1>
<form>
Name:<br>
<input id="prod-name" type="text" name="name" readonly><br>
Number:<br>
<input id="prod-number" type="text" name="number" readonly>
<br>
<textarea id="prod-desc" name="description" cols="100" rows="10" readonly>description</textarea>
<br>
<textarea id="prod-img" name="images" cols="100" rows="10" readonly>images</textarea>
<br>
</form>
<button id="save-changes">SAVE</button>
I already retrieved the data from a JSON file with jQuery and AJAX but now I need to save it IN A FILE (not local storage)
$('#save-changes').on('click', function () {
json[index].name = $("#prod-name").val();
json[index].number = $("#prod-number").val();
json[index].description = $("#prod-desc").val();
});
So basically i want to change name, number and description in my JSON file
Ok so based on your comments:
I think there are two ways to go about it. One is editing a javascript object and sending it back to the server. The second (which I find more simple) is to simply send back the form as it is edited. Both would require the item has some sort of unique id which is not editable, so that you can keep track of what it is you are actually updating in the server database.
so just make the form functional (simplified example):
<form name="yourForm" method="POST" action="pageHandlingUpdateRequestOnServer">
<input name="db-item-id" type=hidden>
<input name="prod-name" type="text">
<input name="prod-number" type="integer">
<input name="prod-desc" type="textarea">
<input type="submit" value="Submit">
</form>
this form will fire a POST request to the address on action. That address should know how to handle a POST request, taking it, and updating your server database with it.
I don't know what you are using server-side. I also don't know what type of DB you run. if it's php look into PDO statements, and $_POST access. it's too long to answer here. But these two terms should lead you there with some effort and you'll learn a bunch of stuff during the process.
Some useful links:
< form > format
php $_POST
php form handling
php pdo statement

Unable to send parameters to servlet on form submit through javascript

I have a HTML form as follows:-
<form name="login" id="login" action="<%=application.getContextPath()%>/GoogleLogin" method="get">
<input type=hidden id="firstName"/>
</form>
I am setting the values of this hidden input type in javascript and submitting the form to servlet as follows:-
<script>
document.getElementById("firstName").value="XYZ";
document.getElementById("login").submit();
<script>
My form is getting submitted but I am not able to get the request parameter "firstName".
http://localhost:8080/Login/GoogleLogin?
Thank you for your time and consideration.
Add a name attribute to the input field -
<input type="hidden" id="firstName" name="firstName" />
then you'll be able to get the request parameter using firstName.

How to submit 2 Forms w/ 1 Submit using Javascript? 1 Form uses "GET" & other uses "POST"

How can I submit 2 forms that are on the same page if 1 Form uses "GET" method & the other uses the "POST". Each form has the same action and goes to the same next page. Need Help. Thanks for everyones help.
How could i get these 2 forms below that use different methods submitted with one button?
<form method="POST" id="Form1" action="nextpage.html">
<input type="text" size="50" name="text_input">
<input type="submit" value="Submit">
<form method="GET" id="Form2" action="nextppage.html">
<input type="text" size="50" name="text_input">
<input type="submit" value="Submit">
One way you can do this is add a hidden field to each form. For example,
<form action="action.php" method="get">
<input type="hidden" name="id" value="form1">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
<form action="action.php" method="post">
<input type="hidden" name="id" value="form2">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
And in your script you just do a check to see what the value of id is. Another way is to check if the request sent to the server was a post or get.
Use AJAX recursively or collect all datas into one form and submit that one.
A simple form-submit will redirects your page at the first instance and the data from the second will be lost. If you can fully control the server-side, then you can submit only the form with POST data (form2 in my example) and you can apply the GET to the action attribute before submitting it.
I mean:
<form name="form1" id="form1" action="index.php" method="GET">
<input type="text" name="foo" value="bar" />
<input type="submit" value="Submit" />
</form>
<form name="form2" id="form2" action="index.php" method="POST">
<input type="text" name="foo" value="bar" />
</form>
<script type="text/javascript">
var f = document.getElementById('form1');
f.onsubmit = function() {
var t = f.getElementsByTagName('input'),
l = t.length,
i = 0,
r = [];
for (i = 0; i < l; i++) {
if (!t[i].name) continue;
r.push(t[i].name + '=' + encodeURIComponent(t[i].value));
}
var p = document.getElementById('form2');
if (r.length) p.action += '?' + r.join('&');
p.submit();
return false;
}
</script>
But AJAX is a better and more elegant solution which is extendable easily when needed with new functionality, so i take my vote to the asynchronous way of this.
It doesn;t really make sense to use two forms with a single button, nor is it valid html.
I would, submit using your POST form, POST to the page, but instead of posting to the page nextpage.html, post to a page like "nextpage.html?var1=value&var2=value"
you would use javascript in the way of:
<form method="POST" id="Form1" action="nextpage.html">
<input type="text" size="50" name="text_input">
<input type="button" value="Submit" onclick="push();">
</form>
<form method="GET" id="Form2" action="nextpage.html">
<input type="text" size="50" name="text_input" id="name_input">
<input type="button" value="Submit" onclick="push();">
</form>
<script>
function push() {
document.getElementById('Form1').action = "nextpage.html?text_input="+document.getElementById('name_input').value;
document.getElementById('Form1').submit();
}
</script>
This should work, although messy, and beware of someone putting a ?, &, =, or otherwise non-alphanumeric character into anything you're going to send to the URL bar. The GET and POST variables would be sent to the page.
You should learn a bit about how HTTP works. The browser does a "request" which is normally either GET or POST, and the response body is parsed as HTML and shown in the web browser.
Posting two forms at the same time doesn't make any sense because that kicks off two HTTP requests. Which one should be used as the new location in the browser?

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?

Categories