Calling another jQuery function if confirm is true
Question
I'm trying to call another jQuery function if confirm is true, here's the code:
jQuery("#adminForm_1").submit(function () {
var empty = false;
jQuery(":input", "#adminForm_1").each(function () {
empty = (jQuery(this).val() == "") ? true : empty;
});
if (empty) {
if (confirm('You have not filled out all of the fields, do you wish to continue?')) {
jQuery("#adminForm_1").validationEngine({
ajaxSubmit: true,
ajaxSubmitFile: "/index.php?option=com_database&view=tripdetails&Itemid=12&client=1&task=save",
ajaxSubmitMessage: "Client Trip Details Saved",
inlineValidation: false,
success: false,
failure: function () {}
});
} else {
return false;
};
}
});
^^ the above code doesn't work, but you'll see what I'm trying to do..
Solution
You need to prevent the browser's default action on the form, which is to submit it to the server the traditional way. Either return false
at the end of your submit handler, or put e.preventDefault()
at the beginning:
jQuery("#adminForm_1").submit(function (e) {
e.preventDefault();
...
or:
jQuery("#adminForm_1").submit(function () {
var empty = false;
jQuery(":input", "#adminForm_1").each(function () {
empty = (jQuery(this).val() == "") ? true : empty;
});
if (empty) {
if (confirm('You have not filled out all of the fields, do you wish to continue?')) {
...
});
}
}
return false;
});
See preventDefault
:
Prevents the browser from executing the default action. Use the method isDefaultPrevented to know whether this method was ever called (on that event object).
As as side-note return false
has the same effect as preventDefault
plus it stops the bubbling of the event to parent elements. jQuery's mechanism for achieving that is in the stopPropagation method. In other words, return false
= e.preventDefault + e.stopPropagation
OTHER TIPS
You're not stopping the "normal" submit event from propagating - try adding return false
after the .validationEnginge()
method (alternatively moving it out of the if
block):
jQuery("#adminForm_1").submit(function () {
var empty = false;
jQuery(":input", "#adminForm_1").each(function () {
empty = (jQuery(this).val() == "") ? true : empty;
});
if (empty) {
if (confirm('You have not filled out all of the fields, do you wish to continue?')) {
jQuery("#adminForm_1").validationEngine({
ajaxSubmit: true,
ajaxSubmitFile: "/index.php?option=com_database&view=tripdetails&Itemid=12&client=1&task=save",
ajaxSubmitMessage: "Client Trip Details Saved",
inlineValidation: false,
success: false,
failure: function () {}
});
}
return false;
}
});
Or even
jQuery("#adminForm_1").submit(function () {
var empty = false;
jQuery(":input", "#adminForm_1").each(function () {
empty = (jQuery(this).val() == "") ? true : empty;
});
if (empty) {
if (confirm( ... )) {
jQuery("#adminForm_1").validationEngine({ ... });
}
}
return false;
});