We Keep Coding

How to get Form data after posting in 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;

onSubmit on form not going through HTML5 validator

I’m trying to have a javascript function run AFTER a form has been submitted and validated. When I use onSubmit, the function runs regardless. The basic HTML5 validator (For example the REQUIRED tag) does not run.
When I remove the onSubmit, the HTML5 validator works perfectly, showing a message if a required field is blank.
I would like the function to be run only after a successful submission, where the required fields are filled in.
Here is my current code:
<form id="form" method="POST" action="//api.cloudstitch.io/test/test/datasources/sheet" class="form" onSubmit="goPush()" >
<div class="form-group">
<label><b>First Name </b></label>
<input name="FirstName" class="form-control">
</div>
<div class="form-group">
<label><b>Last Name </b></label>
<input name="LastName" class="form-control" required >
</div>
<div class="form-group">
<input type="submit">Submit</input>
</div>
</form>
Any ideas?
Thanks!
Updated:
Here is the function that’s being run on the onSubmit.
<script>
var goPush = function(){parent.window.myhypedocument.showSceneNamed(‘mycard');};
</script>
Thanks for the help!

Mixpanel track event when check box is checked

I am using mixpanel JS for metrics, and I have to capture an event for the form when user tries to submit a form and there is check box which allows user to signup for newsletter . I want to track users who signup and check the box, and no idea as how to approach this problem. Thats how my form looks like
<form id="form_send_email" novalidate="novalidate">
<input type="text" name="first_name" id="first_name" placeholder="First Name"/>
<input type="text" name="last_name" id="last_name" placeholder="Last Name"/>
<input type="text" name="email" id="email" placeholder="Email"/>
<br/>
<input type="checkbox" name="learn_more" id="learn_more" class="css-checkbox" checked="checked"/>
<label for="learn_more" id="learn_more_label" class="css-label">Learn more about our products and sign up</label>
</form>

Usually one want to do some client side validation of forms before actually sending them to the server. There are loads of JS libs that can help you out, jQuery for example.
Then if all data looks ok, send the track request to mixpanel and submit the form.
Mixpanel have client libs for quite some languages, you might want to send the the track request from your server?

Remember Password with AngularJS and ng-submit

How do I get the browser to ask the user to remember the password when using ng-submit in an AngularJS single page application.
My Form:
<form action="/#/dashboard/login" onsubmit="return false;" ng-submit="login()" name="loginForm">
<input type="text" required id="username" name="username" ng-model="username" autocomplete="on" placeholder="Username" value="">
<input type="password" required id="password" name="password" ng-model="password" autocomplete="on" placeholder="Password" value="">
<button type="submit" class="btn">Submit</button>
</form>
Any Ideas?
UPDATE
I just added the action to get the browser to recognise the form and trick it into remembering the password. (which obviously didn't work.) The form works fine without the action. The onsubmit="return false;" prevents the execution of the action. Only the ng-submit is doing anything.

Your code is ok, but you need to add the name attributes to your inputfields, such as:
<input type="text" name="username" ...>
and
<input type="password" name="password" ...>

The problem is the dynamically generated login form. After putting the form into the index.html it worked as expected. I guess this is a security issue.
The problem that then occurred was that the ngModels didn't get updated on autofill. After some searching I found the solution to that problem here. In AngularJS 1.2+ this is supposed to be fixed.

Your form HTML is a bit confusing.
<form action="/#/dashboard/login" onsubmit="return false;" ng-submit="login()" name="loginForm">
When the form is submitted do you want it to go to /#/dashboard/login or do ng-submit="login()" ? At the moment, the ng-submit is being ignored in favour of the form action. If you want it to go to /#/dashboard/login as a new page, then just remove the ng-submit and onsubmit attributes and it will work as normal.
If you want it to do ng-submit="login()", then remove the action and onsubmit attributes. Angular automatically prevents form submission when a form with ng-submit does not have an action attribute too. Doing it this way will stop the browser remember password prompt as the form isn't actually submitted anywhere. I guess this is an area where browsers have yet to catch up to the era of the single page application, there's no direct fix for it that I'm aware of.
A workaround would be to have a separate hidden form in the HTML, set the username/password there to the same as the user enters in main form, and then submit that hidden form to an iframe at the same time as ng-submit is called - have a look at How can I get browser to prompt to save password? for ideas about how to do it.

I didn't have to do anything special. But I noticed that while MS Edge and Firefox worked well and offered to remember credentials Chrome didn't.
So simply by providing name attribute to the login form and to username and password it seemed to work fine in Chrome. Autocomplete is on as well. Example:
<form method="post" class="form-horizontal well" ng-submit="login()">
<div class="form-group">
<label class="col-sm-4 control-label">Email Address</label>
<div class="col-sm-8">
<input name="username" ng-model="email" type="email" class="form-control" placeholder="user#example.com" autofocus="autofocus" autocomplete="on" required />
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">Password</label>
<div class="col-sm-8">
<input name="password" ng-model="password" type="password" autocomplete="on" class="form-control" required />
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-4 col-sm-8">
<button type="submit" class="btn btn-primary">Log on</button>
</div>
</div>
</form>
PS: I'm using Chrome Version 45.0.2454.93 m

The culprit is "return false;" on onsubmit. Remove that, and you're good to go. ng-submit takes care of the rest, such as not actually submitting the form when you hit enter in a field or click the submit button.

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?