Как программно заполнить форму Microsoft Office Forms?

Question

В моей компании есть форма Microsoft, которую я должен заполнять примерно 10 раз в месяц, но фактические данные формы, которые я ввожу, не сильно меняются. Для полей, которые не меняются, я хочу иметь возможность программно заполнить их, вероятно, используя javascript. Используя расширение Chrome "Пользовательский Javascript и CSS", я уже внедрил javascript, чтобы разместить кнопку на странице, которую я могу щелкнуть, чтобы заполнить ее, но когда я нажимаю "Отправить", форма не определяет, что поля были заполнены.

Вот пример формы:https://forms.office.com/Pages/ResponsePage.aspx?id=A2isORETDk26ciZZHMzhJJh3e-CRp49LqjxXVoNyf99UQVZZTkdHS0ZVTkJHSDg5RE1VNkZDWVJPRS4u

Вот немного jquery для заполнения текстового поля

$('#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"

Обратите внимание, что поле становится пустым и появляется сообщение об ошибке проверки, когда вы нажимаете "Отправить".

Как я могу программно заполнить эти поля так, чтобы данные были получены формой?

Answer 1

Вам нужно проверить, какие прослушиватели событий имеют ввод, который вы хотите заполнить. Вы можете сделать это, зайдя в инструменты разработчика браузера (F12).

Перейдите на вкладку «Элементы» и выберите вход. Вы увидите правый или нижний раздел с вкладкой «Прослушиватели событий». Здесь вы должны отключить опцию, чтобы показать прослушиватели событий предков.

Прослушиватель событий радиокнопки

Как вы можете видеть на изображении, вход типа радио имеет событие «change».

Вам нужно только отправить соответствующее событие после заполнения ввода следующим образом:

      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

В случае ввода текста вам нужно отправить событие «ввод» следующим образом:

      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