changing HTML select options based on other selection with JavaScript and PHP

georgbader

01-14-2012, 07:43 PM

Dear all,

background information:
I did code a timesheet management system for my company with PHP where the user has to submit time entries and has an online form with several start and end times. The start and end times are all simple HTML select option dropdowns. I want that the first End time selection will be the next start time selection. Basically a simple dependency of the dropdown. My approach was that I want to solve this with JavaScript. In my php code I am echoing the following (in this select the end times are the values):

echo "<select class='normal' name='$field_id' onChange=set_time_hour(this.value,'$field_id_js')>";

When the user changes then the end time dropdown the next field (next start time entry) should be changed accordingly.

The javascript looks like this

function set_time_hour(hour_value,next_field){
alert (hour_value);
alert (next_field);
document.getElementById(next_field).value = hour_value;
}

The alert calls are giving me the right values. but the

document.getElementById(next_field).value = hour_value;

is not working. What is wrong there? Do you have an idea?

How can I change the value of a select box with Javascript?

The select box values are already popoluated with PHP so I just want to select the right value.

blaze4218

01-14-2012, 08:07 PM

you didn't set an id in your code.
I would start by changing
document.getElementById(next_field).value = hour_value;
to
next_field.value = hour_value;

or
echo "<select class='normal' name='$field_id' onChange=set_time_hour(this.value,'$field_id_js')>";
to
echo "<select class='normal' name='$field_id' id='$field_id' onChange=set_time_hour(this.value,'$field_id_js')>";

xelawho

01-14-2012, 09:01 PM

these two sentences confuse me:

How can I change the value of a select box with Javascript?

The select box values are already populated with PHP so I just want to select the right value.

but if you want to alter the options of a select box you have to work with its options array. What I think you're trying to do is set the selected option of one box depending on the choice of another. Here's a simple example of that - maybe it will give you some ideas... or maybe Blaze has already answered your question...

<!DOC HTML>
<html>
<head>
</head>
<body>
<select id="start">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

<input type="button" value="click to select" onclick='set_time_hour(document.getElementById("start").selectedIndex,"next")'/>
<select id="next">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

<script type="text/javascript">
function set_time_hour(hour_value,next_field){
document.getElementById(next_field).options[hour_value].selected = true;
}
</script>
</body>
</html>