Question

I have a PHP form that presents the user with two radio button options (“All Dates” vs “Date Range”).

I’d like the “Date Range” radio button to be automatically selected if the user begins typing in either a “Start Date” or “End Date”.

As well, I’d like the “Start Date” and “End Date” text fields to clear if the “All Dates” radio button is selected.

Note: The div below is part of a form that can be cloned, hence the “#index#” variables for the id/name elements (so not sure id/name references can be used).

<div>
    <label>Dates to Give:</label>
    <div>
        <input type="radio" name="dates_#index#" id="dates_all_#index#" class="required" value="1" />
        All dates<br />
        <input type="radio" name="dates_#index#" id="dates_range_#index#" class="required" value="0" />
        Date Range:
        <div id="give_from">
            <div>
                <label> Start Date:</label>
                <input type="text" name="start_date_#index#" id="start_date_#index#" class="date start_date" />
            </div>
            <div>
                <label> End Date:</label>
                <input type="text" name="end_date_#index#" id="end_date_#index#" class="date end_date" />
            </div>
        </div>
    </div>
</div>

Answer 1

Change your HTML (CFML) to this (note the addition of the index=”#index#”):

<div>
    <label>Dates to Give:</label>
    <div>
        <input type="radio" name="dates_#index#" index="#index#" id="dates_all_#index#" class="required" value="1" />
        All dates<br />
        <input type="radio" name="dates_#index#" id="dates_range_#index#" class="required" value="0" />
        Date Range:
        <div id="give_from">
            <div>
                <label> Start Date:</label>
                <input type="text" name="start_date_#index#" index="#index#" id="start_date_#index#" class="date start_date" />
            </div>
            <div>
                <label> End Date:</label>
                <input type="text" name="end_date_#index#" index="#index#" id="end_date_#index#" class="date end_date" />
            </div>
        </div>
    </div>
</div>

And add this JS:

$(function () {


    $(".end_date, .start_date").keypress(function () {
        $("#dates_range_" + $(this).attr('index')).attr("checked", true);
    });

    $("##dates_all_#index#").click(function () {
        $("##end_date_" + $(this).attr('index') + ", ##end_date_" + $(this).attr('index')).val("");

    });
});