Vous ne pouvez pas définir une valeur dans un formulaire Web à l'aide de "value='foo'", mais saisir la valeur manuellement est correct ?

Question

J'ai essayé d'utiliser une méthode similaire pour définir les valeurs de plusieurs champs dans un formulaire Web

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

Si je fais cela dans la console du navigateur, le champ sera mis à jour, mais si je clique ensuite manuellement sur le champ, il reviendra à l'ancienne valeur. Les anciennes valeurs ont été saisies manuellement par moi.

Voici une chose étrange : si je saisis une valeur manuellement, tout fonctionne comme prévu, y compris la soumission du formulaire, mais si je saisis la valeur en utilisant JS puis soumets le formulaire, je reçois une plainte indiquant que le champ est vide (une sorte de s'il y a un "compromis" entre ces résultats si je saisis d'abord la valeur manuellement, puis que je la modifie à l'aide de JS. Si je clique ensuite sur "Soumettre", la valeur revient à la valeur que j'ai saisie manuellement), bien que visuellement, le champ soit. pas vide - mais lorsque je clique sur "Soumettre", le champ est effacé (la valeur saisie manuellement reste après avoir cliqué sur "Soumettre").

Que se passe-t-il ? Comment saisir une valeur que ce formulaire « accepte » en utilisant JS ?

Du HTML sous la forme "Titre", et ce champ spécifique :

<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

Le problème est que lorsque vous modifiez la valeur à l'aide de JavaScript, la bibliothèque utilisée pour valider que le formulaire est vide ne se met pas à jour.

Vous devrez peut-être déclencher l'événement input 事件（也许还有 change) pour faire savoir à ces bibliothèques de validation que vous avez rempli le formulaire.

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>