When an option from dropbox is selected, script to display an alert box

Question

so I have this following form that is on my website (partly generated by a wordpress plugin):

    <p>Your University<br />
        <span class="wpcf7-form-control-wrap your-university"><select name="your-university" class="wpcf7-form-control  wpcf7-select wpcf7-validates-as-required">
<option value="Brock University">Brock University</option>
<option value="McMaster University">McMaster University</option>
<option value="Queen&#039;s University">Queen&#039;s University</option>
<option value="University of Guelph">University of Guelph</option>
<option value="University of Toronto">University of Toronto</option>
<option value="UofT Mississauga">UofT Mississauga</option>
<option value="UofT Scarborough">UofT Scarborough</option>
<option value="University of Waterloo">University of Waterloo</option>
<option value="York University">York University</option>
<option value="Western University (UWO)">Western University (UWO)</option>
<option value="Other">Other</option>
</select>
</span> 
</p>

What I wanted as if the person on this form chose a certain item (i.e. McMaster University), that a javascript alert box would show up. So I put in the following code right above the aforementioned set of lines.

<script>
    $(document).ready(function(){
    $(':input#wpcf7-form-control-wrap your-university').live('change',function(){
    var sel_opt = $(this).val();
    alert(sel_opt);
    if(sel_opt=="McMaster University")
    {
      alert("Message for McMaster");
    }
     else if(sel_opt=="York University")
     {
       alert("Message for York");
     }
      else if(sel_opt=="Other")
      {
       alert("Message for Other");
      }
    });
 });
    </script>

That being said, it's not working!! The one reason I can see why it might not work is that in the other examples i learned from, forms had but the plugin for wordpress doesn't generate anything like that... Can anybody help me modify the code so that it would work?

Thanks! :D

Answer 1

here you go:

<p>Your University<br />
    <span class="wpcf7-form-control-wrap your-university"><select name="your-university" class="wpcf7-form-control  wpcf7-select wpcf7-validates-as-required">
<option value="Brock University">Brock University</option>
<option value="McMaster University">McMaster University</option>
<option value="Queen&#039;s University">Queen&#039;s University</option>
<option value="University of Guelph">University of Guelph</option>
<option value="University of Toronto">University of Toronto</option>
<option value="UofT Mississauga">UofT Mississauga</option>
<option value="UofT Scarborough">UofT Scarborough</option>
<option value="University of Waterloo">University of Waterloo</option>
<option value="York University">York University</option>
<option value="Western University (UWO)">Western University (UWO)</option>
<option value="Other">Other</option>
</select>
</span> 
</p>

jQuery(document).ready(function($){
$('.wpcf7-form-control').change(function(){
var sel_opt = jQuery(this).val();
alert(sel_opt);
if(sel_opt=="McMaster University")
{
  alert("Message for McMaster");
}
 else if(sel_opt=="York University")
 {
   alert("Message for York");
 }
  else if(sel_opt=="Other")
  {
   alert("Message for Other");
  }
});
});

EDIT:

in the interests of SO policy/users, lets explain. i changed one line:

$(':input#wpcf7-form-control-wrap your-university').live('change',function(){...

to

$('.wpcf7-form-control').change(function(){...

You'll also note that i replaced $ with jQuery in the in the first call and passed in $ which wasnt in the original answer i gave :)

Answer 2

You are using a ID selector, when needing a class selector. Perhaps, "changing the pound to a dot would work, as shown below:

$('.wpcf7-form-control-wrap your-university').live(...

Answer 3

Please remove # which is a ID to select element and replace with . (dot) which is an class selector which should fix your issue.

Also, with your code seems you are with older version of jQuery. From jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. As you are with older version of jQuery you can use .delegate() method (jQuery 1.4.3+) in preference to live().

Answer 4

If you just have one select, you can do:

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

$('select').on('change', function(event) {
    /* Act on the event */
    var sel_opt = $(this).val();
    alert(sel_opt);
    if (sel_opt == "McMaster University") {
        alert("Message for McMaster");
    } else if (sel_opt == "York University") {
        alert("Message for York");
    } else if (sel_opt == "Other") {
        alert("Message for Other");
    }

});
});
</script>