dropdown select should change next dropdown accordingly

**georgbader** · Jan 14, 2012 13:50

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 and call the set_time_hour java script function in order to change then the next drop down (this.value should be the value of the next dropdown.

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.

**paul_wilkins** · Jan 14, 2012 16:22

If you pass just the this keyword to the set_time_hour function (instead of this.value),you can then get the selectedIndex property and set the other select box to have the same selected index.

**georgbader** · Jan 14, 2012 16:43

Hey Paul, thank you very much for your quick reply. This is not what I mean. The right value is submittted to the set_time_hour function. The problem is that

document.getElementById(next_field).value = hour_value;

is not changing the next field. I attached a screenshot to this document to show which field what I want to change. The fielt on top is the one that is providing the info to call set_time_hour function e.g. '12' which is the value that the next field should have and 2_start_time_id which is the name of the next select field (the one that is also marked in the attachment).

I think the javascript document.getElementById(next_field).value = hour_value; is wrong.

Untitled.jpg

all the best and many thanks for your help.

**paul_wilkins** · Jan 14, 2012 17:31

Originally Posted by georgbader

The problem is that

document.getElementById(next_field).value = hour_value;

is not changing the next field.

You cannot use a value to set the selected option of a dropdown box. It is the selectedIndex property that you need to set instead.

That can be done in a number of different ways.

The preferred technique is to pass a reference to the current select field to the function, so that from the function you can then get the value with select.value or the selectedIndex with select.selectedIndex
That way you can set the selectedIndex property of the next field based on the selectedIndex of the current select field.

**georgbader** · Jan 15, 2012 10:35

ok. Understand.

I am using now the following to call

onChange=set_time_hour(this,'$field_id_js')

in the script I am trying

function set_time_hour(field,nextfield){
document.timesheetoffice.nextfield.selectedIndex = field;
}

it is unfortunately still not working. Even when I try to change the index like

document.timesheetoffice.nextfield.selectedIndex = 3;

it is not working...

when I alert

alert(field);
alert (nextfield);

I am getting

[object HTMLSelectElement]
2start_time_id_hour

so... I do not get further. I got from the net a simple example like this which is working:

<html><head><title>Test</title>
<script type="text/javascript">
function CheckAuswahl () {
if (document.Testform.Auswahl.selectedIndex == 2)
document.Testform.Auswahl.selectedIndex =4;
}
</script>
</head><body>
<form name="Testform" action="">
<select name="Auswahl" size="5" onchange="CheckAuswahl()">
<option>Goethe</option>
<option>Schiller</option>
<option>Guildo Horn</option>
<option>Homer</option>
<option>Fontane</option>
</select>
</form>
</body></html>

I mus miss out something here... Thank you so much for your help

**paul_wilkins** · Jan 15, 2012 14:27

Originally Posted by georgbader

in the script I am trying

function set_time_hour(field,nextfield){
document.timesheetoffice.nextfield.selectedIndex = field;
}

it is unfortunately still not working.

There are a couple of reasons why that could be the case.
The selected index needs to be accessed on both sides of the assignment. and the nextfield variable seems like it is the string value of an identifier.

Try something like this instead:

Code javascript:

document.getElementById(nextfield).selectedIndex = field.selectedIndex;

**georgbader** · Jan 15, 2012 14:58

thanks again for this great help. I think we are getting closer.

I tried now

document.getElementById(nextfield).selectedIndex = field.selectedIndex;

There is a an javascript error message saying:

document.getElementById(...) is null or not an object'

and (also tried to call the getElementById with the actual name of the select

document.getElementById('2start_time_id_hour').selectedIndex = field.selectedIndex;

which is unfortunately also giving me the same error... Might it be that java script has a problem with the underscores in 2start_time_id_hour ?

**paul_wilkins** · Jan 15, 2012 15:00

Originally Posted by georgbader

Might it be that java script has a problem with the underscores in 2start_time_id_hour ?

The underscores aren't a problem, but identifiers aren't allowed to start with a number.

Perhaps if you put up a simplified version of what you're doing, say at www.jsfiddle.net, that would allow us to help you further.

**georgbader** · Jan 15, 2012 15:17

Hey. on

http://jsfiddle.net/R7kJR/3/

I did setup the code. I hope I have set it up right. this jsfiddle I used here the first time.

Basically I just want that when in the first dropdown "two" is is selected the second one should be also "two".

**paul_wilkins** · Jan 15, 2012 15:30

Originally Posted by georgbader

Hey. on

http://jsfiddle.net/R7kJR/3/

I did setup the code. I hope I have set it up right. this jsfiddle I used here the first time.

Basically I just want that when in the first dropdown "two" is is selected the second one should be also "two".

The problem here is that you're trying to access the second select box in an incorrect manner.

Are they both inside of the same form? If they are, you can use this:

Code javascript:

field.form.elements[nextfield].selectedIndex = field.selectedIndex;

If you don't have the benefit of them being in the same form, you would need to add a unique identifier on to the second select and use this instead:

Code javascript:

document.getElementById(nextfield).selectedIndex = field.selectedIndex;

However, having them be in the same form means you don't need to go to the extra complications of setting up additional identifiers.

**paul_wilkins** · Jan 15, 2012 15:34

Oh yes, and with jsfiddle, set it to no wrap (body) and no-library (pure JS)

**georgbader** · Jan 15, 2012 15:52

hey. i updated the jsfiddle and tried to consider your comments to make it on this micro level work before I update my code locally...

It is in the same form so

field.form1.elements[nextfield].selectedIndex = initialfield.selectedIndex;

should work... But again its not working... do you know any further?

**paul_wilkins** · Jan 15, 2012 16:01

You have a name on the form tag. That is superfluous and will not be of any use to you.

Code:

<form name="form1">

Your inline onchange event needs double quotes around it.

Code:

<select name='field1' onChange="set_time_hour(this,'field2')">

You've renamed the function property from field to initialfield, so you need to make that change to the same variable at the start of the statement too.
Also where you have "form1", that is not a reference to a named field. What that actually is, is a reference to the "form" property that naturally exists on all form fields, which references the form that the field is in.

Code:

initialfield.form1.elements[nextfield].selectedIndex = ...

**georgbader** · Jan 15, 2012 16:24

thank you so much for your help and all your efforts! It is now working! ;-) Without your help I wouldnt have made it and I also would have understood it! For some reasons this has been trickier than the last problems I encountered. Anyhow! Thanks!

User Tag List

Thread: dropdown select should change next dropdown accordingly

Thread Tools

Display

dropdown select should change next dropdown accordingly

next step

another try

Bookmarks

Bookmarks

Posting Permissions