6

My company has a Microsoft Form that I have to fill out around 10 times every month, but the actual form data that I input doesn't change very much. For the fields that don't change I want to be able to programmatically fill it out, likely using javascript. Using the "User Javascript and CSS" chrome extension I have already injected javascript to put a button on the page I can click to fill it out, but when I click "Submit" the form doesn't detect that the fields have been populated.

Here is an example form: https://forms.office.com/Pages/ResponsePage.aspx?id=A2isORETDk26ciZZHMzhJJh3e-CRp49LqjxXVoNyf99UQVZZTkdHS0ZVTkJHSDg5RE1VNkZDWVJPRS4u

Here is a bit of jquery to fill out the text box

$('#form-container > div > div > div.office-form-content.office-form-page-padding > div > div.office-form.office-form-theme-shadow > div.office-form-body > div:nth-child(2) > div:nth-child(2) > div.office-form-question-content.office-form-theme-focus-border > div.office-form-question-element > div > div > div > input')[0].value = "hello"

Notice that the field becomes blank and receives a validation error when you click "Submit".

How can I populate these fields programmatically in a way that the data is received by the form?

user2320861
  • 1,391
  • 2
  • 11
  • 28
  • I would check if [Autofill](https://chrome.google.com/webstore/detail/autofill/nlmmgnhgdeffjkdckmikfpnddkbbfkkk) works in this case. – Hernán Alarcón Aug 15 '20 at 15:05
  • I was injecting JS with Tampermonkey but it looks like they've made it pretty hard to fake. The browser based auto fillers (extensions) didn't work for me either, they were probably triggering keypress events etc in all the same ways that I was trying to do. Eventually got it right with a desktop macro recorder. Not what I wanted but at least I don't have to fill in the same form everyday promising that I still don't have the 'rona. – Sheldon Neilson Sep 10 '20 at 13:29
  • Thanks Sheldon! I had tried to earlier-suggested utility to no avail too, along with some javascript hacks also, and also have not found a favorable way to do this. – user2320861 Sep 11 '20 at 11:23

1 Answers1

2

You need to check what event listeners have the input you want to fill. You can do this by accessing your browser developer tools (F12).

Go to the "Elements" tab and select the input. You will see a right or below section that has an "Event Listeners" tab. Here you got to disable the option to show ancestors event listeners.

Event listener of a radio button

As you can see on the image, the radio type input has a "change" event.

You only need to dispatch the corresponding event after filling out the input like this:

const input = document.getElementsByClassName("Element selector");
const changeEvent = new Event("change"); //Create the event
input.checked = true; //Change input value
input.dispatchEvent(changeEvent); //Dispatch event

In the case of text input, you need to dispatch an "input" event just like this:

const input = document.getElementsByClassName("Element selector");
const inputEvent = new Event("input"); //Create the event
input.value = "New value"; //Change input value
input.dispatchEvent(inputEvent); //Dispatch event
Anderson Triana
  • 21
  • 3