Select check box when option selected from list

This site is best viewed in a modern browser with JavaScript enabled.

Select check box when option selected from list

yodasw16

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>

yodasw16

seriously can't figure this out! help!!

peachskittle

Okaay... don't think you need AJAX for this. In case you decide you don't, why not try putting an onChange on that select? Give your options values, and then create a "starting" choice of like "Select One" then, onChange, have the javascript check the value of that select, and so long as it doesn't equal the value of the "Select One" choice, check your check box.