Question

I have the following script:

<script type="text/javascript">
$(document).ready(function(){

$("#ProjModelChoose").change(function() {
    $("#ProjModelChooseCOM").attr("name","form" + $(this).val());
    $("input[name='buyid']").attr("value", $(this).val());
});

$("#ProjModelChoose2").change(function() {
    $("#ProjModelChooseOEM").attr("name","form" + $(this).val());
    $("input[name='buyid']").attr("value", $(this).val());
});

$(".atcButton").click(function() {
    if($("select option:selected").val("Choose Your Projector Model")) {
    event.preventDefault();
    alert("Please choose a projector model");
    }
    });
});
</script>

The HTML:

<table cellpadding="0" cellspacing="0" border="0">
<tr>
<span>Purchase today for: </span><h3 class="atcPrice">$192</h3>
<select name="chooseModelOEM" id="ProjModelChoose">
<option value="Choose Your Projector Model">Choose Your Projector Model</option>
<option value="126648">PLC-SU70</option>
<option value="126682">PLC-WXE45</option>
<option value="126684">PLC-WXE46</option>
<option value="126686">PLC-WXL46</option>
<option value="126717">PLC-XE40</option>
<option value="126719">PLC-XE45</option>
<option value="126795">PLC-XL40</option>
<option value="126797">PLC-XL45</option>
<option value="126998">PLC-XU73</option>
<option value="127000">PLC-XU74</option>
<option value="127006">PLC-XU83</option>
<option value="127008">PLC-XU84</option>
<option value="127010">PLC-XU86</option>
<option value="127012">PLC-XU87</option>
</select>
<form name="" action='someaction' method=post id="ProjModelChooseCOM" target="_blank"><input type='hidden' name='buyid' value=""><input type='hidden' name='c' value="1025622"><input type='hidden' name='n' value='5'><td class='text'><input name='add' id='add' size=4 value=1 class='qtyButton' border="0" ></td><td class='text'><input type="image" src="olp-atcbutbg.png" border='0' value='Add to Cart' alt='Add to Cart' class='atcButton'></td></form>
</tr>
</table>

Ok, so basically I am inserting the value from the selected option into the form when a user makes a selection from the drop down. That works fine. But if a user does not make a selection (Leaves the dropdown on the “Select your projector model”) and tries to add the product to the cart, I want it to stop the form submit (it’s dynamic so it’s going to try to perform the action regardless) and display an alert. My code above does neither =/

Answer 1

Try this:

$(".atcButton").click(function() {
    if($("select option:selected").val() === "Choose Your Projector Model") {
        alert("Please choose a projector model");
        return false;
    }
});

You may also want to change your event handler from $(".atcButton").click() to $("#ProjModelChooseCOM").submit().

Update Sorry I misunderstood the issue. Edited to address the value comparison issue.