Formdata() Object Does Not Add Submit-type Inputs From Form, While On Firefox

Today I came across an interesting bug, which took a good chunk of time to get to the bottom of. The setup A form on a page. On submit, the data gets captured and new FormData() ob

Solution 1:

FireFox seems to be correct, according to the WHATWG specification.

The XMLHttpRequest specification of the FormData constructor says:

2. If form is given, set fd's entries to the result of constructing the form data set for form.

Then in the description of constructing the form data set, it says:

The algorithm to construct the form data set for a form form optionally in the context of a submitter submitter is as follows. If not specified otherwise, submitter is null.

A button in the form is only included in the form data set if it's the submitter. But when this algorithm is executed from the FormData constructor, no submitter is specified, so no buttons should be included in the form data set.

Solution 2:

Facing a similar thing in Chrome 58.

In my issue, there are multiple submit buttons, and I need to know which one was selected, or at least if a specific one was selected.

My horrible hack is to explicitly listen for that button being selected, create a hidden input and insert it before the submit button.

Updated: Improved hack

Listen for clicks of submit buttons and send through the button as the submitter to the on('submit'), and append to the FormData object before using it in the ajax call.

Modify to taste for input[type="submit"], and perhaps extra error checking on the content of submitter.

$('#defaultModalObject-1').on('click', 'button[type="submit"]', function(event) {
    /* horrible hack to detect wizard_goto_step submissions via ajax */
    event.preventDefault();
    $(event.target.form).trigger('submit', event.target);
});

$('#defaultModalObject-1').on('submit', 'form', function(event, submitter){
    ...
    var formdata = newFormData(form[0]);

    if (submitter != undefined) {
        formdata.append(submitter.name, submitter.value);
    }
    ...
});

---

Original Hack

$('#ajax_form_modal_result').on('click', 'button[type="submit"][name="wizard_goto_step"]', function(event) {
    /* horrible hack to detect wizard_goto_step submissions via ajax */event.preventDefault();
    var input = $('input[type="hidden"]').attr('name', 'wizard_goto_step').val(event.target.value);
    $(event.target).before(input);
    $(event.target.form).trigger('submit');
});

Unfortunately, the originator information is not available on my delegated form handler $('#defaultModalObject-1').on('submit', 'form', function(event) { ... });

Solution 3:

We have same problem on linux clients and use below code to add all button elements into our formdata.

First problem is error on getting form data in some coditions

if($this.is('form'))
{
  var fd = new FormData($this.get(0));
}
else
{
  var fd = new FormData();
}

Second problem is like question to add button in ajax form. sometimes we have more than button in one form and want to detect which one is pressed.

$this.find('button').each(function()
{
  fd.append(this.getAttribute('name'), this.value);
});

If someone need to use input type submit can add like above code, we use button in this conditions:)