I have a form for signing someone up for email alerts. The user has several options for what type of alerts to get. One of these options is to be emailed when a specific interest rate becomes available for a loan. If they want this type of email they check a check box and then select the rate they want from a list. If they check the box for this type of alert, selecting a rate becomes required.
What I want to do is make it so that if someone selects a rate from the list, it will automatically check the check box. I want it to do it in an AJAX way so that right when they select a rate form the list, they will see the check box become marked.
Here is the form I have set up (This form is much longer with more alert options, but I cut it down for space):
<form id="alerts" action="/about/mortgage-rate-alerts" method="post">
<fieldset>
<legend>Sign up for alerts below:</legend>
<div>
<!-- BEGIN email_address -->
<p><label for="email_address">E-mail address:</label> <input class="text" id="email_address" tabindex="1000" type="text" name="alerts[emailAddress]"></p>
<!-- END email_preferences -->
</div>
<!--BEGIN ALERTS_RATE -->
<div class="rate_container">
<h2><input value="" type="hidden" name="alerts[rateAlert]">
<label><input tabindex="1000" class="alert_check_box" name="alerts[rateAlert]" type="checkbox" value="1"> Rate Alert</label></h2>
<div id="rate_alert_headline">
<p>Tell us exactly what rate you’re looking for and well get in touch when it’s available.</p>
</div>
<p>
What rate do you want?
<select class="select" tabindex="1000" name="alerts[rate]">
<option value="">Choose Rate</option>
<option value="rate">rate</option>
<option value="rate">rate</option>
<option value="rate">rate</option>
</select>
</p>
</div>
<div><input id="submit_form" value="Complete" tabindex="1000" src="sign_me_up.png" type="image" name="alerts[submit]"></div>
</fieldset>
</form>