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:

<form method=post>

 <input type=hidden name=submitclicked value=>

 <button type=submit name=command value=cancel onclick=submitClick(this);>Cancel Order</button>

 <button type=submit name=command value=proceed onclick=submitClick(this);>Save Order</button>

</form>

...where submitClick looks like this:

function submitClick(button) {

    button.form.submitclicked.value = button.value;

}

...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:

var form = document.getElementById(theForm);

form.onclick = function(e) {

  // Get the event

  e = e || window.event;



  // Did it originate in an input[type=submit]?

  if (e.target.tagName === INPUT &&

      e.target.type === submit) {

    // Yes

    alert(e.target.value);

  }

};

Live Example | Source

Or using DOM2 handlers on any modern browser (not IE8 or earlier, but it would be easy to add attachEvent for those, which does much the same thing addEventListener does [and predates it]):

document.getElementById(theForm).addEventListener(click, function(e) {

  // Did it originate in an input[type=submit]?

  if (e.target.tagName === INPUT &&

      e.target.type === submit) {

    // Yes

    alert(e.target.value);

  }

}, false);

Live Example | Source

Or using a library to make it easier (here it's jQuery, but most of them have this feature, which is called event delegation):

$(#theForm).delegate(input[type=submit], click, function() {

  alert(this.value);

  return false;

});

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.