I have a basic form that I am using as a dummy to test some JavaScript functionality. My goal is to click the submit button and have submission paused until a javascript function is executed, then submit the form after that. the code I currently have is below, but the submission of the form is not prevented, and the hidden field's value is never set. can someone explain why this is happening?
NOTE I am aware of a jQuery method of performing the same functionality. I am specifically trying to solve this problem without using jQuery. If your only answer is "jQuery is better", please do not bother.
<html>
<head>
<script type="text/javascript">
function test(){
document.getElementById("hidden").value="hidden";
var queryString = $('#decisionform').formSerialize();
alert(queryString);
document.getElementById("form").submit();
}
</script>
</head>
<body>
<?php
if ($_POST){
foreach ($_POST as $key=>$value){
echo "<b>$key</b> $value<br>";
}
}
?>
<form action="hello.php" method="post" id="form">
<input name="first" type="text" />
<input name="second" type="text" />
<input name="third" type="text" />
<input name="hidden" type="hidden" />
<input name="submit" type="submit" value="Submit" onclick="test();return false;" />
</form>
</body>
</html>
You don't have an element with the id hidden so document.getElementById("hidden").value="hidden"; will throw an error as you can't set properties on undefined. The script will stop running and never reach return false so the form will submit as normal.
ReplyDeletetry <form action="hello.php" method="post" id="form" onsubmit="test(); return false;">
ReplyDeleteto prevent a submit, you actually need to have a return false, in the onsubmit even of the form itself
along with not having an id on the hidden field.
<input name="submit" type="submit" value="Submit" onclick="test();return false;" />
ReplyDeleteuse a regular button in this case because your function is performing the submit.
<input name="submit" type="button" value="Submit" onclick="test()" />
You're missing the id attribute from your input element. Modify <input name="hidden" type="hidden" /> to <input name="hidden" type="hidden" id="hidden" />.
ReplyDeleteYou can use
ReplyDeleteonclick="return test()"
and just return false at the end of the function.
Add id="hidden" to your input, like this:
ReplyDelete<input name="hidden" type="hidden" id="hidden" />