Once submitted, the server will know which submit button was used to submit the form by checking the value for command. Great!

In this case, I am using the onsubmit event handler of the form to preprocess and send the form data via AJAX. Like this: <form method="post" onsubmit="return ajaxSubmit(this);">

I'm using this ajaxSubmit function as a general way to check through any supplied form's elements and send the data via Ajax instead. This works fine for determining the value of text fields, if checkboxes are "checked", which radio is selected in a group, etc. The only thing it seems to get wrong (because I'm not sure how to check this) is which submit button was used to submit the form. i.e There is nothing in myForm["command"] to tell which of the 2 command buttons was actually used.

Instead, is there a way to access the same 'post' data that the server receives with JavaScript before it is sent?

Otherwise, is this just a flaw I need to work around? What's the best way?

Edit:
Since all modern browsers will pass the name/value of the button used to submit the form (along with the other relevant parts like which option is selected from a group, checked checkbox name/values, etc.) can anyone explain why there is no way to access this data directly before it is sent to the server? Is there a reason why we shouldn't be able to?

Perhaps I have misunderstood, but if you are using AJAX to send form data to the server, why use 'post' at all? Also, to identify which submit button was pressed, can't you just supply ID properties and pass them to the AJAX routine?
–
ron tornambeDec 27 '12 at 21:50

The Ajax routine is a general purpose function called 'ajaxSubmit' which takes a JavaScript 'form' object representing an HTML form tag and it's elements. In many cases, I'm using it to replace regular form submits (and page refreshes) with Ajax instead. I like that I can submit Ajax via post and expect the same results server side.
–
MatthewDec 27 '12 at 23:54

1

Note that if you use button instead of input type="submit", older versions of IE will send all the button values, not just the one you clicked.
–
Sergiu DumitriuDec 30 '12 at 19:59

4 Answers
4

Instead, is there a way to access the same 'post' data that the server receives with JavaScript before it is sent?

Not that exact data, no.

The usual way to know which submit button was pressed is (unfortunately) to attach click handlers to the buttons and have them set a variable (or the value of a hidden field), which you can then check in your submit event handler.

Since you're using old-style DOM0 event handler attributes, probably the hidden field fits better with what you're doing:

...but I do recommend looking into using DOM2-style event handlers instead, or at least attaching DOM0 handlers in code blocks, as you can avoid creating global functions, share data without creating global variables, etc.

Just to be clear, you don't have to specify an onclick attribute on every element, the only reason I did that above is because you were using DOM0 handlers.

The better way to handle it is with event bubbling. Since the click event bubbles up to the form from its descendant controls, including the submit buttons, you can hook the event on the form and then look to see if it occurred on a submit button and, if so, what that button's value is.

For instance, here with a DOM0 handler, attached dynamically to the form, which will alert the value of the submit button clicked:

Live Example | Source (I'm using delegate there because I like the clarity; with recent versions of jQuery, you could use the hyper-overloaded on, but it's less clear. If you choose to, note that the order of arguments is different.)

The point here being that it's not complicated, difficult, or particularly cumbersome.

Re your ending question of your edit:

...can anyone explain why there is no way to access this data directly before it is sent to the server?

Probably not, no. It's important to understand that a lot of this stuff just evolved. The submit button's value being sent with the form is an HTML thing, apparently when doing the DOM HTML forms module, it just didn't occur to anyone to say "Hey, we should have a property on the form that only exists during the form submission event that tells you what submitted the form." It probably should have occurred to someone, but apparently, it didn't.

I think you can work this around by DELETING the other button, the one that that was not clicked. After that, you can run jQuery's serialize(), or access the value of the button that is left by any other means.

All reasonable, but if you're going to go as far as attaching click handlers on all your submit buttons, it makes less sense to go through the hoops of the submit capability to manage your submission details.

Just make it so that the click handlers trigger a form submit while passing sufficient contextual information into the mix. Wait, click handlers typically tell you the source of the click already (there's your contextual information), especially if using some jQuery-ish framework.