JavaScript Not Submitting Form

Question 1

I've spent the last hour or so trawling through here and Google without success. I have a form that I want to submit via POST. The javascript runs and validates fine, it even 'submits' the form. But when it does, it just reloads the page. No POST headers are sent (confirmed using Firebug in Firefox). It's as though it simply reloads the page rather than submitting it.

This form is embedded in the addUser.php page.

<form action="addUser.php" method="post" name="NewUser">
<div data-role="field-contain">
 <label label-for="EmpID" class="ui-hidden-accessible">Enter Employee ID</label>
 <input name="EmpID" id="EmpID" placeholder="Employee ID" value="" autocomplete="off" title="Enter Employee ID" type="number" required autofocus>
 <label label-for="UserName" class="ui-hidden-accessible">Enter username</label>
 <input name="UserName" id="UserName" placeholder="Username" value="" autocomplete="off" title="Enter the new username" required>
 <p>
 <label label-for="NewPass1" class="ui-hidden-accessible">Enter Your Current Password</label>
 <input name="NewPass1" id="NewPass1" placeholder="New Password" value="" type="password" autocomplete="off" title="Must be at least 8 characters, with numbers and upper and lower case letters." required>
 </p>
 <p>
 <label label-for="NewPass2" class="ui-hidden-accessible">Enter Your Current Password</label>
 <input name="NewPass2" id="NewPass2" placeholder="Verify Password" value="" type="password" autocomplete="off" title="Re-enter your chosen new password." required>
 </p>
</div>
<button type="button" name="submitButton" value="submitButton" data-theme="d" data-inline="true" data-icon="check" data-iconpos="left" onclick="validateForm ()">
 Add User
</button>

And here is the Javascript:

function validateForm()
{
 var reason = "";
 reason += validateEmpID();
 reason += validateUserName();
 reason += validateNewPassword();
 if (reason != "") {
 alert("There are some errors with the data you entered:\n" + reason);
 return false;
 } else {
 document.NewUser.submit();
 }
}

I have tried various different methods of calling submit, all with the same result. Any help greatly appreciated.

Thanks Gareth

Question 2

Have u tried var_dump($_POST) to see what is in $_POST?

Question 3

did you miss </form> tag ?

Question 4

slacker - I just missed it in the copy-paste, it is in the HTML. Kishor - I haven't. I might give it a go just to see what it's showing.

Question 5

You wouldn't read about it - after running some jQuery entries, I went back to the straight javascript (exactly as above). And it works!!! GAH!

Question 6

I think it should be

document.forms['NewUser'].submit();

or

document.forms.NewUser.submit();

Question 7

I think somewhere you are missing adding return false that is the reason your browser is asking for reloading the form. And better way to submit is to use submit button instead of using simple button.

Question 8

Why not use an AJAX post? Or better yet a jQuery AJAX POST?

$.post(url, data, datatype);

http://api.jquery.com/jQuery.post/

Question 9

Never actually used jQuery (well, apart from formatting controls). This has it inserting the data, now I need to do some research on displaying the results!

Question 10

function validateForm(event) {
 var reason = "";
 reason += validateEmpID();
 reason += validateUserName();
 reason += validateNewPassword();
 if (reason != "") {
 alert("There are some errors with the data you entered:\n" + reason);
 event.preventDefault();
 }
}
document.getElementById('my_form').addEventListener('submit', validateForm, false);

Jim Garrison 87k20 gold badges162 silver badges197 bronze badges · Answer 1 · 2013-03-20 04:59:32Z

1

I think it should be

document.forms['NewUser'].submit();

or

document.forms.NewUser.submit();

Share

Improve this answer

answered Mar 20, 2013 at 4:59

Jim Garrison's user avatar

Jim Garrison

87k20 gold badges162 silver badges197 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Prashant Shukla 3291 gold badge2 silver badges18 bronze badges · Answer 2 · 2013-03-20 06:24:29Z

I think somewhere you are missing adding return false that is the reason your browser is asking for reloading the form. And better way to submit is to use submit button instead of using simple button.

ben.payne 713 bronze badges · Answer 3 · 2013-03-20 04:58:01Z

0

Why not use an AJAX post? Or better yet a jQuery AJAX POST?

$.post(url, data, datatype);

http://api.jquery.com/jQuery.post/

Share

Improve this answer

answered Mar 20, 2013 at 4:58

ben.payne's user avatar

ben.payne

713 bronze badges

1 Comment

Gareth

Gareth Over a year ago

Never actually used jQuery (well, apart from formatting controls). This has it inserting the data, now I need to do some research on displaying the results!

2013年03月20日T05:07:18.39Z+00:00

pdoherty926 10.6k5 gold badges47 silver badges75 bronze badges · Answer 4 · 2013-03-20 05:15:11Z

function validateForm(event) {
 var reason = "";
 reason += validateEmpID();
 reason += validateUserName();
 reason += validateNewPassword();
 if (reason != "") {
 alert("There are some errors with the data you entered:\n" + reason);
 event.preventDefault();
 }
}
document.getElementById('my_form').addEventListener('submit', validateForm, false);

CollectivesTM on Stack Overflow

JavaScript Not Submitting Form

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Hot Network Questions

CollectivesTM on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Related