1

I've got a React 3rd-party web-page.

It has an INPUT field and I'd like to programmatically change the text and submit the form.

Looking for a pure Javascript solution. My code will be running in an extension - and injected into this 3rd party page.

Here's a similar React page I came across:

https://www.united.com/en/us/manageres/mytrips

I can programmatically enter the confirmation# (6-letters) but when I press Search - it tells me to enter it.

My code runs as a Greasemonkey script.

(function()
 {

  setTimeout( () =>
  {  
    let element = document.getElementById(".confirmationNumber");
    console.log(element);

    var nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value").set;
    nativeInputValueSetter.call(element, 'ABCDEF'); // valid # is 6-letters

    const event = new Event('input', { bubbles: true });
    event.simulated = true;
    element.dispatchEvent(event);

    console.log("Done");
}, 1000 );

})();
dashman
  • 2,858
  • 3
  • 29
  • 51
  • 1
    I had the same issue a week or two ago. The solution was simple, yet obsure. https://stackoverflow.com/questions/61107351/simulate-change-event-to-enter-text-into-react-textarea-with-vanilla-js-script – WillD Apr 19 '20 at 01:02
  • Is this a controlled component? – Suthan Bala Apr 19 '20 at 01:19
  • @WillD Your code is exactly what I need to do - but it didn't work. Pls see the updated post above. – dashman Apr 19 '20 at 10:27

0 Answers0