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!
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 !");
}
});