Forum Moderators: open
I am referring to a certain online tutorial to learn javascript. And I have written the code as per the tutorials which is as follows
<head>
<script type="text/javascript">
.....
function placeOrder() {
if(document.getElementById("name").value == "") {
alert("Please enter name"); }
else {
//Submit order to server
form.submit();
}
}
</script>
</head>
<body>
<form method="post" action="main.php">
...........
<input type="button" name="submit" value="Place order" onclick="placeOrder(this.form);"/>
</body>
-----------------------------------------------------------
But when button is clcked and everything is fine, the form is not submitted..
If I write <input type="submit" ... />,and remove onclick="placeOrder(this.form),
then form is submitted and code in main.php works but client side validation doesnt take place.
Am i doing it the right way ?
Please help ..
PS I know how to validate forms using PHP. I am doing this as a part of learning Js
AND
Instead of
form.submit();
try
document.myFormName.submit();
------------------
Also... you might want to change the element with id="name" to something less prone to bugs...
Maybe id="customerName" would be better... as long as you then change from this
if(document.getElementById("name").value == "")
to this
if(document.getElementById("customerName").value == "")
onclick="placeOrder(this.form);
but do not have any parameters here
function placeOrder()
better
function placeOrder(form)
I also tried changing the <input type="button" />to
<input type="submit" />
After doing this the main.php executes ...
But if there is validation error, then it shows an alert and still submits the form..
is there a way to stop the script in case validation fails so that the same page is displayed again?
<input type="button" name="submit" value="Place order" onclick="placeOrder(this.form);"/>
....But when button is clicked and everything is fine, the form is not submitted..
Input type=button has no inherent action, so by using the button type, you make the form dependent on Javascript to submit. As mentioned, you are passing the form object to Javascript with this:
onclick="placeOrder(this.form);"
but are not accepting the parameter to the function.
A way to fix both:
- Use input type="submit"
- move the event handler to the form object itself onsubmit
- return false from the function
Returning false from the function tells the browser to allow Javascript to manage the submit and not perform the natural action of submitting the form. So if Javascript is enabled, the function submits the form; if Javascript is disabled, it ignores return false and submits the form normally.
As mentioned, you should avoid naming/id'ing form elements with words that may be reserved, like name, submit, reset, location, etc.
<script type="text/javascript">
function placeOrder(form) {
if(document.getElementById('custName').value == "") {
alert("Please enter name");
}
else { form.submit(); }
return false;
}
</script>
</head>
<body>
<form method="post" id="orderForm" action="main.php" onSubmit="return placeOrder(this);">
<p><input type="text" name="custName" id="custName"></p>
<p><input type="submit" name="submitButton" value="Place order"></p>
</form>
</body>
</html>
Note that because the event handler is placed on the form element itself, you use "this" (since it's referencing the form) instead of "this.form" for any events on elements within the form.
A side note that usually catches newcomers to JS - because a link is not a form element, you can't do something like this:
<a href="#" onClick="placeOrder(this.form);">
Even if the link is inside the form (<form><a href...></form>). This is because an anchor is not a form element. You would have to do something like this:
<a href="#" onClick="return placeOrder(document.getElementById('orderForm'));">
Which is why I added the id "orderForm" to your example. Note also the effect of return false here; in this case, it tells the browser to not navigate to the link when clicked, allowing Javascript to manage the click action. This will also become useful at some point. :-)
