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).
Related
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)
I have a form that is defined as follows:
<form id="form" onsubmit="validate()">
I process information and then modify the body of the HTML as follows:
var toRemove = document.getElementById("formContainer");
toRemove.parentNode.removeChild(toRemove);
document.getElementById("main").childNodes[1].innerHTML = text1;
document.getElementById("main").childNodes[3].innerHTML = text2;
This displays corectly for a milisecond maybe, but then the page resets to the blank form. I can fix this by adding an alert afterwards, but as soon as I dismiss the alert the page resets. Is there a way to stop it from resetting?
Here is the full code:
HTML - http://puu.sh/p7HIl/e1abcc7920.html
JavaScript - http://puu.sh/p7HJ3/54850f8588.js
Also here is a live version - http://139.62.210.151/~n00876544/assign2/index.html?firstName=Cameron&lastName=Bixby&age=21-30&email=Other&baduk=yes
I presume the js snippets are written inside validate function
If it is so you can use event.preventDefault() function which will block the default behavior .
function validate(event){
event.preventDefault();
//Rest of the code
}
Note: This will stop from submitting the form. But you can use ajax to send form data
The classic method to prevent form submission was to return false from the event handler, as in
<form id="form" onsubmit="validate(); return false;">
or if the validate function returns false to prevent submission, as
<form id="form" onsubmit="return validate();">
You can also prevent the default action by calling preventDefault on the event object. The event object is passed as the first parameter to event handler functions, or set as a window property in older versions of IE. In either case you
can prevent the default immediately,
<form id="form" onsubmit="event.preventDefault(); validate();">
or pass it to the validation routine where perhaps preventDefault can be called conditionally.
<form id="form" onsubmit="validate(event)">
Note that HTMLelement.addEventListener functionality provides an alternative to writing javascript event handlers as HTML attribute values and has the advantage of minimizing conflicts between multiple scripts trying to set the same " onEvent" HTML element attribute on the same HTML element.
I am running the following code which is:
iframedoc.getElementsByTagName('form')[0].submit();
I need to execute code as soon as the form is done being submitted. Does the submit() block, or do I need some other way to determine when the form has been submitted?
No, triggering a form submit does not block or return anything useful. It merely tells the browser to create a request which will render a new page. However, with an iframe the onload event can be used to handle the response from the form submit after it has loaded.
iframedoc = iframe.contentDocument;
iframe.onload = function(e) {
alert('frame loaded');
// read its url, content, etc...
};
iframedoc.getElementsByTagName('form')[0].submit();
// immediately returns undefined and your code proceeds
Since JavaScript runs in a single thread, you won't see the 'frame loaded' alert until all of your subsequent code has completed, the browser submits the form, and the onload event triggers.
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!
I use AJAX to load an external HTML file, containing a form, into another HTML file. The form HTML looks something like this:
<form id="..." name="..." onsubmit="postUsingAJAX(x,y,x); return false;">
Loading works fine. However, the onSubmit code is not executed when the form is submitted, same thing with onClick handlers on the submit button; no event listeners seems to be triggered. Is this the way things work when HTML is loaded through AJAX or am I doing something wrong?
A possible work-around would be to do:
theFormObject.addEventListener('submit', function...)
but I can't figure out how to make the form NOT submit after the callback is fired. How can I make it wait for a return value (or rather, feed it "return false" no matter what happens in the callback function)?
Any ideas?
It looks like an error in function postUsingAJAX. Code "return false" will not executes. To continue properly work after error you should use try..catch statement. Example:
function postUsingAJAX() {
try {
// dangerous code
} catch (e) {
// report about error
}
}
<form onsubmit="postUsingAJAX(); return false;">
If you're using AJAX, my guess is that you don't want the form to take the user to a new page - you want it to call the processing page and update the current page accordingly. What you should do instead is create the entire form without any <form> tags. Then, using the <button> tag (example: <button id="whatever">Whatever</button>) attach a click event listener to that button to do the AJAX stuff. That's the way that I always do AJAX calls with a form that the user is filling in.