Saya mencegat pengiriman formulir sehingga saya dapat merutekannya kembali di aplikasi satu halaman saya (saya tidak menggunakan kerangka kerja, hanya Javascript biasa). Beberapa kode saya memiliki beberapa tombol dengan nama yang sama. Kode berikut berfungsi di Chrome/Desktop, tetapi tidak berfungsi di iOS. Khususnya, dalam kode contoh berikut, menggunakan document.activeElement tidak berfungsi di iOS. Bagaimana saya bisa menentukan tombol mana yang ditekan di iOS sehingga saya hanya memberikan nama/nilai tombol yang benar?

Idealnya, solusinya tidak akan melibatkan modifikasi formulir yang ada (selain pendengar acara 'kirim').

<html>
<body>
  <span id="app">
    <form method="POST" action="/test">
      <input type="hidden" name="id" value="123">
      <input name="email" id="email" class="form-control" type="text">
      <button name="action" value="one">One</button>
      <button name="action" value="two">Two</button>
      <button name="action" value="three">Three</button>
      <button name="action" value="four">Four</button>      
    </form>
  </span>
  <script>
    document.getElementById("app").addEventListener("submit", myfunc);

    function myfunc(e) {
      e.preventDefault()
      let action = e.target.getAttribute("action");
      console.log("action:", action);
      let ae = document.activeElement;
      console.log("ae:", ae);

      // On iOS btnname and btnval are null. They should be the name
      // and value of the button that did the form submittion.
      let btnname = ae.getAttribute('name');
      let btnval = ae.getAttribute('value');
      console.log("btnname:", btnname);
      console.log("btnval:", btnval);

      let elements = e.target.elements;
      for (i=0; i<elements.length; i++) {
        let ele = elements[i];
        if (ele.type == "submit") {
          if (btnval == undefined) {
              console.log("skipping:", ele.value)
              continue;
          }
          if (ele.name == btnname) {
            if (ele.value != btnval || btnval == undefined) {
              console.log("skipping:", ele.value)
              continue;
            }
            console.log("found pressed button: ", btnval)
          }
        }
        console.log("submitting: ", ele.name)
        console.log("submitting: ", ele.value)
      }
    }
  </script>
</body>
0
Mark Fletcher 20 November 2020, 01:43

1 menjawab

Jawaban Terbaik

Solusi yang saya buat melibatkan penambahan event handler click. click handler selalu diaktifkan sebelum event handler submit. Dengan event handler click, saya mencatat nama dan nilai tombol yang diklik. Kemudian, saya bisa menggunakannya di handler submit, mengabaikan semua elemen tipe submit. Berikut adalah contoh kode, yang juga menangani kotak centang dan tombol radio.

<!DOCTYPE html>
<html lang="en-US">
<body>
  <span id="app">
    <form method="POST" action="/test">
      <input type="hidden" name="id" value="123">
      <input name="email" id="email" class="form-control" type="text">
      <button name="action" value="one">One</button>
      <button name="action" value="two">Two</button>
      <button name="action" value="three">Three</button>
      <button name="action" value="four">Four</button>      
      <input type="checkbox" name="check1" value="checkvalue1">
      <input type="checkbox" name="check2" value="checkvalue2" checked>
      <input type="radio" name="radio" value="radio1">
      <input type="radio" name="radio" value="radio2" checked>
      <input type="radio" name="radio" value="radio3">
      <a href="#">click me!</a>
    </form>
  </span>
  <script>
    var submitName;
    var submitValue;
    // click events fire before submit events
    document.getElementById("app").addEventListener("submit", myfunc);
    document.getElementById("app").addEventListener("click", setSubmit);

    function myfunc(e) {
      e.preventDefault()
      let action = e.target.getAttribute("action");
      console.log("action:", action);
      let elements = e.target.elements;
      if (submitName != "") {
        console.log("submitting: ", submitName)
        console.log("submitting: ", submitValue)
      }
      for (i=0; i<elements.length; i++) {
        let ele = elements[i];
        if (ele.type == "submit") {
        } else if (ele.type == "checkbox" || ele.type == "radio") {
          if (ele.checked == false) {
            continue
          }
        }
        console.log("submitting: ", ele.name)
        console.log("submitting: ", ele.value)
      }
    }
    function setSubmit(e)
    {
      console.log("type:", e.target.type);
      if (e.target.type != "submit") {
        return;
      }
      // record the name/value of the button that was pressed
      submitName = e.target.name;
      submitValue = e.target.value;
    }

  </script>
</body>
0
Mark Fletcher 21 November 2020, 21:01