compare the value of two dropdown

Greetings to all who make ChronoForms
I created two dropdown and each option has a value.
I have a simple question:
Where and how I can start my javascript code to make the comparison of these two dropdown.
Note: I do not need the code ready. That if I can. I do not understand how they work on ChronoForms.

I have the module and the two dropdown and for example if the value of the first dropdown is selected equal to the second selected then displays a message. This is as if programmed.

I have read the tutorial on dynamic dropdown but really do not understand.

I just need a help on where and how to start. Where I can click and start coding.

Greetings and I hope someone can help me.

Hi betostockholm,

I need to be sure I'm answering the right question.

You have two select drop-downs - say select_a and select_b

When the user makes a selection on one of them that matches the other you want to display a message.

Is that correct?

If so, you need to give the drop-downs ids - like select_a and select_b

And you need to add a Custom Element element with a div or span to hold the message; again it needs a unique id.

Then you can drag a Load JS action into the On Load event of your form and add JavaScript to show the message when the values of the drop-downs match.

Bob

Hello Bob,
Once again thanks for the support and quick response.

Yes it is just what I needed. If I fix it, I will post the example here.

Hello Bob,

I tried a few ways to run a simple code and I can not, not that I am failing, I do not understand yet in operation ChronoForms Js.

The code I have is as follows:

<div class="ccms_form_element cfdiv_select" id="val_1_container_div"><label for="val_1">Välj Stad</label><select size="1" id="val_1" class="" title="" name="stad">
<option value="V">- Val1 -</option>
<option value="11">Option 1</option>
<option value="12">Option 2</option>
</select>
<div class="clear"></div><div id="error-message-stad"></div></div><div class="ccms_form_element cfdiv_select" id="val_2_container_div"><label for="val_2">Tjänster</label><select size="1" id="val_2" class="" title="" name="tjanst_1">
<option value="T">- Val2 -</option>
<option value="01">Option 1</option>
<option value="02">Option 2</option>
</select>
<div class="clear"></div><div id="error-message-tjanst_1"></div></div><div class="ccms_form_element cfdiv_submit" id="btncompare_container_div"><input name="skicka" id="btnCompare" onclick="funktion(e)" class="" value="skicka" type="button" />
<div class="clear"></div><div id="error-message-skicka"></div></div>

and the javascrit is: (Load JS):

var val1 = document.getElementById('val_1'),
    val2 = document.getElementById('val_2'),
    btnC = document.getElementById('btnCompare');

btnC.onclick = function(e) {
    if(val1.value === "11" && val2.value === "01") {
        alert('Equal');
    } else {
        alert('Not equal');
    }
}

can you give me some advice that I can do to show the message?

Hi betostockholm,

First take the onclick out of the HTML - we'll do that another way

<div class="ccms_form_element cfdiv_submit" id="btncompare_container_div"><input name="skicka" id="btnCompare" class="" value="skicka" type="button" />

Put the JavaScript into a Load JS action in the On Load event. Or the JS box on the Easy Wizard Others tab.

var val1, val2, btcC;
window.addEvent('domready', function() {
  val1 = $('val_1');
  val2 = $('val_2');
  btnC = $('btnCompare');
  btnC.addEvent('click', function() {
    if ( val1.value === "11" && val2.value === "01" ) {
      alert('Equal');
    } else {
      alert('Not equal');
    }
  });
});

Bob