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>

Answer 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>

Answer 2

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>