Sie können mit „value='foo'“ keinen Wert in einem Webformular festlegen, aber die manuelle Eingabe des Werts ist in Ordnung?

Question

Ich habe versucht, mit einer ähnlichen Methode die Werte mehrerer Felder in einem Webformular festzulegen

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

Wenn ich das in der Browserkonsole mache, wird das Feld aktualisiert, wenn ich dann aber manuell auf das Feld klicke, wird es auf den alten Wert zurückgesetzt. Die alten Werte wurden von mir manuell eingegeben.

Hier ist eine seltsame Sache: Wenn ich einen Wert manuell eingebe, funktioniert alles wie erwartet, einschließlich des Absendens des Formulars. Wenn ich jedoch den Wert mit JS eingebe und dann das Formular absende, erhalte ich eine Beschwerde, dass das Feld leer ist (so eine Art Wenn ich den Wert zuerst manuell eingebe und ihn dann mit JS ändere, gibt es einen „Kompromiss“ zwischen diesen Ergebnissen. Wenn ich dann auf „Senden“ klicke, wird der Wert auf den Wert zurückgesetzt, den ich manuell eingegeben habe. Sehen Sie, das Feld ist nicht leer - aber wenn ich auf „Senden“ klicke, wird das Feld geleert (der manuell eingegebene Wert bleibt nach dem Klicken auf „Senden“ erhalten).

Was ist los? Wie gebe ich mit JS einen Wert ein, den dieses Formular „akzeptiert“?

Etwas HTML im Formular „Titel“ und dieses spezielle Feld:

<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>