Absolutely valid.
<form action="javascript:alert('Hello there, I am being submitted');">
<button type="submit">
Let's do it
</button>
</form>
<!-- Tested in Firefox, Chrome, Edge and Safari -->
So for a short answer: yes, this is an option, and a nice one. It says "when submitted, please don't go anywhere, just run this script" - quite to the point.
But ... !
Why don't we take this to the next level - let the event handler know which form we're dealing with! Here's how to do it. (Note how the first form, no matter how obvious, won't do the job. We need a few keystrokes more.)
<form action="javascript: myFunction( this ) ">
<!-- But this won't work -->
<form action="javascript:;" onsubmit=" myFunction( this ) ">
<!-- Tadaammm! -->
Now you can access the sender form properly. (You can write a simple "#" as action, it's quite common - but it has a side effect of scrolling to the top when submitting.)
Again, I like this approach because it's effortless and self-explaining. No "return false", no jQuery/domReady, no heavy weapons. It just does what it seems to do. Surely other methods work too, but for me, this is The Way Of The Samurai.
A note on validation
Forms only get submitted if their onsubmit event handler returns something truthy, so you can easily run some preemptive checks:
<form action="/something.php" onsubmit=" return isMyFormValid ( this ) ">
Now isMyFormValid will run first, and if it returns false, server won't even be bothered. Needless to say, you will have to validate on server side too, and that's the more important one. But for quick and convenient early detection this is fine.
Answer from dkellner on Stack OverflowAbsolutely valid.
<form action="javascript:alert('Hello there, I am being submitted');">
<button type="submit">
Let's do it
</button>
</form>
<!-- Tested in Firefox, Chrome, Edge and Safari -->
So for a short answer: yes, this is an option, and a nice one. It says "when submitted, please don't go anywhere, just run this script" - quite to the point.
But ... !
Why don't we take this to the next level - let the event handler know which form we're dealing with! Here's how to do it. (Note how the first form, no matter how obvious, won't do the job. We need a few keystrokes more.)
<form action="javascript: myFunction( this ) ">
<!-- But this won't work -->
<form action="javascript:;" onsubmit=" myFunction( this ) ">
<!-- Tadaammm! -->
Now you can access the sender form properly. (You can write a simple "#" as action, it's quite common - but it has a side effect of scrolling to the top when submitting.)
Again, I like this approach because it's effortless and self-explaining. No "return false", no jQuery/domReady, no heavy weapons. It just does what it seems to do. Surely other methods work too, but for me, this is The Way Of The Samurai.
A note on validation
Forms only get submitted if their onsubmit event handler returns something truthy, so you can easily run some preemptive checks:
<form action="/something.php" onsubmit=" return isMyFormValid ( this ) ">
Now isMyFormValid will run first, and if it returns false, server won't even be bothered. Needless to say, you will have to validate on server side too, and that's the more important one. But for quick and convenient early detection this is fine.
A form action set to a JavaScript function is not widely supported, I'm surprised it works in FireFox.
The best is to just set form action to your PHP script; if you need to do anything before submission you can just add to onsubmit
Edit turned out you didn't need any extra function, just a small change here:
function validateFormOnSubmit(theForm) {
var reason = "";
reason += validateName(theForm.name);
reason += validatePhone(theForm.phone);
reason += validateEmail(theForm.emaile);
if (reason != "") {
alert("Some fields need correction:\n" + reason);
} else {
simpleCart.checkout();
}
return false;
}
Then in your form:
<form action="#" onsubmit="return validateFormOnSubmit(this);">
Videos
Ok, So I've read a lot of approaches on stack overflow, but they don't address the issue. They are all for one time use and you have to label and build extensive javascript functions to do something very simple.
I have a very clean HTML5 form that uses the new validation and is great. I have it use a get to a php action and it works perfect.
However I'm trying to improve user experience so I've written a javascript function to do an ajax call to that php action. The problem is I want it to be generic. I've got dynamic form values and I want to use the same function for all my forms. Really I want the form submit to just act like it normally would and append the get string to the end of whatever url I pass. I can't get the form to submit the get values to the javascript function.
This works:
<form action="myphp.php" method="get">
<label>Month:</label><input id="day" type="number" min="1" max="12" name="week" value="" required> <br>
<label>Year:</label><input id="year" type="number" min="2008" max="2030" name="year" value="" required><br>
<input id="cmdReset" type="submit" value="What month is it?">
</form>This also works, kind of:
<form action="javascript:displayPostResult('myphp.php')" method="get">It calls the page and displays the results on the page in an awesome ajaxy way just like I want it to, I just can't pass the form's get values.
I'd like to use that displayPostResult function on about 20 pages with all kinds of different form data so creating individual functions to handle each page is out of the question. I really just want to append the get values as if the form was submitted to the end of the string being passed to the function. I just can't find a way to do that.
Is there any way I can pass "?month=12&year=2013" to the javascript function?
i.e. displayPostResult('myphp.php', <get parameters>)
