title: Programmatically insert text into input field using Javascript
body: <p>I'm writing a chrome extension to programmatically fill out a form. My initial attempt was to set the <code>value</code> directly, e.g.: <code>document.getElementById('input-field').value = 'test';</code>. Unfortunately, it seems like the form has some code which disables the submit button until the user has pressed a key, and just setting the <code>value</code> attribute doesn't enable the button.</p>
  <p>My other strategy is to use <code>dispatchEvent</code> with an <code>InputEvent</code>, e.g. something like:</p>
  <pre><code>var e = new InputEvent(&quot;insertText&quot;, {
    data: &quot;f&quot;,
    bubbles: true,
    composed: true,
    inputType: &quot;insertText&quot;,
    type: &quot;input&quot;
  });
  var inputField = document.getElementById('input-field');
  inputField.dispatchEvent(e);
  </code></pre>
  <p>However, this doesn't seem to work at all (neither the input value changes nor does the form button get enabled).</p>
  <p>Is there a better way to accomplish this?</p>