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

Question

The Form still submits in IE even though there is preventdefault and returnvalue = false. Everything is fine in Chrome and firefox.

I have 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);
        }
    });
}

score 2 · Answer 1 · answered Aug 01 '13 at 10:47

2

Start by preventing the form from submitting, do the ajax call for validation asynchronously, and if it validates you submit with the native submit which is 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
    });
}

answered Aug 01 '13 at 10:47

adeneo

312,895
29
395
388

I tried this code and most of it works but there is still a little error. self.submit(); that is inside validate_xxxyyy{} does not POST submit1 variable. That is the What could be the problem? – mend Aug 01 '13 at 12:08
`self.submit()` calls the native `submit` event, and submits the form exactly as it would if it where submitted with a button, so if you're missing something it's probably not filled out, doesn't have a name, or something else is wrong in the HTML, as `self.submit()` only submits the HTML elements just like they would have been submitted by the default `submit`. – adeneo Aug 01 '13 at 12:50
Yeah, but the submit button itself doesn't get submitted. I can't understand what could be wrong with it. The last `self.submit();` that happens outside `validate_xxxyyy{}` posts submit button value nicely. `` – mend Aug 01 '13 at 13:19
That does seem very strange, as they are equal, and the ajax call doesn't change anything? Try changing `self.submit();` to `document.getElementById('form1').submit();` just to see if that changes anything ? – adeneo Aug 01 '13 at 13:28
No luck. Everything else gets posted inside the form but not the submit button itself. I can write a hidden input for the time being but it would be interesting to solve it also. – mend Aug 01 '13 at 13:38
Are you using jquery validate? Seems there's a bug https://github.com/jzaefferer/jquery-validation/issues/309 – Liam Aug 01 '13 at 14:14

Liam · Accepted Answer · 2013-08-01T11:02:15.470

1

Your issue is around deffered 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);
        }
    });

Is defferred. Think of it as threaded. So the submit continues without waiting for the callback to happen. So it doesn't call event.preventDefault(), or more precisly, it does but it's too late, the submit has already returned.

I would change what ever is calling this from a submit button (which I'm guessing it is currently) to a normal button then validate it, then only submit the form if this validation succeeds 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);
        }
    });
}

edited Aug 01 '13 at 11:02

answered Aug 01 '13 at 10:32

Liam

27,717
28
128
190

You did notice the `async: false` ? – adeneo Aug 01 '13 at 10:34
2

Doesn't matter. The success function is deffered anyway. So the submit will always happen. – Liam Aug 01 '13 at 10:36
See my update. You'll need to refactor your code quite a bit. Problem is you can't just resubmit the form as it will hit the same code again. – Liam Aug 01 '13 at 10:43
@mend, added some code. you'll need to change the #button obviously and maybe your markup to not use a submit – Liam Aug 01 '13 at 10:53
I rewrote the code with – mend Aug 01 '13 at 11:00
$('#form1').submit() doesn't do anything? That doesn't make sense. – Liam Aug 01 '13 at 11:03
there must be something else going on in there but I can't tell from what you've already posted. – Liam Aug 01 '13 at 11:04
1

I found the error. – mend Aug 01 '13 at 11:18

Darkagelink · Answer 3 · 2013-08-01T11:08:19.213

-1

Put : event.preventDefault() first like:

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

Or you will need to override form onsubmit event to prevent submitting:

edited Aug 01 '13 at 11:08

answered Aug 01 '13 at 10:36

Darkagelink

647
1
8
16

Completely missing the point. If he did this the form would **never** submit – Liam Aug 01 '13 at 10:37
How can you sumit a form via Ajax w/o stoping/pre ending its default behavior? – Darkagelink Aug 01 '13 at 10:41
He's not. He's sending an async call to the server and **if** this succeeds he then submit's the form – Liam Aug 01 '13 at 10:42
How is my answer different from the one you selected as the right answer? He told you the same I did. (Palm in th face) - good luck – Darkagelink Aug 01 '13 at 11:14
No he didn't. You simply said, preventDefault(). This does not solve the problem. The OP needs to prevent the default **then** submit the form manually only when the validation passes. If he did what you suggested, nothing would work. – Liam Aug 01 '13 at 12:03

Sikander · Answer 4 · 2013-08-01T11:09:46.187

$('#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;
    }
});

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

4 Answers4