Question

I want to create a function for the following:

<select name="journey_type">
<option value="1">One Way</option>
<option value="2">Return</option>
</select>

<div id="return_datetime_div" style="display:none;">
<input id="Enquiry_return_datetime" type="text">
</div>

The return_datetime_div is displayed when the user selects “Return”. If the user then selects “One Way” the return_datetime_div gets hidden (this functionality is working):

$("select[name='journey_type']").change(function()
{
    if($($(this)).val() == "2")
    {
        $("#return_datetime_div").slideDown();
    }
    else
    {
        $("#return_datetime_div").slideUp();
    }
}
});

Now I want to extend this for the following scenario:

1. User selects “Return”
2. User enters some text in to #Enquiry_return_datetime
3. User then selects “One Way”
4. A ‘confirm’ popup should be displayed informing the user of the change of journey type
5. If the user accepts then the text in #Enquiry_return_datetime should be erased and the div gets hidden as per normal
6. If the user does not accept then the text remains AND the journey_type option should not change and div does not get hidden

Answer 1

Using a selector with an id is a lot faster than checking all selects for having a certain name attribute. I also simplified your “this” syntax.

    $('select#journey_type').change(function() {
        if(this.val() == '2') {
            $('#return_datetime_div').slideDown();
        } else {
            $('#return_datetime_div').slideUp();
        }
    }

Secondly, if the user selects “one-way” after “return” I’d just make that visually obvious instead of bugging them with a warning. I also would not delete the value, just don’t process it on the server side, much easier.

If you think your users will misunderstand one way or the other please do some very simple usabilitytest, just ask any non-technical person to do a task and let them comment while they’re doing it.