Skip to main content
P
prashantsavalia
Participating Frequently
August 8, 2018
Answered

HTML Canvas JS Drop Down value validation

  • August 8, 2018
  • 2 replies
  • 1104 views

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.

This topic has been closed for replies.
Correct answer JoãoCésar17023019

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

2 replies

P
prashantsavaliaAuthor
Participating Frequently
August 9, 2018

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ésar17023019
Community Expert
JoãoCésar17023019Community ExpertCorrect answer
Community Expert
August 9, 2018

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

ankushr40215001
ankushr40215001
Inspiring
August 8, 2018

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.

Hope this helps.

Thanks!

Ankush

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices