I have a form with a inline onsubmit event (that sends a simple alert for testing purposes). That alert fires OK when submiting information from this page.
This form has an iframe which have a button that takes the form parent, and submits it. The "postback" on the parent is firing OK but the alert not.
Maybe I'm doing something wrong because the alert is not firing or it cannot be possible?
Parent Form:
<form name="form1" method="post" action="mipagina.aspx"
onsubmit="javascript:alert('hola');" id="form1">
Iframe JS:
formulario = window.parent.document.forms.item(0);
formulario.submit();
That's the normal behavior. From MDN:
The HTMLFormElement.submit() method submits a given .
This method is similar, but not identical to, activating a form's submit . When invoking this method directly, however:
No submit event is raised. In particular, the form's onsubmit event handler is not run.
Constraint validation is not triggered.
The only workaround I may see is:
add your code before formulario.submit();
very bad idea: overwrite document.getElementById('form1').submit method (please avoid this)
Related
Where we have js code that submits a form instead of just submitting the form like:
form.submit();
Should we instead dispatch a (bubbling, cancelable) event in order to allow other potential js event listeners the chance to handle the form submission:
form.dispatchEvent(new Event('submit', {bubbles: true, cancelable: true}));
It seems like this allows our code to play more nicely with others. If this is true, why isn't this pattern pushed more?
HTMLFormElement.requestSubmit() to the rescue!
In most cases in which a form is to be submitted programmatically via JavaScript, it's wise to use requestSubmit() rather than submit(). Doing so ensures submit handlers will have a chance to handle the submit event. Use submit() only when you want to explicitly submit the form ignoring any registered submit event listeners and form validation.
I was simply not aware of this newer form method.
See https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit
The HTMLFormElement.submit() method submits a given <form>.
This method is similar, but not identical to, activating a form's
submit <button>. When invoking this method directly, however:
No submit event is raised. In particular, the form's onsubmit event handler is not run.
Constraint validation is not triggered.
The HTMLFormElement.requestSubmit() method is identical to activating
a form's submit <button> and does not have these differences.
And usage notes from https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/requestSubmit
The obvious question is: Why does this method [requestSubmit()] exist, when we've had the submit() method since the dawn of time?
The answer is simple. submit() submits the form, but that's all it
does. requestSubmit(), on the other hand, acts as if a submit button
were clicked. The form's content is validated, and the form is
submitted only if validation succeeds. Once the form has been
submitted, the submit event is sent back to the form object.
I have a JavaScript that generates a form with an onsubmit event handler. The form is defined like this:
document.writeln('<form action="#" id="loginForm" onsubmit="processLoginForm(this);">');
In this processLoginForm() function I am basically printing a form value and returning:
function processLoginForm(form) {
var userName = form.uname.value;
document.writeln("username = "+userName+"<br>");
return false;
};
When this form is loaded, the browser loading is complete and done. Loading the page is done by the browser. But when I click on the button to submit the form, my code is processed but my browser is still trying to load something that it shows this loading icon and never stops. I tried returning true, false, or nothing in processLoginForm() function, but it has no impact.
How can I make my browser to stop loading when my submit handler is done?
I'd recommend not putting your function inline into the HTML. Instead do this:
HTML
<form action="#" id="loginForm">
JavaScript
document.getElementById('loginForm').onsubmit = function(event){
event.preventDefault();
//continue to process the form
}
The event.preventDefault() method which is attached to the event argument that is automatically passed in event listeners will cancel the default action of the handler. In this case, trying to load a page located at /# (according to your form action).
I want to perform javascript validation after user submits the form. Documentation for jQuery .submit() clearly says:
The submit event is sent to an element when the user is attempting to submit a form.
But if I put
$('form.simple_form.new-channel').submit perform_validation()
into my code, perform_validation() is triggered every time page is rendered! Even when there is no form on it and no 'submit' button. What is the correct way to call a function after submitting a form?
I believe You dont want to trigger action after submitting, You just want to run it after user clicks submit button.
Wouldn`t it work put like that?
$('form.simple_form.new-channel').submit(function(e){
if(!perform_validation()){
e.preventDefault(); //prevents form from being submitted if validation fails
return; //exits function
}
})
Your perform_validation function should then return Boolean value.
EDIT:
You wrote Your function like this:
$('form.simple_form.new-channel').submit perform_validation()
which is exact the same as writing:
$('form.simple_form.new-channel').submit;
perform_validation();
In Your version script just runs the perform_validation() because it isn`t inside event handler.
You could also do it this way:
$('form.simple_form.new-channel').submit(perform_validation);
This one tells the script to run on the form submit, the function which name is passed as an argument.
The problem is your syntax.
$('form.simple_form.new-channel').submit perform_validation()
Because of javascript's liberality the fact that you are not invoking submit here and you have no semicolin after perform_validation... causes no error, but simply invokes perform validation as if it was on the line all by its self with a semicolin.
to correct this, do this
$('form.simple_form.new-channel').submit(perform_validation);
I have a form, very basic, and when I hit enter key nothing happens in firefox, but in google chrome it submits. Haven't tried other browsers yet...
Nothing happens at all when hitting enter in firefox.
When clicking the submit button it works fine in both browsers.
The form is inside a DIV, and the form has javascript too, here is the form simplified:
<form id="nav_form_main" name="nav_form_main" action="bincgi/sql_query.php" target="iframe001" method="get" onSubmit="reset_pager();">
<input type="button" name="nav_submit" id="nav_submit" value="Search" onClick="reset_and_subm();" style="width: 58px; font-size: 13px;">
//some other elements...
</form>
and here is the js:
function reset_pager(){
byId("p").value = 0;
}
function reset_and_subm(){
byId("p").value = 0;
document.forms["nav_form_main"].submit();
}
The reset_pager function is not called at all... which is strange because it is an "onsubmit" function. So it is like the form isn't submitted at all.
However, the results in the targeted iframe appear fine, without any problem.
Any ideas?
Thanks
Enter for submit is only triggered if <input type="submit> exists on the form. You can add a hidden one for this purpose, but keep in mind that it will submit the form and bypass the onclick event you're looking to capture. You'll need to patch into the onsubmit action of the form to run your function.
As Diodeus mentioned, you need an <input type="submit"> tag in your form if you want to use the ENTER key to submit the form.
The reason that your reset_pager function is not firing on the onsubmit event is because the onsubmit event is never fired. Though it's somewhat counter-intuitive, using the submit() method on a form (as you're doing in your reset_and_subm function) will not cause the onsubmit event to fire.
You have a couple options:
You can add an <input type="submit"> to your form and put all your logic in an onsubmit callback function.
Watch all keypress events on the form. If the ENTER key is pressed or the button is clicked, then call a function that does all the stuff you want to happen before submitting the form and then call submit() on the form.
I have some javascript that ends up programatically clicking on a button:
document.getElementById("myButton").click();
This in turn results in the form being submitted using a function call:
<form onsubmit="submit_this_form(this);return false;" action="" method="POST">
It seems that a good percentage of the time either the actual button click is not going through or the form is not being submitted. I think the button click is going through and I know the code is being called because I have a counter embedded and I can see it is executing.
My question is...is there an event or a way to verify that the form actually posted? By the way, I don't have control of the HTML code so I can't change the tag content.
<form onsubmit="submit_this_form(this);return false;" action="" method="POST">
return false after submit_this_form() essentially stops the form from actually submitting. I believe if you change it to:
<form onsubmit="submit_this_form(this);" action="" method="POST">
It should work as you want.
Using return false after an event handler will essentially 'hijack' the default functionality. Basically, whatever your event handler function script does replaces the default behavior, which in this case, is submitting the form data to the server.
I don't think you can verify that form is actually where submitted.
But you can submit it by hand via XMLHTTPRequest and check for server responce.
This way you will be sure thet form is submitted. And you can have an event (your custom event) that says about form submission if you need to...
BTW do not forget to prevent forms default submit if you go AJAX way.
Check jquery.form plugin to make a fast rollout of AJAX form submission and look is it what you want or not.
Good luck!