Reputation: 3
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"> </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"> </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"> </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.
Upvotes: 0
Views: 706
Reputation: 8461
the problem is you're using the id selector (#) but your selects have just a name.
Upvotes: 0
Reputation: 7271
Your selects are not ID'ed
$('#event_time_start_hours') is asking for
You have them named so your code should be:
$(document).ready(function() {
$('select[name=event_time_start_hours]').change(function() {
if($('select[name=event_time_start_hours]').val('midnight')) {
$('select[name=event_time_start_minutes]').val('am');
}
});
});
Oops - fixed 00 to 'am'
Upvotes: 0
Reputation: 5708
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');
}
});
});
Upvotes: 1
Reputation: 532745
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();
}
});
});
Upvotes: 0
Reputation: 630627
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.
Upvotes: 1