I want a jQuery form submit handler to respect any previous submit handlers, including ones added with onsubmit.
I'm trying to detect the previous handler's return value but can't seem to do it:
<form><input type="submit" /></form>
<script type="text/javascript">
$('form')[0].onsubmit = function() { return false; }; // called first
$('form').submit(function(e) {
console.log(e.result); // undefined
console.log(e.isDefaultPrevented()); // false
console.log(e.isPropagationStopped()); // false
console.log(e.isImmediatePropagationStopped()); // false
});
</script>
Is there a way to do this?
I found one non-jQuery way to do this:
var form = $('form')[0];
var old_onsubmit = form.onsubmit;
form.onsubmit = function() {
if ($.isFunction(old_onsubmit)) {
if (old_onsubmit() === false) {
console.log("false");
return false;
}
}
console.log("true");
return true;
}
But I'd much prefer detecting this from the jQuery-bound submit handler
Related
I have a code snippet like this.When I submit it shows alert button and ajax function calls.How can I prevent.I have a textbox with id=id1.I need to call ajax only if there is a value in textbox.
I have also another button in same page so I need to call common validate function inside that button also.So I wrote common function.
$( document ).ready(function() {
function validate() {
if($('#id1').val=='') {
alert('enter a value');
return false;
}
return true;
}
$('#button').click(function() {
validate();
$.ajax...code goes here
});
});
If it is not valid, return from the click handler without executing the ajax call.
In your case you are calling the validate method but you are not doing anything with the value returned from it. So use a if condition to check whether it is true or false, if false then return from the click handler
$(document).ready(function () {
function validate() {
if ($('#id1').val() == '') {
alert('enter a value');
return false;
}
return true;
}
$('#button').click(function () {
if (!validate()) {
return;
}
$.ajax...code goes here
});
});
keep your functions out of jquery functions, to make it reusable across other places.
$( document ).ready(function() {
$('#button').click(function() {
var isValid = validate();
if(isValid){
$.ajax...code goes here
}
});
});
var validate = function() {
if($('#id1').val=='') {
alert('enter a value');
return false;
}
return true;
}
Return the validity of the check box and if it is true then trigger the ajax request.
I have created this function in JQuery:
function CheckRequired() {
var ret = true;
$(".required").each( function() {
var check = $(this).val();
if(check == '') {
//alert($(this).attr("id"));
ret = false;
}
});
if(!ret) {
alert("One or more fields cannot be blank");
return false;
}
}
on my forms submit buttons, i run this onClick
<input type="submit" onClick="CheckRequired();" />
if any fields in the form with a class of required have a blank value the error will alert to the user and the form should not submit.
the alert is showing, however the form still seems to be submitting
use preventDefault. This method makes sure the default action of the event will not be triggered.
function CheckRequired(event) {
var ret = true;
$(".required").each( function() {
var check = $(this).val();
if(check == '') {
//alert($(this).attr("id"));
event.preventDefault();
}
});
if(!ret) {
alert("One or more fields cannot be blank");
event.preventDefault();
}
}
To prevent form from submission you should bind event to form's onsubmit, and return function result
<form onsubmit="return CheckRequired()" />
Also, as you already use jquery it would be much more convenient to bind events in javascript:
$('#form_id').submit(function(){
//your form submit code
})
I think you have to prevent the default submission action by using event.preventDefault(); as noted here:
Prevent submit button with onclick event from submitting
I have form that calls the function GenerateWords when it is submitted and returns false.
<form id="3Form" onsubmit="GenerateWords(this); return false;">
This is causing problems with Google Tag Manager implementation as it does not bubble up to the form submit listener.
I understand event.preventDefault(); needs to be used and return false removed but don't know how to implement this. The current javascript I have is:
function GenerateWords(F) {
var strWords = F.words.value;
if ... condition is false
return false;
}
if ... condition is false
return false;
}
vars declared
for (var i = 0; i < ctLines; i++) {
var strLine = arrLines[i];
strLine = Trim(strLine.replace(/[\r]/g,""));
if successful condition
}
}
F.result.value = oResult.join("");
F.result.focus();
}
Any help would be appreciated. Thanks.
Try this in javascript:
function GenerateWords(F,ev) { // event object
...
if(someCondition) // condition when the form should not be submitted.
ev.preventDefault();
}
and you may remove return false; from the form tag and pass the event reference
<form id="3Form" onsubmit="GenerateWords(this,event);">
I added an event listener when my form is submitted, this is the code:
var formo = document.getElementById("ing");
formo.addEventListener("submit", validation, false);
but I'm submitting the form with a button tag with this code:
var enviar = document.getElementById("submit_btn");
enviar.addEventListener("click", envioFormulario, false);
function envioFormulario() {
this.disabled = true;
this.value = "Sending";
this.form.submit();
}
with this the form is submitted but the submit event (the first lines of code) doesn't seems to work what can I do to make it work?
I agree with #Mathletics comment. Just do the validation when you click, and submit if it passes validation:
var enviar = document.getElementById("submit_btn");
enviar.addEventListener("click", envioFormulario, false);
function envioFormulario() {
if (validation()) {
this.disabled = true;
this.value = "Sending";
this.form.submit();
} else {
alert("Validation failed. Didn't submit");
}
}
Try setting the function name in the "onsubmit" attribute of your form element.
Your issue may be around preventing the default behaviour from occuring.
You need to receive the event in your handler function to do that.
function validation( event )
{
if ( event.preventDefault ) event.preventDefault();
event.returnValue = false;
// continue validating
}
I have a function which verifies if some fields have been filled out (if length > 0) before submitting. If it fails to submit, I don't want to redirect the client at all. Right now, I have the following:
function onSubmit()
{
if (verify()) //This function will throw alert statements automatically
{
document.getElementById('my_form').submit();
return void(0);
}
else
{
document.getElementById('my_form').action = null;
}
}
However, it doesn't matter if verify() returns true or not, I still redirect the client and wipe her inputted fields. How do I keep the client on the page if a required field is blank? (I don't want to lose her currently filled out form...)
Also, I can't use the slick JQuery libraries, since it's not supported on some older browsers. (I'm trying to capture the most general audience.)
This is how I would try to solve this:
document.getElementById('my_form').onsubmit = function( e ){
var event = e || window.event;
// function payload goes here.
event.returnValue = false;
if ( event.preventDefault ){ event.preventDefault(); }
return false;
}
Can be used with event delegation too.
return false to the form!
<form onsubmit="return onSubmit()">
function onSubmit()
{
if (verify()) //This function will throw alert statements automatically
{
return true;
}
else
{
return false;
}
}
to stop the form from submitting, return false from your onSubmit