Prevent double submit prevents button value from being submitted

[MarkPaxton]

assets-frontend/assets/javascripts/modules/preventDoubleSubmit.js

Line 4 in 3610585

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

The js event handler attached at preventDoubleSubmit.js prevents the button data from being submitted in the request.

In a form where the submit button is assigned a value

<input id='tea-submit'    type='submit' name='submit'    value = 'Tea'>

With JS disabled the form is submitted with "submit=Tea" as part of the form data.
With JS enabled the form is submitted without this value.

With js enabled execute:

$('form').off("submit")

Then click the button. The button data is then submitted within the form data.

[feedmypixel]

@MarkPaxton what is your use case for needing the the value of a type="submit" to be read in your controller?
IMO having a name on the submit is a bit of a smell

[MarkPaxton]

I have a form, which I want to add (or remove) lines. In order to do this the form will be submitted to the server and re-rendered with an extra line (or line removed). This I am proposing to do with a submit button indicating to the server which operation on the form is required (submit data, add line, remove line x). Therefore there will be several buttons on the form initiating the submit and it would be necessary to identify which was clicked, using name and value. If there is no name on the button, the value is can't be submitted as it has no identifier.

[feedmypixel]

I suspect the problem you are seeing is because name='submit' is being used. See Additional Notes: here https://api.jquery.com/submit/

[feedmypixel]

@MarkPaxton In jQuery this is by design. In the serializeArray function (used when a form is submitted) the elements of type submit|button|image|reset|file are not included when the form elements are filtered:

• https://github.com/jquery/jquery/blob/1.11.2/src/serialize.js#L12
• https://github.com/jquery/jquery/blob/1.11.2/src/serialize.js#L92

[MarkPaxton]

That is for if you want to submit your form with jquery, which I don't, but have no choice over. Js form submission is baked in to application.js

[MarkPaxton]

It's probably going to be easier to work around it to be honest. I wouldn't have enabled this as a default behaviour but now it's there and built into all existing services I don't think it would be a good idea to turn it off again. There's a case for adding a disable attribute but then most other workarounds will be as easy without that too.

[feedmypixel]

That is for if you want to submit your form with jquery, which I don't, but have no choice over. Js form submission is baked in to application.js

That is a valid point we should be explicitly adding this functionality, not implicitly adding it to all form submit buttons. I do however feel the root issue here is relying on 2 submit buttons and branching in the controller based on the values of these submit buttons. I would revisit this.

[leekowalkowski-hmrc]

Does this mean that forms with multiple buttons will never be supported? We're creating an admin interface for internal staff and think we have also encountered this issue. In our instance the secondary buttons can be links. instead, but not Mark's.

Form submissions should be prevented using conditional event cancellation, then there would be no need to submit the form with JavaScript, and the server will receive consistent requests regardless of whether JavaScript was available.