Prevent Default for Ajax created form

Question

I am getting the form on click from a file called test.php which contains the following:

<form method="post" class="adminTM">
    <input type="hidden" name="execID" value="<?=$_POST['exec']?>" />
    <input type="hidden" name="fromTM" value="<?=$_POST['TM']?>" />
    <input type="text" name="toTM" value="<?=$_POST['TM']?>" />
    <input type="hidden" name="symbol" value="<?=$_POST['symbol']?>" />
    <button class="submitTM">SUBMIT</button>
</form>

The javascript looks like so:

$(function(){

    $('.adminTMClick').live('click', function(e){
        $(this).data('TM', this.innerHTML);
        $.post('test.php', $(this).data(), function(data){
            $(data).dialog({
                modal: true,
                beforeClose: function(){
                    $(this).remove();
                }
            });
            console.log($('.adminTM'));
            console.log($('.submitTM'));
        });
    });

    $('.submitTM').live('click', function(e){ 
        //originally had .adminTM with submit which failed
        e.preventdefault();
        alert('i am here');
        return false;
    });

});

How do i make it so that the form DOES NOT do the default submit action when the submit button is clicked?

Here is a fiddle that demonstrates basically what I am doing (i had to change it a bit because of the way jsfiddle works): http://jsfiddle.net/maniator/tQVnV/show/

Answer 1

You should use the submit() event on the form instead of the click() on the submit, since pressing enter will still submit the form (bypassing the submit button).

This should properly prevent the form from doing the default submit:

$('.adminTM').live('submit', function(e) {
    // execute custom code
    console.log("submit event fired");

    // prevent default submit
    return false;
});

jsFiddle: http://jsfiddle.net/bjorn/tQVnV/11/