HTML Canvas JS Drop Down value validation

[prashantsavalia]

Hello all,

Quick question. I have two combo boxes on an HTML Canvas in Animate. The combo boxes have about three option each to be selected as a drop down. What I'd like to do is verify if the correct selections are made then show a message that let the user know they were correct. In other words, the user would select one option from each drop down. Then they hit a submit button. The code simply checks if the items selected from the drop downs are the correct items. If they are, they get an alert or message that tells them they are correct. If they didn't choose the correct items, they get a message that tells them it's not correct and to try again.

I've got it to the point where the drop downs function and show the list. They also allow show the items and allow the user to select one from each drop down. But when I click submit, nothing happens. I get no messages one way or the other. For simplicity sake, let's call the combo boxes  combo1 and combo2 and the submit button sbmt. Also for example, let's use the values 1, 2, 3 for combo1 and 4,5,6 for combo2. The correct responses should be a combination of combo1=1 and combo2=5.

Could someone help me come up with the correct code to make the submit button verify both drop downs have the correct values and display a message? I am also using a text label component for the message itself. Let's call it lbl_valid.

Any help would be greatly appreciated. Thanks in advanced.

[ankushr40215001]

Hi Prashant,

I am just a beginner with Js and AS coding. However tried to find out some relevant information for you.

Please check out the below links and see if they can trigger some idea in your mind with respect to your design.

• javascript - Validate dropdown list with java script - Stack Overflow
• forms - Validate select dropdown with javascript - Stack Overflow
• Validate (Check) HTML Select DropDownList using JavaScript and jQuery

Hope this helps.

Thanks!

Ankush

[prashantsavalia]

Thanks Ankush,

I started the same thought process but unfortunately it doesn't work the same when you're running it through animate. I'm familiar with hour fyi do it in straight html and JS, but animate issues bind statements and such which throw me off. Any other ideas?

[JoãoCésar · Accepted solution]

Hi.

Please try this:

JavaScript code:

this.answer1 = 1;
this.answer2 = 5;
$("#dom_overlay_container").on("click", "#sbmt", function(e)
{
    if ($("#combo1").val() == this.answer1 && $("#combo2").val() == this.answer2)
          $("#lbl_valid")[0].innerText = "Correct!";
    else
          $("#lbl_valid")[0].innerText = "Try again...";
}.bind(this));

One helpful trick is to log objects to the console (e.g.: console.log($("#lbl_valid"));) so it's possible to see all of its methods and properties.

Another one is to use the codes from the Code Snippets panel to learn how to do all kind of basic stuff.

FLA download:

animate_cc_html5_combo_boxes.zip - Google Drive

I hope this helps.

Regards,

JC