無法使用「value='foo'」在網路表單中設定值，但手動輸入值可以嗎？

Question

我嘗試使用類似的方法來設定網頁表單中幾個欄位的值

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

如果我在瀏覽器控制台中執行此操作，該字段將被更新，但如果我隨後手動單擊該字段，它將恢復為舊值。舊值是我手動輸入的。

這是一件奇怪的事情- 如果我手動輸入一個值，一切都會按預期工作，包括提交表單，但如果我使用JS 輸入值然後提交表單，我會收到字段為空的抱怨（一種如果我首先手動輸入值，然後使用JS 更改值，則會出現這些結果之間的“妥協”。如果我然後單擊“提交”，則值將恢復為我手動輸入的值。），儘管從視覺上看，字段不為空- 但是當我單擊“提交”時，字段被清空（單擊“提交”後手動輸入的值仍然保留）。

這是怎麼回事？如何使用 JS 輸入此表單「接受」的值？

表單中的一些HTML、「標題」以及此特定欄位：

<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

問題在於，當您使用 JavaScript 變更值時，用於驗證表單是否為空的程式庫不會更新。

您可能需要觸發 input 事件（也許還有 change 事件），讓這些驗證庫知道您已經填寫了表單。

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>