Question

I have a form that has been generated after the document was loaded. and I am trying to stop submission with a return false; but it does not stop the form from reloading the document. here is my code:

$('#name-update.updateAcct').live('submit', function(){
    var action = $(this).attr('data-action');
    console.log(action);
    switch(action){
        case "name":
            var firstName = $(this).children('input#contct_firstName').val();
            var lastName = $(this).children('input#contct_lastName').val();
            console.log(firstName+" "+lastname);
            break;
    }
    return false;
});

I have no idea why this statement isn’t stopping the form.

Answer 1

Here:

console.log(firstName+" "+lastname);

lastname doesn’t exist (it should be lastName) => a javascript error is thrown => the .live function never has time to return false => the form submits normally.

As far as fetching those names are concerned I see that you are using id selectors and because ids in HTML should be unique you could simplify your life like this:

var firstName = $('#contct_firstName').val();
var lastName = $('#contct_lastName').val();

or:

var firstName = $('input#contct_firstName', this).val();
var lastName = $('input#contct_lastName', this).val();

but honestly, the shorter a code is, the smaller the probability of making errors are.