jQuery - Form still submits with return false

Question

For some odd reason the form keeps submitting even though I am returning false. I have tried:

$("#submitEdit").submit(function() {
    return false;
});

$("#submitEdit").submit(function() {
    event.preventDefault();
});

And this is what I currently have:

<script>

$('a').click(function() {
    var parentId = $(this).closest('tr').attr('id');
    var child = $("#" + parentId).children().eq(1);
    var childText = $(child).text();
    $(child).html('<form action="<?php echo URL; ?>user/changeSettings/' + parentId + '" method="POST" id="submitEdit"><input type="text" name="' + parentId + '" value="' + childText + '" /></form>');
    console.log(childText);
});

$("#submitEdit").on("submit", function() {
    var url = $(this).attr('action');
    var data = $(this).serialize();
    alert(data);
    $.post(url, data, function(returned) {
        $(parentId + "Field").html(returned);
        return false;
    });
    return false;
});

</script>

Assuming that the missing double quotes in the excerpt is a typo. Otherwise that is reason enough for your form to go through with the submission. — techfoobar, Feb 09 '14 at 09:16
@IonicăBizău - Not needed. Returning `false` from `onsubmit` is sufficient to stop default form submission. — techfoobar, Feb 09 '14 at 09:19
There was initially a return false in the anchor handler but I got rid of it to see if that was somehow the problem. — Nick Tucci, Feb 09 '14 at 09:19

score 2 · Accepted Answer · answered Feb 09 '14 at 09:23

2

According to your jsfiddle demo your form is added dinamically. So, you have to use delegation:

$(document).on("submit", "#submitEdit", function() {
    var url = $(this).attr('action');
    var data = $(this).serialize();
    alert(data);
    $.post(url, data, function(returned) {
        $(parentId + "Field").html(returned);
        return false;
    });
    return false;
});

JSFIDDLE

answered Feb 09 '14 at 09:23

Ionică Bizău

109,027
88
289
474

Thank you very much! Worked like a charm! :) – Nick Tucci Feb 09 '14 at 09:26

score 1 · Answer 2 · edited May 23 '17 at 12:09

1

you need to put your event parameter in your call back function

$("#submitEdit).submit(function(event) {
    event.preventDefault();
});

and try this:

$(document).on("submit", "#submitEdit", function(event) {
    event.preventDefault();
    var url = $(this).attr('action');
    var data = $(this).serialize();
    alert(data);
    $.post(url, data, function(returned) {
        $(parentId + "Field").html(returned);
        return false;
    });
});

when to use return false and when to use event.preventDefault(). you can take a look for this question: When should I use return false in jquery function?

edited May 23 '17 at 12:09

Community

1
1

answered Feb 09 '14 at 09:20

Chen-Tsu Lin

22,876
16
53
63

`return false` = stopPropagation() & preventDefault() – frogatto Feb 09 '14 at 09:22
This didn't succeed, I appreciate your help though! – Nick Tucci Feb 09 '14 at 09:23

jQuery - Form still submits with return false

2 Answers2

Linked