CODEWITHSUNDEEP
jqueryserializationw3cform-submit
aarona
aarona

Reputation: 37324

jQuery serializeArray doesn't include the submit button that was clicked

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>

Upvotes: 68

Views: 46822

Answers (7)

Huupke
Huupke

Reputation: 1155

I found a more clean way of doing this which combines some of the answers previously given.

$("form").on("submit", async function (this, event: JQuery.SubmitEvent) {
    var submitter;
    var form: HTMLFormElement;
    if (this instanceof HTMLFormElement) {
        form = this as HTMLFormElement;
    } else {
        return;
    }

    // Create a new FormData object from the form
    const formData = new FormData(form);

    // Prevent default submission which is broken
    event.preventDefault();

    // Add the button that was clicked
    if (event.originalEvent) {
        submitter = (event.originalEvent as SubmitEvent).submitter as HTMLInputElement;
    }

    // Instead of adding all the data as key-value pairs, we can add the submitter using the FormData object
    if (submitter) {
        formData.append(submitter.name, submitter.value);
    }

    // Now we have the data we can perform a POST instead of a GET
    const response = await fetch(url, {
      method: "POST",
      body: formData,
    });
    const text = await response.text();
  });

Upvotes: 0

Adambean
Adambean

Reputation: 1161

A bit late, but if you don't want to bind an event to each button on your form, you can include this:

$form.on('submit', function (e) {

    let formData = $(this).serializeArray();

    if (
        e.originalEvent
        && undefined !== e.originalEvent.submitter
        && undefined !== e.originalEvent.submitter.name
        && typeof e.originalEvent.submitter.name == "string"
        && e.originalEvent.submitter.name.length >= 1
        && undefined !== e.originalEvent.submitter.value
    ) {
        formData.push({
            name: e.originalEvent.submitter.name,
            value: e.originalEvent.submitter.value,
        });
    }

    // ...

});

Any submit button on your form that has a string name at least 1 character long and a defined value will be included in the formData array of objects.

Upvotes: 1

commonpike
commonpike

Reputation: 11185

Here's a fairly neat way to solve this:

<form>
    <input type="hidden" name="stuff" value="">
    <button type="submit" onclick="this.form.stuff.value=this.value" value="reset">reset</button>
    <button type="submit" onclick="this.form.stuff.value=this.value" value="delete">delete</button>
</form>

Upvotes: 13

Nick Craver
Nick Craver

Reputation: 630599

Is [there] another method that DOESN'T exclude the activated button in a serialization?

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 altogether, they're not connected. These methods are 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
});

Upvotes: 78

kjdion84
kjdion84

Reputation: 10064

    var form = button.closest('form');
    var serialize = form.serialize();

    if (button.attr('name') !== undefined) {
        serialize += '&'+button.attr('name')+'=';
    }

Upvotes: 1

Robert Waddell
Robert Waddell

Reputation: 854

This solution is 'universal' as in it will handle all your input submits, passing each as a form variable on submission.

$(document).ready(function(){
    $('input:submit').each(function(){
        $(this).click(function(){
            var formData = $(this).closest('form').serializeArray();
            formData.push({ name: $(this).attr('name'), value: $(this).val() });
        });
    });
});

Upvotes: 3

digitalPBK
digitalPBK

Reputation: 2877

I use the following snippet, basically adds a hidden element with same name

 var form = $("form");
 $(":submit",form).click(function(){
            if($(this).attr('name')) {
                $(form).append(
                    $("<input type='hidden'>").attr( { 
                        name: $(this).attr('name'), 
                        value: $(this).attr('value') })
                );
            }
        });

 $(form).submit(function(){
     console.log($(this).serializeArray());
 });

Upvotes: 8

Related Questions