1

There is this dropdown menu on a website, which looks like:

<form id="birthday-form" action="#" method="get">
  <select class="month">
    <option value="">Month</option>
    <option value="1">January</option>
    <option value="2">February</option>
  </select>
  <select class="day">
    <option value="">Day</option>
    <option value="1">1</option>
    <option value="2">2</option>
  </select>
  <select class="year">
    <option value="">Year</option>
    <option value="2005">2005</option>
    <option value="2004">2004</option>
    <option value="2003">2003</option>
  </select>
</form>

Now I need to simulate a selection to this form. I use this javascript to do so:

 document.getElementsByClassName('month')[0].value = '1'; document.getElementsByClassName('day')[0].value = '1'; document.getElementsByClassName('year')[0].value = '2005';

So this works in the sense that the data is entered, however, the form won't submit unless I manually click it. In other words, the form shows january, 1, 2005 selected, but acts like there was no selection. As you can see in this photo, the continue button is disabled (grayed out), but becomes enabled when a mouse click is clicked on, say, the february option.

I believe my question is similar to How to click a dropdown menu and select option?, however, it appears the original question was never answered, as nothing is approved and any code I can find does not work. So, my question: how can I select options from this form and trigger something to enable the continue button.

Thank you for the help, and please let me know if my post needs editing.

Billy Bob
  • 45
  • 1
  • 8
  • Can you share the code that enables the Continue button? I'm guessing you can trigger a `change` event on one of the select elements, but it's impossible to know without seeing how the Continue button is enabled. – raddevon Feb 27 '18 at 03:21
  • @raddevon sure, could you walk me through it? Do I just go to sources-event listener breakpoints - control - change? – Billy Bob Feb 27 '18 at 03:23
  • Did you write the code that enables the Continue button? If so, just edit your question and add that to it. – raddevon Feb 27 '18 at 03:27
  • @raddevon I did not write the code, I need to find that code on the website. Is that even possible or would that be protected? – Billy Bob Feb 27 '18 at 03:30
  • Ah, OK. You might be able to find it, but it's probably more trouble than it's worth. I might try just triggering a change event on one of the select elements and see if that works. So, set the values the way you've already done. Then, trigger a `change` event and see if the button activates. Here's some info on [how to trigger the event](https://plainjs.com/javascript/events/trigger-an-event-11/). – raddevon Feb 27 '18 at 03:33
  • alright, I'll get back to you after some trial and error ;) – Billy Bob Feb 27 '18 at 03:34
  • Sure thing! If that works, I'll submit it as an answer so you can accept it. – raddevon Feb 27 '18 at 03:34
  • @raddevon so I did this to trigger a change: var event = new Event('change'); // Dispatch it. test.dispatchEvent(event); //test is the options element And I know the event triggers because I added an event listener which picks up the change. However, nothing happens. Am I doing something wrong or is this the wrong approach? – Billy Bob Feb 28 '18 at 02:55
  • We're shooting in the dark without knowing what activates that Continue button. You might try triggering a `click` event instead and see if that works. I guessed it might be listening for a `change`, but it could be listening for a `click` instead. The continue button activates as soon as you click one of the select elements, right? – raddevon Feb 28 '18 at 03:18
  • @raddevon actually, I did find a workaround using your advice. Thanks for the help! If you want to submit an answer feel free, I'll accept it. – Billy Bob Feb 28 '18 at 03:19
  • Awesome! Glad I could help! What did you have to do, if you don't mind my asking? – raddevon Feb 28 '18 at 03:23
  • @raddevon I found the code the ontrigger was referencing, and I dug around in it for a while until I realized I needed to change some classes around to allow the form to accept answers. – Billy Bob Feb 28 '18 at 20:27

1 Answers1

0

Try triggering a change event on one of the select elements and see if that enables the "Continue" button. Set the values the way you've already done. Then, trigger a change event and see if the button activates.

Here's some info on how to trigger the event: https://plainjs.com/javascript/events/trigger-an-event-11/

raddevon
  • 3,290
  • 4
  • 39
  • 49