jquery submitting form within if statement

Question

When i click each of the buttons it displays a different form. Depending on which button was pressed, a different form is submitted. This is all displayed in a dialog, but when i click send nothing happens. Can someone people help me figure out whats wrong?

this is the jquery that submits the form

     $( "#contact_form" ).dialog({
          autoOpen: false,
          height: 600,
          width: 500,
          modal: true,
          buttons: {
            "Send": (function() { 
                if(submitbutton == 1){            
                    $("#schedule_info").submit(function () {
                     sendContactForm();
                     $( this ).dialog( "close" );})
                }

                else if(submitbutton == 2){           
                    $("#contact_info").submit(function () {
                     sendContactForm();
                     $( this ).dialog( "close" );})
                    }

                else if(submitbutton == 0){ 
                    $("#error").css("display", "");
                }

            }),

This is the jquery that changes the active form:

        var submitbutton = 0;
        $(document).ready(function () {
             $( "#schedule_trigger" )
            .button()
            .click(function() {
                 $("#schedule_info").css("display", "");
                 $("#contact_info").css("display", "none");
                 $("#error").css("display", "none");
                 $("#schedule_trigger").blur();

               submitbutton = 1;

              });
            $( "#contact_trigger" )
            .button()
            .click(function() {
                 $("#schedule_info").css("display", "none");
                 $("#contact_info").css("display", "");
                 $("#error").css("display", "none");
                 $("#contact_trigger").blur();
               submitbutton = 2;

              });
            });

This code worked perfecetly fine before i added a second form to my dialog

     "Send": (function() { $("#contact_info").submit(function () {
         sendContactForm();
          return false;
          }); 
          $( this ).dialog( "close" );
        }),

Answer 1

Calling .submit() on a jQuery object does not submit the form. It registers an event handler for the form's "submit" event.

To submit the form, you need to call .submit() on the actual form element, like this:

$("#schedule_info")[0].submit()

---

UPDATE:

If you do not want to leave the current page, you cannot submit the form as shown above. It must be submitted via ajax.

There is no way, however, that your old code worked. It would have closed the dialog, but it would not have submitted the form. It would have also registered an event listener that would have executed had the form been submitted by some other means. That would never happen, though, since there is no submit button for the form. And if the event listener had been executed, it would have caused an error because the sendContactForm() method does not exist.

If you now want to submit the form via ajax, you can do something like this:

"Send": (function() { 
    if (submitbutton == 1) {            
        var $form = $('#schedule_info');
        $.ajax($form.attr('action'), {
            type: $form.attr('method'), // You could just hard-code this to 'post'.
            data: $form.serialize(),
            dataType: 'html', // This causes the "response" parameter to the success
                              // callback to get left as a string. Change to 'json'
                              // if you want the response automatically parsed to an
                              // object.
            success: function(response) {
                alert(response); // Handler the response here.
            }
        });
        $(this).dialog("close");
     } else if (...