El uso de jquery para evitar que el formulario se envíe no funciona después del primer preventDefault
Frecuentes
Visto 1,201 equipos
0
I use the below script to get some data from a database through the response of check.php and then check the data and if all is good i want to submit a form , else prevent it. #order_number is the field i am checking (input of type text) and #seblod_form is the form. If i dont trigger the second e.preventDefault everything works fine and the form submits ok.When i trigger the second e.preventDefault the form does not submit, it gets a class of busy in the html and even if okToSubmit = true the form does not submit. Any ideas how can i fix this?
<script src="https://code.jquery.com/jquery-2.1.1.min.js">
$(document).ready(function(){
$( document ).on('keydown',function( e ) {
if (e.keyCode == 13){
e.preventDefault(); //prevent form submitting when user presses enter key
return false;
}
});
$( document ).on('keyup','#order_number',function( e ) {
if (e.keyCode != 13){
var value = $('#order_number').val();
var okToSubmit = true;
$.ajax({
type: "POST",
url: 'check.php',
data: {order_number:value},
dataType: 'json',
success: function(data) {
if (data['found'] != 'true' || data['ordernumberused'] == 'true'){
if (data['ordernumberused'] == 'true') {
$('#cck1r_form_order_number').append( $( "<div id='message' style='color:red;'>This order number is already used!!!</div>" ) );
okToSubmit = false;
}
else{
$('#message').remove();
}
$('#order_number').css("border-color", "red");
}
else {
$('#order_number').css("border-color", "green");
okToSubmit = true;
alert(okToSubmit);
}
$('#seblod_form').submit(function(e){
if (!okToSubmit){
e.preventDefault();
return false;
}
else {
return true;
}
});
}//end success
});//end ajax
}
});
});
</script>
This is the updated version of the code:
<script src="https://code.jquery.com/jquery-2.1.1.min.js"> </script> /*hack for invoices - receipts*/
<script>
$(document).ready(function() {
var okToSubmit = true;
$('#seblod_form').submit(function(e) {
if (!okToSubmit) {
e.preventDefault();
return false;
} else {
return true;
}
});
$('input#submit').mousedown(function() {
if(okToSubmit){
$('#seblod_form').removeClass('busy');
}
});
$('input#submit').mouseup(function() {
if(okToSubmit){
$('#seblod_form').submit();
}
});
$(document).on('keydown', function(e) {
if (e.keyCode == 13) {
e.preventDefault(); //prevent form submitting when user presses enter key
return false;
}
});
$(document).on('keyup', '#order_number', function(e) {
if (e.keyCode != 13) {
var value = $('#order_number').val();
$.ajax({
type: "POST",
url: 'http://eshop.wideservices.gr/check.php',
data: {
order_number: value
},
dataType: 'json',
success: function (data) {
if (data['found'] != 'true' || data['ordernumberused'] == 'true') {
if (data['ordernumberused'] == 'true') {
if (!$('div').is('#message')){
$('#cck1r_form_order_number').append($("<div id='message' style='color:red;'>This order number is already used!!!</div>"));
}
okToSubmit = false;
} else {
$('#message').remove();
}
$('#order_number').css("border-color", "red");
} else {
$('#order_number').css("border-color", "green");
okToSubmit = true;
}
} //end success
}); //end ajax
}
});});
</script>
The removeClass seems to do the trick.
1 Respuestas
0
You are trying to attach to the submit
event every single time you type a key. That is obviously a bad idea as each time you connect it will use it's own function-scoped value of okToSubmit
which will will result in true and false calls at the same. Any false
in any instance will cause it to preventdefault()
.
Intenta declarar okToSubmit
at a higher level and hook up the submit
event only once.
p.ej
$(document).ready(function () {
var okToSubmit = true;
$('#seblod_form').submit(function (e) {
if (!okToSubmit) {
e.preventDefault();
return false;
} else {
return true;
}
});
$(document).on('keydown', function (e) {
if (e.keyCode == 13) {
e.preventDefault(); //prevent form submitting when user presses enter key
return false;
}
});
$(document).on('keyup', '#order_number', function (e) {
if (e.keyCode != 13) {
var value = $('#order_number').val();
okToSubmit = true;
$.ajax({
type: "POST",
url: 'check.php',
data: {
order_number: value
},
dataType: 'json',
success: function (data) {
if (data['found'] != 'true' || data['ordernumberused'] == 'true') {
if (data['ordernumberused'] == 'true') {
$('#cck1r_form_order_number').append($("<div id='message' style='color:red;'>This order number is already used!!!</div>"));
okToSubmit = false;
} else {
$('#message').remove();
}
$('#order_number').css("border-color", "red");
} else {
$('#order_number').css("border-color", "green");
okToSubmit = true;
alert(okToSubmit);
}
} //end success
}); //end ajax
}
});
});
The other issue:
You are including your jQuery code inside an external JavaScript file request. In a word ¡NO LO HAGAS!. You should not mix external JS requests and inline script blocks as that will not work on all browsers (and looks really bad) :)
p.ej
<script src="https://code.jquery.com/jquery-2.1.1.min.js"/>
<script type="text/javascript">
...your inline script code here...
</script>
contestado el 28 de mayo de 14 a las 14:05
Thank you for pointing me to the right direction but even with your suggestions i cannot make the form to submit after the preventDefault() trigger. What i have managed to do though after your suggestions, is getting the form to submit if i manualy remove the class="busy", that jquery puts on the form element after preventDefault() is triggered! Maybe this gives a clue of what might be happening? - Darkidas
You could fire preventDefault()
always and fire the submit manually when you are happy with the data. That way the problem goes away. - iCollect.it Ltd.
I added the below code and it seems to work now. I do not know however why your suggestions did not work . It doesn't make any sense that they don't work. $('input#submit').mousedown(function() { if(okToSubmit){ $('#seblod_form').removeClass('busy'); } }); $('input#submit').mouseup(function() { if(okToSubmit){ $('#seblod_form').submit(); } }); - Darkidas
I suggest you update your question, adding that new code (all of it) below the existing code as an update. I am also curious why the suggestions did not work. - iCollect.it Ltd.
I am new to jquery-javascript so i might not be able to handle your suggestions properly - Darkidas
No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas javascript jquery or haz tu propia pregunta.
Have you really combined your jQuery into an external JS inclusion? That is not cross-browser compatible. They should be separate script elements! - iCollect.it Ltd
You are trying to attach to the
submit
event every single time you type a key and make your call Ajax. That is obviously a bad idea. - iCollect.it Ltd