Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    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.

  • #2
    Regular Coder
    Join Date
    Apr 2005
    Location
    Texas
    Posts
    448
    Thanks
    24
    Thanked 63 Times in 63 Posts
    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')>";
    Allwisend bin ich nicht, doch viel ist mir bewursst
    -Goethe

  • #3
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,022
    Thanks
    56
    Thanked 566 Times in 563 Posts
    these two sentences confuse me:

    Quote Originally Posted by georgbader View Post
    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...

    Code:
    <!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>


  •  

    Posting Permissions

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