Here's the part of my form:
<form name='form-main' onsubmit='return validate()' action='' method='post'>
<center><input type='submit' onClick='this.disabled=true; this.form.submit();' value='I accept - Download the GM!'/></center>
</form>
and here's the validate function:
function validate()
{
// this is just to test if it actually shows
alert('You must not leave any of the fields blank!');
return false;
}
Whenever I hit the submit button, nothing happens, the page just reloads.. I would like it so it shows the alert dialog.
When you call the form's submit function, the submit event is not fired. This is by design, the assumption is that if you're triggering the submission from code, you've already done any necessary validation. (Note that this is true of the HTMLFormElement#submit function; it is not necessarily true of the wrappers libraries put around it.)
In your example, I would remove the click handler on the button. It's a submit button, so just put any relevant logic in the submit event on the form. Alternately, if you prefer, call validate() as part of the button's click.
You can override the original prototype "submit" method like this:
HTMLFormElement.prototype._submit = HTMLFormElement.prototype.submit;
HTMLFormElement.prototype.submit = function (){
this._submit();
alert('Deddy Is Great :)'); // or fire the onsubmit event manually
};
The onclick event of your submit button is firing immediately before the onsubmit event of your form, and this is disabling subsequent events from propagating and firing, which causes the validate function to never get triggered. You can see this is you remove the this.disabled=true; from your code example.
Per the docs at W3:
A form control that is disabled must prevent any click events that are
queued on the user interaction task source from being dispatched on
the element.
You should remove the click event code from the submit button, and simply allow the function to do what you need it to do, including disabling the button. For example:
function validate() {
// this is just to test if it actually shows
document.getElementById('sub').disabled=true;
alert('You must not leave any of the fields blank!');
return false;
}
jsFiddle example
Related
I know a way to stop a form from submitting, but i have a on click event to the submit button and its firing even though the form doesnt pass the HTML validation.
<form id="signupform" class="signupform" onsubmit="(e)=>{e.preventDefault()};return false">
</form>
My goal is to stop the page refresh either way (if it validates or not) but still allow the built in validation to run first.
Any suggestions?
A submit button's job is to trigger the submit event of a form. Therefore, with form elements, you don't set up click events on the submit button, you set up submit event handlers on the form.
Then, to introduce validation into the mix, you can stop the native submit to take place in the handler, only if validation fails. This is done by accessing the event argument that is automatically sent to every DOM event handler* (see next paragraph for caveat). You can use the event.preventDefault() method to stop the native event from taking place.
*One final note, the use of inline HTML event handling attributes such as onsubmit and onclick is to be avoided. This is a 25+ year old technique that we used before we had standards and unfortunately, because they seem easy to use, they get copied by new developers who don't know any better. There are real reasons not to use them and you've stumbled into one. Your e argument to your event handling function is not being populated with a reference to the event like you think it is. That only happens when you use the modern standard way of setting up event callbacks, which is .addEventListener().
// Set up a submit event handler for the form
// not a click event handler for the button because
// clicking a submit button triggers the form's submit event
document.querySelector("form").addEventListener("submit", function(event){
if(document.querySelector("input").value === ""){
// Invalid data! Stop the submit!
event.preventDefault();
alert("Please fill in all fields!");
return;
}
// If the code reaches this point, validation succeeded
console.log("Form submitted");
});
<form action="https://example.com" method="post">
<input>
<button>Submit</button>
</form>
I need to validate a form before it can be submitted. I'm following the pretty standard procedure of adding event listener to the form's submit event, canceling the default behavior, and then once everything has been validated, submitting the form through submit() method after removing the event listener. But for some reason, the event doesn't get removed and the page keeps on reloading. Here is my code:
// Prevent form submission on button click and validate form input fields first
cartForm.addEventListener('submit', validateInputFields);
function validateInputFields(event) {
event.preventDefault();
validateName();
validateRecipientPhone();
validateCustomerPhone();
validateAddress(submitForm);
}
function submitForm() {
// remove validation event listener and submit form
cartForm.removeEventListener('submit', validateInputFields);
cartForm.submit();
}
Here validateAddress makes an async API call and takes some time to resolve therefore I passed submitForm as callback which can be triggered once validateAddress resolves. Does this have something to do with my form not getting submitted? Or am I making some other mistake? It's stuck in a loop no matter address gets validated or not.
The first three validation functions are only checking if fields are populated and have correct lengths.
How can I work around this issue?
Bare bones Example:
<form id="tForm">
<input type="submit" id="tSubmit" value="Submit">
</form>
<script>
$(document).on( 'click','#tSubmit', function(e) { someFunction(<fire-and-forget-action)});
</script>
Usage scenario:
1.) User clicks form Submit button
2.) someFunction( ) is called
3.) tForm is submitted as the default behavior of the HTML input element of type=submit.
Am I guaranteed that the someFunction( ) call will happen before the submission of tForm? There has been an issue raised that the possibility exists that the someFunction( ) call would not complete before tForm is submitted and a new page is rendered.
If the function fire-and-forget-action is an asycronous request then all bets are off.
You need to prevent the form submission (return false or call preventDefault() on the event argument) and execute it once the inner function has completed. You might, for example, have to refactor the 'fire and forget action' to do this, but without a big more information about what it contains, it's hard to help further.
Note that even then you have an issue where the form can be submitted in other ways. You're shadowing the submit click action, but there are other ways to submit the form. Ideally you'd observe the form submit event instead.
Here is a slight abstract example of how you should do it:
$('#theForm').submit(function(e) {
var f = this;
setTimeout(function() {
f.submit();
}, 1000);
return false;
});
The setTimeout is basically equivalent to some asynchronous request happening outside of the original handler. The point is, the inner function knows about the original form and submits it when complete.
I'm working on an HTML form that may take a few seconds to submit. I'd like to disable some of the fields in the form after it's submitted.
I can do this in a handler on the form's submit event, but this fires before the form submits. If I disable the controls then, their values aren't included in the post data sent to the server.
I've tried cancelling the submit event in my handler, removing my submit event handler from the form, submitting the form myself via JavaScript, and then disabling the controls, but the problem there is that I need to know which button the user clicked on to submit the form. This information is in the original form submit, but obviously isn't in the one I trigger manually (as no button was clicked).
I could try to copy this information into my manual form submit, but is there a way to run my disabling code after the form submits?
Don't allow further submits by disabling the submit buttons, you don't need to do anything else. Alternatively, hide the form and replace it with something that spins so users are mesmerized into thinking that Something Important is happening.
This is pretty much the same as sp00m's answer, except it uses Javascripts native submit to prevent the recursive call.
$('#myForm').submit(function() {
this.submit();
disableFields(); // your own function
return false;
});
After submiting the form you can trigger this function:
function name() {
$("#target :input").attr("disabled", true);
return true;
}
This code will disable all the from fields descended from the element with "target" as its id.
This version just matches all input elements:
function name() {
$("#target input").attr("disabled", true);
return true;
}
You have to include the jQuery library for this code to work.
You could use jQuery's .post() to submit, and .button().click() to detect what button was clicked
.post() takes a function to execute after the submission is complete
You could delay the execution of your operations so that they are called only after the submit has been made:
$('#myForm').submit(function() {
setTimeout(function() {
// Run disabling code here
}, 1);
return true;
}
setTimeout(fn, 1) will place the function inside at the end of the execution queue, so that the form submission has been started before the functions run.
setTimeout can be used for queuing operations a bit like thread indexing or z-index:
StackOverflow: Why is setTimeout(fn, 0) sometimes useful?
I am using jQuery 1.6 and I would like to submit a form by clicking on a check box button.
That is, I have the following code that submits a form
$jQuery('#search_form').submit(function () {
$jQuery.get(this.action, $jQuery(this).serialize(), null, 'script');
return false;
});
and when I click on a check box which HTML code is
<input type="checkbox" value="true" ... id="check_box_id">
I would like to trigger the form submission.
How can I do that?
You can trigger the submit event by simply calling submit with no arguments:
$jQuery("#check_box_id").click(function() {
$jQuery("#search").submit();
});
Alternatively, you can use the trigger method:
$jQuery("#search").trigger("submit");
As it looks like you're firing an asynchronous request in the submit event handler, rather than using the default form behaviour, I would suggest disabling the checkbox (or removing the event handler) in the submit event handler, and then re-enabling it in the success callback of the get method, to prevent the user from submitting repeatedly.
$jQ("#check_box_id").click(function(){
$jQ("#search").submit();
});
Calling submit() on the form with no parameters will trigger it to submit.
Most event handlers in jQuery share this; calling .click() will simulate a click, whereas .click(function...) sets a handler.
$(document).ready(function()
{
$('#check_box_id').click(function()
{
$('#search_form').submit();
});
});