Submitting a Bound Form With jQuery UI Dialog

Question

I've got similar code elsewhere in our project but I can't seem to get it to work the same in this section. What is supposed to happen is when the form submit button is clicked, the form is bound until I specify to unbind it and it opens a dialog window. When the user clicks yes or no the form should unbind and submit but the submit portion doesn't seem to be working properly.

I'm fairly certain the unbind is working because I can press yes or no and the window will close. I can then press the submit button again and it successfully submits the form. The code for this section is shown below:

$("#injuryStatusForm").bind('submit', function(e) {
   e.preventDefault();
   $("#sendEmailsConfirm").dialog('open');
});
$("#sendEmailsConfirm").dialog({
   autoOpen: false,
   resizable: false,
   width:500,
   modal: true,
   buttons: {
      "Yes, Send Emails": function() {
         $(this).dialog("close");
         $("#injuryStatusForm").append('<input type="hidden" name="emails" value="true" />');
         $("#injuryStatusForm").unbind("submit").submit();
      },
      "No, DON'T Send Emails": function() {
         $(this).dialog("close");
         $("#injuryStatusForm").unbind("submit").submit();
      },
      Cancel: function() {
         $(this).dialog("close");
      }
   }
});

This is the only form on the page so there shouldn't be any conflicts that way. The code from another section is similar in that it shows a form to create an account. When the submit button is clicked a jQuery dialog is presented and the same situation happens. The code for that section is below:

$("#newAccountForm").bind('submit', function(e) {
  e.preventDefault();
  $("#parentConfirmation").dialog('open');
});
$("#parentConfirmation").dialog({
  closeOnEscape: false,
  open: function() { $(".ui-dialog-titlebar-close").hide(); },
  autoOpen: false,
  resizable: false,
  width:600,
  modal: true,
  buttons: {
     "No, I am not a Parent or Legal Guardian": function() {
        //window.location = "/login/";
        $(this).dialog("close");
        window.location = "#flash";
        $('#flash').html('<p class="error">*You must be a Parent or Legal Guardian to create an account.</p>');
     },
     "Yes, I am a Parent or Legal Guardian": function() {
        $(this).dialog("close");
        $('#newAccountForm').unbind('submit').submit();
     }
  }
});

I can't seem to find why the first set of code (injury status code) won't work while the new account code will. Any suggestions?

Answer 1

The problem actually came from the input type submit element in the HTML body. The submit element had a name attribute and was causing issues. After removing the name attribute the form submission after unbinding the form within the dialog worked.

<input type="submit" id="submitStatusComment" name="submit" value="Save" />

To

<input type="submit" value="Save" />

(I also didn't need the ID as it wasn't used anywhere on the page).