SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Member
    Join Date
    Jan 2012
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    dropdown select should change next dropdown accordingly

    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.

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,683
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Member
    Join Date
    Jan 2012
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Attached Images Attached Images

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,683
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by georgbader View Post
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Member
    Join Date
    Jan 2012
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    next step

    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

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,683
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by georgbader View Post
    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;
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Member
    Join Date
    Jan 2012
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    another try

    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 ?

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,683
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by georgbader View Post
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    SitePoint Member
    Join Date
    Jan 2012
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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".

  10. #10
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,683
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by georgbader View Post
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  11. #11
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,683
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Oh yes, and with jsfiddle, set it to no wrap (body) and no-library (pure JS)
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  12. #12
    SitePoint Member
    Join Date
    Jan 2012
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  13. #13
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,683
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    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 = ...
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  14. #14
    SitePoint Member
    Join Date
    Jan 2012
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •