Tidak boleh menetapkan nilai dalam borang web menggunakan "value='foo'", tetapi memasukkan nilai secara manual adalah OK?

Question

Saya cuba menggunakan kaedah yang sama untuk menetapkan nilai beberapa medan dalam borang web

document.getElementsByName('form[493202]')[0].value="Foo"

Jika saya melakukan ini dalam konsol penyemak imbas, medan akan dikemas kini, tetapi jika saya kemudian secara manual mengklik medan itu, ia akan kembali kepada nilai lama. Nilai lama telah saya masukkan secara manual.

Ini adalah perkara yang pelik - jika saya memasukkan nilai secara manual, semuanya berfungsi seperti yang diharapkan, termasuk menyerahkan borang, tetapi jika saya memasukkan nilai menggunakan JS dan kemudian menyerahkan borang, saya mendapat aduan bahawa medan itu kosong (sejenis jika Terdapat "kompromi" antara hasil ini jika saya memasukkan nilai secara manual dahulu dan kemudian menukarnya menggunakan JS Jika saya kemudian klik "Serah" nilai kembali kepada nilai yang saya masukkan secara manual), walaupun secara visual tidak kosong - tetapi apabila saya mengklik "Serah", medan dikosongkan (nilai yang dimasukkan secara manual kekal selepas mengklik "Serah").

Apa yang sedang berlaku? Bagaimanakah saya boleh memasukkan nilai yang "diterima" oleh borang ini menggunakan JS?

Beberapa HTML dalam bentuk, "Tajuk", dan medan khusus ini:

<form data-v-9454ea52="" id="form-gameflow-105529" data-form-id="form-gameflow-105529" class="content__item content__item--form invalid" autocomplete="">
<div data-v-9454ea52="" class="content__item-form-element col-12 content__item-form-element--text">
  <div class="content__item-form-type content__item-form-type--text">
    <!---->
    <div class="content__item-form-group content__item-form-group--text form-group form-group--has-value form-group--valid">
      <label class="content__item-form-label content__item-form-label--text">Name</label>
      <input class="content__item-form-text form-control" type="text" name="form[493202]" placeholder autocomplete="off" data-ddg-inputtype="unknown">
    </div>
  </div>

Answer 1

Masalahnya ialah apabila anda menukar nilai menggunakan JavaScript, perpustakaan yang digunakan untuk mengesahkan bahawa borang itu kosong tidak dikemas kini.

Anda mungkin perlu mencetuskan acara input 事件（也许还有 change) untuk memberitahu perpustakaan pengesahan ini bahawa anda telah mengisi borang.

function myFunction() {
  var field = document.getElementsByName('form[493202]')[0];
  field.value = "Foo"

  // Trigger the oninput event
  var inputEvent = new Event('input');
  field.dispatchEvent(inputEvent);

  // Trigger the onchange event
  var changeEvent = new Event('change');
  field.dispatchEvent(changeEvent);
}

<form data-v-9454ea52="" id="form-gameflow-105529" data-form-id="form-gameflow-105529" class="content__item content__item--form invalid" autocomplete="">
  <div data-v-9454ea52="" class="content__item-form-element col-12 content__item-form-element--text">
    <div class="content__item-form-type content__item-form-type--text">
      <!---->
      <div class="content__item-form-group content__item-form-group--text form-group form-group--has-value form-group--valid">
        <label class="content__item-form-label content__item-form-label--text">Name</label>
        <input class="content__item-form-text form-control" type="text" name="form[493202]" placeholder autocomplete="off" data-ddg-inputtype="unknown">
      </div>
    </div>
  </div>
</form>

<button type="button" onClick="myFunction()">click me</button>