views:

32

answers:

1

I have a form that has two buttons. One for saving a record and the other for cancelling the save procedure. I am using the rails.js (a common AJAX/jQuery plug-in for those of you not in the know) javascript file that works with jQuery for unobtrusive javascript/ajax calls. When I send the form data over ajax, I want the name and value of the button I clicked to be submitted with the rest of the data so that I can make a decision on what to do based on which button was clicked.

The method in the rails.js file uses .serializeArray() for sending form data to the server. The problem is that this doesn't include the name/value pair of the button I've clicked. jQuery's website states that they do this on purpose (eventhough its my opinion that they should):

"The .serializeArray() method uses the standard W3C rules for successful controls to determine which elements it should include; in particular the element cannot be disabled and must contain a name attribute. No submit button value is serialized since the form was not submitted using a button."

How can they assume that a form WASN'T submitted using a button? This makes no sense and a wrong assumption I believe.

Under the W3C rules the button which was activated for the submission of a form is considered a successful control.

Since the developers of jQuery have decided to do this on purpose, can I assume that there is another method that DOESN'T exclude the activated button in a serialization?

EDIT: Here is quick example of what my form might look like...

<!DOCTYPE html5>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
  $(document).ready(function() {
    $('#form').submit(function(e) {
      // put your breakpoint here to look at e
      var x = 0;
    });
  });
</script>
</head>
<body>
  <form id="form">
    <input name="name" type="text"><br/>
    <input name="commit" type="submit" value="Save"/>
    <input name="commit" type="submit" value="Cancel"/>
  </form>
</body>
+1  A: 

There is not, the behavior is based on the submit event of the <form>, not of a button, e.g. hitting enter or calling .submit() in JavaScript. You're mixing 2 concepts here, a .serialize() or .serializeArray() may or may not have anything to do with a button click - it's just a separate event alltogether, they're not connected. These methods at a higher level than that: you can serialize a form (or a subset of it) at any time for any reason.

You can however add the submit name/value pair like a normal form submitting from that button would, if you're submitting from a button for example:

$("#mySubmit").click(function() {
  var formData = $(this).closest('form').serializeArray();
  formData.push({ name: this.name, value: this.value });
  //now use formData, it includes the submit button
});
Nick Craver
@Nick, thanks for the quick reply. I will have edit the `rails.js` (and possibly submit a patch) to make this work. I'll give this a shot.
DJTripleThreat
@DJTripleThreat - I'm not that familiar with their code, is it possible to replace the event handler externally maybe? If you could post it I'll take a look
Nick Craver
@Nick - check out the file on gh: http://github.com/rails/jquery-ujs/blob/master/src/rails.js. Look at the handler on lines 34 and 76. Is there a way to find out what button was clicked in the `event` object passed by `.submit(function(e){})`?
DJTripleThreat
@DJTripleThreat - You can use `e.target` and pass that to `callRemote` is probably the easiest route, just have it accept an event parameter, use `e.target` inside, you can check `if($(e.target).is(":submit"))...`
Nick Craver
hmm `e.target` is always the `HTMLFormElement` when coming from `.submit`. I don't see anything that determines which button was clicked. Chrome's Developer tools window says that `e` has a variable called `button` but its always undefined.
DJTripleThreat
@DJTripleThreat - sorry for the confusion, you need to also attach the `click` handler to the submit button itself, like this: `$('form[data-remote] :submit').live('submit', function (e) { $(this.form).callRemote(e); return false; });`
Nick Craver
@Nick, ok I realized that what you are showing me already exists in `rails.js` I removed `data-remote` from my buttons. I think I can get it to work if I add that attribute to my buttons.
DJTripleThreat