Debugging two buttons for one form

Question

I've looked at this question and this question as well, but the solution of using the <button> tag has not worked for me.

I think it's because I'm using FormData, but I thought that FormData would pick up on all the submitted keys and values.

Here's a simple JSFiddle for what I'm trying to do, but it's not working. I expect to see the first and second values show up in the FormData object, but only the input-data shows up.

I need to be able to determine which button was pressed to submit the form.

function handleSubmit(event) {
    event.preventDefault(); // don't have the browser refresh on submit
    const formData = new FormData(event.target);
    for (var pair of formData.entries()) {
        console.log(pair[0]+ ' ==> ' + pair[1]);
    }
}

const form = document.getElementById('form');

form.addEventListener('submit', handleSubmit);

  <form id="form">
    <input name="input-data"/>
    <button type="submit" name="action" value="first">Submit</button>
    <button type="submit" name="action" value="second">Another Submit</button>
  </form>

For more information about what's going on and other ways to fix it, see this: https://stackoverflow.com/questions/38277900/formdata-object-does-not-add-submit-type-inputs-from-form-while-on-firefox — Pro Q, Apr 28 '20 at 06:55
And what about if the form is directly submited by keys `Crtl` + `Enter` ? — Mister Jojo, Apr 28 '20 at 17:08

ibrahimyilmaz · Accepted Answer · 2020-04-28T06:16:35.763

1

FormData not collect value of buttons. You can set value for a hidden input like this:

function handleSubmit(event) {
    event.preventDefault(); // don't have the browser refresh on submit

    document.getElementById('action').value = event.submitter.value;

    const formData = new FormData(event.target);
    for (var pair of formData.entries()) {
        console.log(pair[0]+ ' ==> ' + pair[1]);
    }
}

const form = document.getElementById('form');

form.addEventListener('submit', handleSubmit);

<form id="form">
  <input name="input-data"/>
  <input type="hidden" name="action" id="action" value=""/>
  <button type="submit" name="action" value="first">Submit</button>
  <button type="submit" name="action" value="second">Another Submit</button>
</form>

Cross Browser Solution

function handleSubmit(event) {
  const formData = new FormData();
  formData.append("input-data", document.getElementById("input-data").value)
  formData.append(event.name, event.value);

  for (var entry of formData) {
      console.log(entry[0] + ' => ' + entry[1]);
  }
}

<form id="form">
  <input id="input-data"/>
  <button type="button" name="action" value="first" onclick="handleSubmit(this)">Submit</button>
  <button type="button" name="action2" value="second" onclick="handleSubmit(this)">Another Submit</button>
</form>

edited Apr 28 '20 at 06:16

answered Apr 28 '20 at 05:24

ibrahimyilmaz

2,317
1
24
28

1

event.submitter is Chrome and Android only => https://caniuse.com/#search=submitter – Mister Jojo Apr 28 '20 at 05:29
@Pro Q, this solution works only browsers above. You can collect your values manually for cross browser solution. – ibrahimyilmaz Apr 28 '20 at 05:57
1

I added a snippet for it – ibrahimyilmaz Apr 28 '20 at 06:18
@ProQ none of these solutions will work if the form is submitted programmatically – Mister Jojo Apr 28 '20 at 13:22
1

@MisterJojo How can we know which button clicked while submitting programmatically? But if you want to know, this will work: `handleSubmit({ name: "input-data", value: "programmatically" })` – ibrahimyilmaz Apr 28 '20 at 13:28
no i mean https://developer.mozilla.org/fr/docs/Web/API/HTMLFormElement/submit – Mister Jojo Apr 28 '20 at 14:29
We can also submit a form with keys `Crtl` + `Enter` and both of your solutions won't work – Mister Jojo Apr 28 '20 at 17:07

Mister Jojo · Answer 2 · 2020-04-28T05:23:55.023

0

I don't think it can be done using the FormData,

you have to code it yourself, something like that:

const MyForm = document.getElementById('my-form')

var lastClick = null

MyForm.onclick=evt=>
  {
  lastClick = evt.target.matches('button[type=submit]') 
               ? evt.target.name 
               : null
  }

MyForm.onsubmit=evt=>
  {
  evt.preventDefault()
  console.clear()
  console.log ( 'submit by', lastClick) 
  let formData = new FormData(MyForm);
  for (let pair of formData.entries())
    {
    console.log(pair[0],' ==> ',pair[1])
    }
}

<form id="my-form">
    <input name="input-data"/>
    <button type="submit" name="first">Submit</button>
    <button type="submit" name="second">Another Submit</button>
  </form>

edited Apr 28 '20 at 05:23

answered Apr 28 '20 at 05:17

Mister Jojo

20,093
6
21
40

How can I be certain that no clicks will occur between the submission of the form and the processing of the form? In other words, what happens if a click that's not on the form occurs right after the `console.clear()` line? Will it log `submit by [null]`? – Pro Q Apr 28 '20 at 06:47
1

@ProQ The second solution of ibrahimyilmaz (which he added after mine) is 100% equivalent – Mister Jojo Apr 28 '20 at 13:13

Debugging two buttons for one form

2 Answers2