CODEWITHSUNDEEP
javascripthtmldrop-down-menu
lazybird
lazybird

Reputation: 45

Dynamically change form input from Firefox/Chrome console

I'm learning javascript right now (using firebug console of browser) and have trouble understanding how to activate changes when I enter a command.

For example, one website has a dropdown box name "mvprodvaronetimeorder" with several options like: IpA-Q-Q, IpQ-Q-Q, Ipw-Q-Q... I can use the command to get to the 3rd value: 

    document.getElementsByName("mvprodvaronetimeorder")[0].value="Ipg-Q-Q";

However, it doesn't activate the same action when I choose the corresponding value from dropdown box (display another dropdown to choose). Then I cant interact with 2nd dropdown box and other things after that.

Same thing happens when I try to fill a text box using command like:

            document.getElementById("luckyme")[0].value="You are lucky";

While it change but the change doesnt reflect when I click the submit button, it require me to copy paste or type of at least click to that textbox to activate changes.

Is there anyone can suggest me how to automated the process from console?

Upvotes: 3

Views: 3951

Answers (1)

Matt Zeunert
Matt Zeunert

Reputation: 16561

Assigning the value in JavaScript updates the selection, but it doesn't notify the code running on that page of the change.

To make the page react to the change you also need to trigger a change event on the dropdown:

var el = document.getElementsByName("mvprodvaronetimeorder")[0];
el.value = "Ipg-Q-Q"
el.dispatchEvent(new Event("change"))

The page then knows the selection has changed and it shows the new dropdown below.

To find out what events an element is listening to you can use getEventListeners:

getEventListeners(document.getElementsByName("mvprodvaronetimeorder")[0])
// Object {change: Array[1]}

Upvotes: 5

Related Questions