Using javascript to fill out online forms

Question

I am trying to write some JavaScript to help fill out forms repeatedly (personal use code). JS runs in Chrome debug console. For example

addressSection = document.querySelector("[data-automation-id='addressSection']");
addressSection.querySelector("[data-automation-id='addressSection_addressLine1']").value='1600 Pennsylvania Avenue';
addressSection.querySelector("[data-automation-id='addressSection_city']").value='Washington';
addressSection.querySelector("[data-automation-id='addressSection_countryRegion']").textContent='DC';

It works well, except there's one particular element that I can't handle. It looks like a dropdown

I looked at this solution, but I don't really see a "select" element in the html (below).

<div data-automation-id="sourceSection">
    <div data-automation-id="formField-sourceDropdown" class="css-7t35fz">
        <label for="input-129" required="" class="css-1rncms5">How Did You Hear About Us?<abbr title="required" class="css-1fc83zd">*</abbr></label>
        <div class="css-15rz5ap">
            <div style="width: 100%; max-width: 344px; min-width: 280px;">
                <div class="css-12zup1l">
                    <button aria-haspopup="listbox" type="button" value="fe2473ba8eaa1001fdddfb8cc4d00002" data-automation-id="sourceDropdown" id="input-129" aria-label="How Did You Hear About Us? HBCUConnect required" class="css-6l1l38">HBCUConnect</button>
                    <input type="text" class="css-77hcv" value="fe2473ba8eaa1001fdddfb8cc4d00002">
                    <span class="menu-icon css-gvnnq4"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="wd-icon-caret-down-small wd-icon" focusable="false" role="presentation" viewBox="0 0 24 24"><g fill-rule="evenodd" class="wd-icon-container"><path d="M12.288 15.866c.117.18.31.177.424 0l4.235-6.538c.116-.18.034-.328-.176-.328H8.229c-.214 0-.29.15-.176.328l4.235 6.538z" class="wd-icon-fill"></path></g></svg>
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>

I tried:

document.querySelector("[data-automation-id='sourceDropdown']").value='LinkedIn';

That didn't do anything. Based on Louys suggestion in the comments, I tried

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

afterwards. Didn't seem to do anything. Then I tried

document.querySelector("[data-automation-id='sourceDropdown']").textContent='LinkedIn';

That changed the displayed value that I see, but the server doesn't really capture it. Any thoughts?

Changing the `textContent` does nothing. You have to change the `value` — Konrad, Jan 22 '23 at 20:21
It looks like an autocomplete. I would try to set the value of the input, which most probably is where the selection gets stored. — Louys Patrice Bessette, Jan 22 '23 at 20:22
`document.querySelector("[data-automation-id='formField-sourceDropdown'] input").value = 'StackOverflow';` — Louys Patrice Bessette, Jan 22 '23 at 20:25
And you may need to trigger an event on it after... to view the change on screen. Something like a `change`, `input` or `keyup`... — Louys Patrice Bessette, Jan 22 '23 at 20:33
Thanks. I did try changing the value first - edited my question to reflect that. Based on @LouysPatriceBessette suggest, I tried triggering an event. Doesn't seem to change anything — Dr Phil, Jan 23 '23 at 21:19

Using javascript to fill out online forms

0 Answers0