onSubmit not triggered on form loaded with AJAX - javascript

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.

Related

Stop browser from loading after form onsubmit function is done

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).

Unobtrusive Javascript on a Submit Button

I'm trying to write an unobtrusive function on a submit button without the use of jQuery and the like. I have the following bit of code in my HTML form:
document.getElementById('help_submit').onclick = function (){
window.alert("You clicked on the Submit Button on the Help Request form.");
};
And I'm trying to use on the following HTML button:
<input type="submit" id="help_submit" value="Submit Help Request" />
However when I try to fire the event, the form doesn't pop up with the Message Box and submits anyway.
I check the developer tools in Chrome and I see the following error:
Uncaught TypeError: Cannot set property 'onclick' of null
Where did I go wrong with the coding?
It seems likely that you are running your Javascript too early before the DOM has loaded and thus document.getElementById('help_submit') does not find the DOM element because it is not yet in the page. You can fix this by moving the script that contains this code to right before the </body> tag so all DOM elements will be present when the script runs. For more details on this issue, consult this answer: pure JavaScript equivalent to jQuery's $.ready() how to call a function when the page/dom is ready for it.
In addition, your submit handling code needs to prevent the default action of the submit button or the form will submit anyway. Though, if you don't want the form to submit, then you should just stop using a submit button and use a regular button.
In addition to moving the script to the end of the DOM, I'd suggest you change your event handling code to this:
document.getElementById('help_submit').addEventListener('click', function (e) {
e.preventDefault();
window.alert("You clicked on the Submit Button on the Help Request form.");
});
Working demo: http://jsfiddle.net/jfriend00/vcjtv0kz/
I'm not experienced in JavaScript, but, following on the comment and the answer already given, try changing your code the following way:
Remove the given code (it will be used differently at the next steps).
Inside the script tag inside the head element, try creating two functions called, say, initialization and message:
function initialization()
{
element = document.getElementById('help_submit');
element.addEventListener( 'click', message, false );
}
function message()
{
window.alert("You clicked on the Submit Button on the Help Request form.");
}
At the end of this script tag, write the following:
window.addEventListener( "load", initialization, false );

event trigger on submit

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);

jquery .submit(handler) doesn't appear to be detecting form submission

so I'm trying to intercept a javascript form submission using jquery, and having some issues. I put Spring in the tags because I wonder if the issue could be that I'm using a spring form:form tag, rather than just a straight html form. Basically, the handler seems to be totally ignored, with the submission going on regardless.
The relevant code is as follows:
function submitForm(functionName){
var form = document.getElementById("evalAdminForm");
//does some stuff
form.submit();
}
$('form').submit(function(){
alert("SUBMITDETECTED");
});
<form:form commandName="evaluation" id="evalAdminForm" name="evalAdminForm" method="post">
//the form is in here
</form:form>
Thanks!
Submit events fire when forms are submitted manually, not in response to JavaScript calling the submit method.
If you are going to trigger form submission using JS (and there is almost never a time when doing so is better than having a submit button) then you need to manually fire any other functions you want to run at the same time.

Did button actually click?

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!

Categories

Resources