Event.preventDefault? event.preventDefault (): event.returnValue = false; not working in IE8

Question

The form is still submitted in IE, although there is preventdefault and returnvalue = false . Everything is fine in Chrome and firefox.

I also tried event.stopPropagation() .

 $('#form1').submit(function(event) { var xxx = $('#xxx').val(); var yyy = $('#yyy').val(); var zzz = $('#zzz').val(); var uuu = $('#uuu').val(); if (zzz != '000000' && zzz != '') { validate_xxxyyy(uuu, function(response) { if (response === false) { if (xxx == '') { alert("XXX undefined!"); event.preventDefault ? event.preventDefault() : event.returnValue = false; } else if (yyy == '') { alert("yyy Undefined!"); event.preventDefault ? event.preventDefault() : event.returnValue = false; } } else { return true; } }); } else { return true; } }); function validate_xxxyyy(uuu, callback) { var data_string = 'uuu=' + uuu; $.ajax({ url: 'ajax.php', type:'POST', data: data_string, dataType: 'json', cache: false, async: false, success: function(response){ callback(response); } }); } 

Answer 1

Your problem is related to defective functions .

your success function in:

 $.ajax({ url: 'ajax.php', type:'POST', data: data_string, dataType: 'json', cache: false, async: false, success: function(response){ callback(response); } }); 

Excluded. Think of it as a thread. So submit continues without waiting for the callback to complete. That way, it does not call event.preventDefault() or, more accurately, it does it, but too late, submit is already returned.

I would change what it would ever call from the submit button (which I assume is currently) to a regular button, then confirm it, and then submit the form if this check was successful using $('form').submit(); .

 $('#button').click(function(event) { var xxx = $('#xxx').val(); var yyy = $('#yyy').val(); var zzz = $('#zzz').val(); var uuu = $('#uuu').val(); if (zzz != '000000' && zzz != '') { validate_xxxyyy(uuu, function(response) { if (response === false) { if (xxx == '') { alert("XXX undefined!"); } else if (yyy == '') { alert("yyy Undefined!"); } } else { $('#form1').submit(); } }); } else { $('#form1').submit(); } }); function validate_xxxyyy(uuu, callback) { var data_string = 'uuu=' + uuu; $.ajax({ url: 'ajax.php', type:'POST', data: data_string, dataType: 'json', cache: false, async: false, success: function(response){ callback(response); } }); } 

Answer 2

Start by preventing the form from being submitted, make an ajax call to check asynchronously, and if it checks, you send using native submit, which was not captured by the event handler:

 $('#form1').on('submit', function(event) { event.preventDefault(); var self = this, xxx = $('#xxx').val(), yyy = $('#yyy').val(), zzz = $('#zzz').val(), uuu = $('#uuu').val(); if (zzz != '000000' && zzz != '') { validate_xxxyyy(uuu).done(function(response) { if (!response) { if (xxx == '') { alert("XXX undefined!"); } else if (yyy == '') { alert("yyy Undefined!"); } } else { self.submit(); } }); } else { self.submit(); } }); function validate_xxxyyy(uuu) { var data_string = 'uuu=' + uuu; return $.ajax({ url: 'ajax.php', type:'POST', data: data_string, dataType: 'json', cache: false }); } 

Answer 3

Put: event.preventDefault () first as:

 $('#form1').submit(function(event) { event.preventDefault(); var xxx = $('#xxx').val(); var yyy = $('#yyy').val(); ... 

Or you need to override the onsubmit event of the form to prevent submitting:

Answer 4

 $('#form1').submit(function(event) { var xxx = $('#xxx').val(); var yyy = $('#yyy').val(); var zzz = $('#zzz').val(); var uuu = $('#uuu').val(); if (zzz != '000000' && zzz != '') { validate_xxxyyy(uuu, function(response) { if (!response) { if (xxx == '') { alert("XXX undefined!"); event.preventDefault ? event.preventDefault() : event.returnValue = false; } else if (yyy == '') { alert("yyy Undefined!"); event.preventDefault ? event.preventDefault() : event.returnValue = false; } } else { return true; } }); } else { return true; } });