无法使用“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>