Alert on drop down selection condition

Question

I am trying to pop an alert using the alertify library when the value form the dropdown is '0' and the user tries to click the Add another plan button. For some reason the alert is not coming up.

The JS for the alertify library is working fine as I've tested in other scenarios and it did pop up, but for some reason in this scenario it is not working.

HTML:

<select id="myselect" class="dropdown">
                <option value="0">Please Select Your Plan</option>
                <option value="1">package1</option>
                <option value="2">package2</option>
                <option value="3">package3</option>
                <option value="4">package4</option>
                <option value="5">package5</option>
                <option value="6">package6</option>
            </select>

    <div class="button-plan"><input type="button" value="Add another plan to enjoy more savings!" class="button-hide" /></div>

JS:

$('#myselect').change(function () {
        var val = $(this).val();

        if (val =='0'){
            $(".button-hide"). on (" click " ,function(){
            alertify.alert("You need to atleast select one plan !");                        
            });
                                    }

Fiddle available here: http://jsfiddle.net/6FLWY/1/

Many thanks for your help guys!

Answer 1

Your script is adding an event handler to the button if the select is changed to the first option. You should add the button event handler regardless, and make that check the dropdown value instead...

$(".button-hide").on("click" ,function() {
    var val = $("#myselect").val();
    if (val === "0") {
        alertify.alert("You need to atleast select one plan !");                        
    }
});

Working jsfiddle example...

Answer 2

Try checking the value of the select only when the button is pressed:

$(".button-hide").on(" click " ,function(){
    if($('#myselect').val()==0)
        alertify.alert("You need to atleast select one plan !");                        
});

Working demo

Answer 3

Currently you have wrong sequence of bindings and checks (For the moment, each time user selects option you bind "click" event to button. So until users selects options for first time, no click logic would be binded).

Bind "click" event logic first and check current list value in it:

$(".button-hide").on("click" ,function(){
    if ($('#myselect').val() == '0') {
        alertify.alert("You need to atleast select one plan !");
    }                        
});

Answer 4

 simply try the code as written below:

    $(".button-hide"). on ("click" ,function(){
         if($('#myselect').val()=="0")
        alertify.alert("You need to atleast select one plan!");  
    });

Answer 5

$('#myselect').change(function (e) {
        var val = $(this).val();

        if (val =='0'){

            $(".button-hide"). on (" click " ,function(){
            alertify.alert("You need to atleast select one plan !");    
                e.preventDefault();
            });
        }});