My intention is to check some conditions before submit is done or stop it and show an alert if the results of that condition are false. I need to ask a function localized in another PHP document using POST.
The next case I'm going to show, the alert is showed correctly when "result != 1", but when I test the opposite case "result == 1", the submit doesnt work:
$('body').on("submit","#idForm",function(event) {
event.preventDefault();
$.post( 'php_file_rute.php', {action:'functionName'})
.done(function(result) {
if (result == 1) {
if(functionNameInSameJSPage()){
return true;
}else{
return false;
}
} else {
alert('error');
return false;
}
});
});
I tried in another way, putting event.preventDefault behind every "Return false" but when "result != 1" it shows the alert but do the submit anyways. It happens in every condition (submit doesnt stop).
$('body').on("submit","#formProyecto",function(event) {
$.post( 'php_file_rute.php', {action:'functionName'})
.done(function(result) {
if (result == 1) {
if(functionNameInSameJSPage()){
return true;
}else{
return false;
event.preventDefault();
}
} else {
alert("error");
event.preventDefault();
return false;
}
});
});
As you can see, my goal is to stop the submit if "result != 1" and show an alert or do the submit if all conditions are ok.
Any idea?
Thanks.
The issue you have is that you cannot return anything from an asynchronous function - which your AJAX request is.
To solve this you need to use preventDefault() to stop the form submit event through jQuery, then raise another native submit event if the AJAX request returns a valid result. This second submit event will not be handled by jQuery and will submit the form as you require. Try this:
$(document).on("submit", "#idForm", function(e) {
e.preventDefault();
var form = this;
$.post('php_file_rute.php', {
action: 'functionName'
}).done(function(result) {
if (result === 1) {
if (functionNameInSameJSPage()) {
form.submit();
}
} else {
alert('error');
}
});
});
This is assuming that functionNameInSameJSPage() is not an async function. If it is then you'll need to use the callback pattern there too.
This is a bit of a tricky one but you can kind of get it to work by doing:
$('body').on("submit","#idForm",function(event) {
event.preventDefault();
$.post( 'php_file_rute.php', {action:'functionName'})
.done(function(result) {
if (result == 1) {
if(functionNameInSameJSPage()){
$('#idForm').trigger("submit.force"); //Trigger submit again but under a different name
}
} else {
alert('error');
}
});
});
$('body').on("submit.force","#idForm", function () { return true; }); //Passthrough
The idea is to retrigger the event but ensure you don't call the same handler.
There's a proof of concept at https://jsfiddle.net/2kbmcpa4/ (there's no actual ajax happening but the promise simulates that, note this example won't work in IE)
Steps to solve the issue :
On actual form submit just block the event and make the rest call.
Based on response again dynamically resubmit by setting the allowSubmit flag.
Because flag is set on second submit, it doesn't prevent the form from submission. Reset the allowSubmit flag.
(function() {
var allowSubmit = false;
$('body').on("submit", "#idForm", function(event) {
var that = this;
if (!allowSubmit) {
event.preventDefault();
$.post('php_file_rute.php', {
action: 'functionName'
}).done(function(result) {
if (result == 1) {
if (functionNameInSameJSPage()) {
allowSubmit = true; // set the flag so next submit will not go though this flow
that.submit(); // dynamically trigger submit
}
} else {
alert('error');
}
});
} else {
allowSubmit = false; // reset the flag
}
});
})();
Related
I am trying to control form submitting after validating user input
the user must select at least one radio otherwise the form wouldn't submit
the first part is working very fine, if the user haven't select any radio input I call
$('form').submit(function () { return false });
else if he selected something I will call
$('form').submit();
but it is not submitting
function validateSelection() {
var temp = false;
$('.lang-radio > input[type=radio]').each(function () {
if ($(this).is(':checked')) {
temp |= $(this).is(':checked')
};
});
if (temp != 1) {
$('form').submit(function () { return false });
$('.high-light').effect("shake");
}
else {
$('form').submit();
}
}
I am calling the function validateSelection from OnClientClick="validateSelection();"
I am using asp.net webforms
When you do
$('form').submit(function () { return false });
you are attaching an event handler to the submit event. Thus, if this line executes first, then every time you do $('form').submit();, the event handler will be triggered and return false and not submit.
If the .Net control is a submit button, you can simply replace the first line with return false (Edit: and change it to OnClientClick="return validateSelection();"), otherwise you can remove it completely.
1) Remove OnClientClick="validateSelection();" from your form
2) Give class="validateForm" to your form
3) put following js code in you are js
$(document).ready(function(){
$('.validateForm').on('submit',function(){
var ckradio = $(this).find('[type=radio]:checked');
if(ckradio.length == 0){
return false;
}else{
return true;
}
});
});
This question has been done to death on SO and I'm really, really sorry! I've already taken the bones of the below idea from a couple of SO questions on the same theme.
All said though, I still can't get it to work as expected.
It works OK if NONE are filled in.
It works OK if the END input is filled in and not the others.
It works OK if the MIDDLE input is filled in.
If you fill in ONLY the FIRST input though, it alerts, but submits anyway?
JSFIDDLE
$(document).ready(function (e) {
// completed count submit handler
$("#submit_counts_button").on('click', function () {
window.incomplete = false;
$('input[type=number]').each(function () {
if ($(this).val().length == 0) {
window.incomplete = true;
alert('Some fields are empty');
return false;
} else {
if (window.incomplete === false) {
$("#submit_counts_button").prop('disabled', true);
$("#submit_counts_button").html('Please Wait ...');
//$("#update_form").submit();
}
}
});
});
});
I'm sure it's something totally embarrassingly obvious but after a 16 hour day, I just can't see it. Any help appreciated ...
You need to pull the 'incompletion' check outside of the .each
$(document).ready(function (e) {
// completed count submit handler
$("#submit_counts_button").on('click', function () {
window.incomplete = false;
$('input[type=number]').each(function () {
if ($(this).val().length == 0) {
window.incomplete = true;
alert('Some fields are empty');
return false;
}
});
if (window.incomplete === false) {
$("#submit_counts_button").prop('disabled', true);
$("#submit_counts_button").html('Please Wait ...');
//$("#update_form").submit();
}
});
});
http://jsfiddle.net/6WpeF/6/
try
if(document.getElementById('id of input').value != ""){}
I have this code:
kreiraj_korisnika.on('submit', function(){
if(error_count != false) {
kreiraj_korisnika.submit();
} else {
return false;
}
});
How can I continue with form submitting when error_count is true (without AJAX submit)?
You have to use preventDefault() method of event variable to avoid the submit. Try sopmething like:
kreiraj_korisnika.on('submit', function(e) {
if (error_count)
{
// avoid the submit...
e.preventDefault();
// show your erros messages
}
});
If error_countvariable is true, the submit will happen.
Is kreiraj_korisnika actually an jQuery object ?
If you just assigned it to a result of getElementById() it won't work.
In that case:
$(kreiraj_korisnika).on('submit', function(e){
var errorCount = 0;
if(errorCount == 0)
{
this.submit();
}
else
{
alert('Invalid form input !');
e.preventDefault();
}
});
Léon
I try to prevent a form submitting, with the following script, but it always does. I have even tried preventDefault() on document load, but it does not work.
$("form").submit(function() {
if ($("input").eq(3).val() == $("input").eq(4).val()) {
$("span").text("Validated...").show();
return true;
}
$("span").text("Passwords do not match!").show().fadeOut(1000);
return false;
});
$("form").submit(function(e) {
if ($("input").eq(3).val() == $("input").eq(4).val()) {
$("span").text("Validated...").show();
}
else{
$("span").text("Passwords do not match!").show().fadeOut(1000);
e.preventDefault();
}
});
You need to use preventDefault() to cancel the action. Note the parameter e that I added to the anonymous function call.
My suggestion, or the way I normally go about this is like this:
$("form").submit(function(e) {
e.preventDefault(); // form never fires unless I want it to
if( condition == true ) {
$(this).submit();
} else {
//Don't submit
}
}
Here is a great explanation of why preventDefault() > return false
In order for this to close I think I have found something, but it's absurd at best. My functions work when they are in a $(document).ready. Why? I would be glad to listen to your advice.
$(document).ready(function(){
$("form").submit(function() {
if ($("input").eq(3).val() == $("input").eq(4).val()) {
$("span").text("Validated...").show();
return true;
}
$("span").text("Passwords do not match!").show().fadeOut(1000);
return false;
});
});
I am trying to unbind or reenable the prevent default so my form will submit on good data.
I have tried multiple examples. Here is my code and some of the examples i tried.
This code works great for what i want to. Just the last thing and resetting the div which i can implement after i get this.
function lengthRestriction(elem, min, max) {
var uInput = elem.value;
if (uInput.length >= min && uInput.length <= max) {
return true;
} else {
var cnt = document.getElementById('field');
cnt.innerHTML = "Please enter between " + min + " and " + max + " characters";
elem.focus();
$('#ShoutTweet').submit(function(e) {
e.preventDefault();
//bind('#ShoutTweet').submit();
//$('#ShoutTweet').trigger('submit');
});
}
}
i have a jsbin set up too http://jsbin.com/ebedab/93
Don't try to set up and cancel a submit handler from within your validation function, do it the other way around: call the validation from within a single submit handler, and only call .preventDefault() if the validation fails:
$(document).ready(function() {
$('#ShoutTweet').submit(function(e) {
if (/* do validations here, and if any of them fail... */) {
e.preventDefault();
}
});
});
If all of your validations pass just don't call e.preventDefault() and the submit event will then happen by default.
Alternatively you can return false from your submit handler to prevent the default:
$('#ShoutTweet').submit(function(e) {
if (!someValidation())
return false;
if (!secondValidation())
return false;
if (someTestVariable != "somevalue")
return false;
// etc.
});
I'm not completely sure what you are asking, but if your goal is to destroy your custom submit handler, then use this:
$("#ShoutTweet").unbind("submit");
This assumes that you have a normal (not Ajax) form.
Just call submit on the form
$('#ShoutTweet').submit();
This works surely and enable form submission after event.preventDefault();
$('#your-login-form-id').on('submit', onSubmitLoader);
function onSubmitLoader(e) {
e.preventDefault();
var self = $(this);
setTimeout(function () {
self.unbind('submit').submit(); // like if wants to enable form after 1s
}, 1000)
}