JQuery: Cannot reenable preventDefault() inside post() method

Question

I've read this thread to reenable preventDefault() on submit method. But that did not work on my case. I tried to use $(this).unbind('submit').submit() to enable it again. I put it inside POST method and before JQuery Colorbox dialog opened. Inside that dialog, there's also a submit button, but the button cannot be clicked too. So I have to reenable preventDefault(), so that the button can be clicked.

$("#Username, #Password").keypress(function(e){
    if (e.which == 13 ) {
        $("form:first").submit(function(e){ 
            e.preventDefault(); //interrupt submit process
            var userdata = {username : $("#Username").val() };
                $.ajax({
                  type: 'POST',
                  url: 'http://localhost/test/test.php',
                  data: userdata,
                  success: function(data){  
                          if(data==0){                                      
                                $(this).unbind('submit').submit(); //enable it again(but it didn't worked!)
                                $.fn.colorbox({width:"50%", inline:true, href:"#reminder_dialog" })} //JQuery Colorbox opened.
                            else { 
                                $(this).submit();                               
                            }
                        },              
                  async:false
            });
        });
    }               
 });    

I also already tried to use $(this).trigger('submit') and $(this).get(0).allowDefault = true , but those also didn't work.

Answer 1

i would put my money on the fact that e represent the keypress event, and later on become the submit event.

I'm really just saying this on top of my head and the night was been long, but try to change the parameter e of the submit to something else (like ev) and call preventDedault on ev as in:

....
$("form:first").submit(function(ev){ 
ev.preventDefault(); //interrupt submit process
....

alternatively you could probably use return false; at the end of the submit function. see: event.preventDefault() vs. return false

Answer 2

So, do you want to protect the form form double submitting? You have to bind the submit event only once.

$("form:first").submit(function(e) {
    e.preventDefault(); //interrupt submit process

    var $this = $(this); // Form jQuery object

    if ($this.data('busy')) return; // Protect this form from double submitting

    $this.data('busy', true); // Set the form as busy (we are sending something now)

    var userdata = {
          username: $("#Username").val()
        };

$.ajax({
    type: 'POST',
    url: 'http://localhost/test/test.php',
    data: userdata,
    success: function(data) {

        $this.data('busy', false); // Form is not busy anymore

        if (data == 0) {
            // Do your stuff. I don't understand what do you need here.
        } else {
                      // Do your stuff. I don't understand what do you need here.
        }
    },
    async:false
});
});

And, if you are using <input> fields, you don't have to write any code about that, they will submit the form when you hit ENTER. But just in case:

$("#Username, #Password").keypress(function(e) {
    if (e.which == 13) {
        $("form:first").submit();
    }
});

UPDATE Well, then you have to store the form submission state.

$("form:first").submit(function(e) {
    e.preventDefault(); //interrupt submit process

    var $this = $(this); // Form jQuery object

    var state = $this.data('state');

    if (state == 'busy') {
        return;
    } else if (state != 'colorbox') {
        // Set the state that we are showing colorbox
        $this.data('state', 'colorbox');

        // Show your colorbox or whatever
        // ...

        return;
    }

    $this.data('state', 'busy');

    // Submit with that AJAX code
    // ...
});

You can set the submission state from anywhere like this:

$("form:first").data('state', 'chilling');

You can submit the form from anywhere like this:

$("form:first").submit();