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

Question

我嘗試使用類似的方法來設定網頁表單中幾個欄位的值document.getElementsByName('form[493202]')[0].value="Foo"如果我在瀏覽器控制台中執行此操作，該欄位將被更新，但如果我隨後手動單擊該字段，它將恢復為舊值。舊值是我手動輸入的。這是一件奇怪的事情-如果我手動輸入一個值，一切都會按預期工作，包括提交表單，但如果我使用JS輸入值然後提交

P粉436688931 · Answer

問題在於，當您使用 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);
}