Search code examples
javascripttampermonkey

Form not sent when auto filling form via javascript using Tampermonkey

I am using the following code to try to autofill my daily hours at the company Ι'm working at.

(function() {
  'use strict';
  //debugger;
  var date = document.querySelector("#filter_day").value
  var alreadyRun = GM_getValue(date, false);
  if (!alreadyRun) {
    GM_setValue(date, true);
    document.querySelector("#fstjid_1").selectedIndex = 5;
    document.querySelector("#time_start_MM_1").setAttribute('value', "00");
    document.querySelector("#time_start_HH_1").setAttribute('value', "10");
    document.querySelector("#time_end_MM_1").setAttribute('value', "00");
    document.querySelector("#time_end_HH_1").setAttribute('value', "19");
    document.getElementById("save_btn").click();
  }
})();

For some reason though, when setting the hourly fields with the script and clicking the save button (whether the script does it manually οr not), the form isn't sent, the page is simply refreshed and values are cleared.

It seems as though there is something different between setting the hourly fields manually and when the script sets it, though I cannot say why.

I tried using setAttribute as well as simply .value=. I tried using double brackets " as well as a single '. Nothing seems to work and analyzing the HTML there's nothing special about these fields as far as I can tell.

The table's HTML:

<table border="0" dir="rtl" width="100%" cellspacing="0" cellpadding="0" style="table-layout:fixed;color:#4e546d ">
  <tbody>
    <tr iminnertable="true">
      <td rowspan="99" style="BORDER-RIGHT: #80a3a8 1pt solid;text-align:center" major="1" dir="ltr" align="center" nowrap=""><input class="input_text_fix" type="text" name="time_start_HH_1" id="time_start_HH_1" value="10" maxlength="2" fieldname="time_start_HH" caption="" style="width:22.0;background-color:#f8f8fb; " onkeypress="return !(window.event &amp;&amp; window.event.keyCode == 13);"
          onkeyup="if(event.keyCode!=9) if(this.value.length>=2) this.nextSibling.nextSibling.focus()" onchange="flag_touched(this);" tabindex="10">:<input type="text" class="input_text_fix" name="time_start_MM_1" id="time_start_MM_1" value="00" maxlength="2"
          fieldname="time_start_MM" caption="" onkeypress="return !(window.event &amp;&amp; window.event.keyCode == 13);" style="width:22.0;background-color:#f8f8fb; " onchange="flag_touched(this);" tabindex="10.5">
      </td>
      <td rowspan="99" style="BORDER-RIGHT: #80a3a8 1pt solid;text-align:center" major="1" dir="ltr" align="center" nowrap=""><input class="input_text_fix" type="text" name="time_end_HH_1" id="time_end_HH_1" value="19" maxlength="2" fieldname="time_end_HH" caption="" style="width:22.0;background-color:#f8f8fb; " onkeypress="return !(window.event &amp;&amp; window.event.keyCode == 13);"
          onkeyup="if(event.keyCode!=9) if(this.value.length>=2) this.nextSibling.nextSibling.focus()" onchange="flag_touched(this);" tabindex="10">:<input type="text" class="input_text_fix" name="time_end_MM_1" id="time_end_MM_1" value="00" maxlength="2"
          fieldname="time_end_MM" caption="" onkeypress="return !(window.event &amp;&amp; window.event.keyCode == 13);" style="width:22.0;background-color:#f8f8fb; " onchange="flag_touched(this);" tabindex="10.5">
      </td>
      <td align="center" rowspan="99" style="BORDER-RIGHT: #80a3a8 1pt solid;text-align:center" major="1" val="9.00">
        <input type="text" dir="rtl" name="work_hours_1" value="9.00" class="tableDyn" fieldname="work_hours" style="direction:rtl;width:44;background-color:#f8f8fb;font-size:11px;;  border:none;" readonly="" tabindex="10"></td>
      <td style="display:none;width:0" rowspan="99" major="1"><input type="hidden" name="units_1" id="units_1" value="" fieldname="units"></td>
    </tr>
  </tbody>
</table>

The save button ΗΤΜL:

<input class="button_free_width" id="save_btn" type="button" onclick="try{dontPopWarn=1;submit();this.disabled=true;if (save_btn_1) save_btn_1.disabled=true;}catch(e){;}try {document.getElementById(&quot;loadingmsg&quot;).style.visibility = &quot;visible&quot;;document.getElementById(&quot;loadingmsg&quot;).display = &quot;block&quot;;} catch(e) {;}"
  value="  שמור  " name="right">
Solution

  • One thing may prevent your code from working.

    On every input there is onchange="flag_touched(this);" which may cause the web page to store the current value in some internal JavaScript state. That means you have to manually dispatch a change event on the inputs in order to mimic a user input.

    Try using a function like this to effectively change the value of the inputs:

    function changeInputValue(element, value) {
  if (element instanceof HTMLInputElement) {
    element.value = value;
  }
  else if (element instanceof HTMLSelectElement) {
    element.selectedIndex = value;
  }

  element.dispatchEvent(new Event('change', { bubbles: true }));
}

    The submit button has some JavaScript on the click event, but it's not of type="submit" so it doesn't behave like a native submit button, then the document.getElementById("save_btn").click(); line should be enough to mimic a user interaction with this button.

    If that doesn't work, you should check for potential "JavaScript registered" event listeners (with addEventListener) on the inputs and the submit button, and add them to the question.