How to use JQuery to set the value of 2 html form select elements depending on the value of another

Question

My Javascript and JQuery skills are poor at best and this is **

I have the following three elements in a form :

<select name="event_time_start_hours">
    <option value="blank" disabled="disabled">Hours</option>
    <option value="blank" disabled="disabled">&nbsp;</option>
    <option value="01">1</option>
    <option value="02">2</option>
    <option value="03">3</option>
    <option value="04">4</option>
    <option value="05">5</option>
    <option value="06">6</option>
    <option value="07">7</option>
    <option value="08">8</option>
    <option value="09">9</option>
    <option value="10">10</option>
    <option value="11">11</option>
    <option value="12">12</option>
    <option value="midnight">Midnight</option>
    <option value="midday">Midday</option>
</select>
<select name="event_time_start_minutes">
    <option value="blank" disabled="disabled">Minutes</option>
    <option value="blank" disabled="disabled">&nbsp;</option>
    <option value="00">00</option>
    <option value="15">15</option>
    <option value="30">30</option>
    <option value="45">45</option>
</select>
<select name="event_time_start_ampm">
    <option value="blank" disabled="disabled">AM / PM</option>
    <option value="blank" disabled="disabled">&nbsp;</option>
    <option value="am">AM</option>
    <option value="pm">PM</option>
</select>

Quite simply, when either 'midnight' or 'midday' is selected in "event_time_start_hours", I want the values of "event_time_start_minutes" and "event_time_start_ampm" to change to "00" and "am" respectively.

My VERY poor piece of Javascript says this so far :

$(document).ready(function() {
    $('#event_time_start_hours').change(function() {
        if($('#event_time_start_hours').val('midnight')) {
        $('#event_time_start_minutes').val('00');
        }
    });
});

... and whilst I'm not terribly surprised it doesn't work, I'm at a loss as to what to do next.

I want to do this purely for visual reasons for the user as when the form submits I ignore the "minutes" and "am/pm". I'm trying to decide whether it would be best to change the selected values, change the selected values and then disable the element or hide them altogether. However, without any success in getting anything to happen at all I haven't been able to try the different approaches to see what feels right.

I've ruled out the obvious things like a duplicate element ID or simply not linking to JQuery.

Thank you.

Answer 1

Try this:

$(function() {
  $('[name=event_time_start_hours]').change(function() {
    if($(this).val() === 'midnight' || $(this).val() === 'midday') {
      $('[name=event_time_start_minutes]').val('00');
      $('[name=event_time_start_ampm]').val('am');
    }
  });
});

.val() without parameters returns the value, with a string you're setting the value.

Answer 2

You need to use a different form of val() to get the current value. And "midday" should be "PM", though you're probably not using that value on the backend anyway. Perhaps it would be better just to hide those dropdowns when the first drop down has "midnight" or "midday" -- in that case, though, the checks could be rolled up into a single if.

EDIT: as another user noted, you need to give the selects IDs as well. I'm assuming that you've done that in the code below as it makes the selector shorter.

$(document).ready(function() { 
    $('#event_time_start_hours').change(function() {
        var startHour = $(this).val(); 
        if(startHour == 'midnight') { 
            $('#event_time_start_minutes').val('00');
            $('#event_time_start_ampm').val('am');
            // or $('#event_time_start_minutes,#event_time_start_ampm').hide();
        }
        else if (startHour == 'midday') {
            $('#event_time_start_minutes').val('00');
            $('#event_time_start_ampm').val('pm');
            // or $('#event_time_start_minutes,#event_time_start_ampm').hide();
        }
    }); 
});

Answer 3

On your test, you're not comparint the value of #event_time_start_hours to midnight, you're actually setting that value.

Try this :

$(document).ready(function() {
    $('#event_time_start_hours').change(function() {
        if($('#event_time_start_hours').val()=='midnight')) {
          $('#event_time_start_minutes').val('00');
        }
    });
});

Answer 4

the problem is you're using the id selector (#) but your selects have just a name.