How to programmatically fill out Microsoft Office Forms form?

Question

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?

Answer 1

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