Отладка двух кнопок для одной формы - PullRequest
Новая
       41

Отладка двух кнопок для одной формы

0 голосов
/ 28 апреля 2020

Я смотрел на этот вопрос и на этот вопрос, а также , но решение с использованием тега <button> мне не помогло.

Я думаю, это потому, что я использую FormData, но я думал, что FormData подхватит все представленные ключи и значения.

Вот простой JSFiddle для того, что я ' Я пытаюсь сделать, но это не работает. Я ожидаю увидеть значения first и second в объекте FormData, но отображается только input-data.

Мне нужно иметь возможность определить, какая кнопка была нажата для отправить форму. 

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>

Ответы [ 2 ]

1 голос
/ 28 апреля 2020

FormData не собирает значения кнопок. Вы можете установить значение для скрытого ввода следующим образом: 

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>

Кросс-браузерное решение 

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>
0 голосов
/ 28 апреля 2020

Я не думаю, что это можно сделать с помощью FormData,

Вы должны кодировать его самостоятельно, что-то вроде этого: 

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