Html forms with multiple submit buttons

by Administrator 9. Mai 2011 09:59

I recently stepped into some problems with forms that have multiple submit buttons. Another nuisance when it comes to html is, that there never was a spec indicating, how browsers should handle multiple submit buttons, when the user not explicitly clicked one but instead just hits the return key in a form control. All browsers I've seen so far just take the first button in the markup in such cases, which does not really make sense.

To get around this, you can use a jquery script like the one below, that intercepts such submits and explicitly triggers a button with a specific css class set:

$("input")
  .keypress(function (e) {
      if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
          $(".DefaultActionButton").click();
          return false;
      }
      else {
          return true;
      }
  });

This worked fine, until we wanted to wire up a model dialog to such a submit button. Standard javascript dialogs (window.confirm) just work fine, however when dealing with jQueryUI style dialogs, you get into the problem of losing the submit context when the dialog is confirmed. Somehow it did not work to just trigger the "click" event again, after the dialog confirmed the action. Also it was not possible, to set the value of the button (submit buttons submit their value when clicked) explicitly.

What worked in the end was, to create a hidden field with the name of the submit button and it's value.

var newHidden = $('<input type="hidden" name="' + submitButtonName + '" value="' + submitButtonName + '"/>');
$('form').append(newHidden);

$(this).dialog("close");
$("form").submit();

Tags:

Html

About the author

for comments and suggestions contact:

 

Month List