Can't set a value in a web form using "value='foo'", but entering the value manually is OK?

Question

I tried using a similar method to set the values ​​of several fields in the web form

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

If I do this in the browser console, the field will be updated, but if I then manually click on the field, it will revert to the old value. The old values ​​were entered manually by me.

This is a weird thing - if I enter a value manually, everything works as expected, including submitting the form, but if I enter the value using JS and then submit the form, I get a complaint that the field is empty (a Kind of a "compromise" between these results if I first enter the values ​​manually and then change the values ​​using JS. If I then click "Submit" the values ​​revert to what I entered manually.), although from Visually, the fields are not empty - but when I click Submit, the fields are cleared (manually entered values ​​remain after clicking Submit).

How is this going? How do I enter a value that this form "accepts" using JS?

Some HTML in the form, "Title", and this specific field:

<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

The problem is that when you change the value using JavaScript, the library used to validate that the form is empty does not update.

You may need to fire the input event (and maybe the change event) to let these validation libraries know that you have filled out the form.

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>