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 9 of 9
  1. #1
    New Coder
    Join Date
    Oct 2012
    Posts
    13
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Combo Boxes Fill

    Could anyone help with this. I have 2 combo boxes on my site, the selection from the 1st populates the 2nd with values. The script is:

    Code:
    <script type="text/javascript">
    function fillSecondCombo()
    {
       var combo1 = document.getElementById('Combobox1');
       var combo2 = document.getElementById('Combobox2');
       var selected = combo1.options[combo1.options.selectedIndex].value;
       if (selected == 1)
       {
          combo2.options.length = 3;
          combo2.options[0] = new Option("Please Select", "Please Select");
          combo2.options[1] = new Option("Agricultural Engineer", "Agricultural Engineer");
          combo2.options[2] = new Option("Animal Care", "Animal Care");
          combo2.options[3] = new Option("Dairy Worker", "Dairy Worker");
          combo2.options[4] = new Option("Farm Worker", "Farm Worker");
          combo2.options[5] = new Option("Harvesting Equipment Driver", "Harvesting Equipment Driver");
          combo2.options[6] = new Option("Tractor Driver", "Tractor Driver");
          combo2.options[7] = new Option("Zoo and Safari Park Worker", "Zoo and Safari Park Worker");
          combo2.options[8] = new Option("Other (As Per CV)", "Other (As Per CV)");
       }
       else
       if (selected == 2)
       {
          combo2.options.length = 3;
          combo2.options[0] = new Option("Please Select", "Please Select");
          combo2.options[1] = new Option("Baker", "Baker");
          combo2.options[2] = new Option("Bar Worker", "Bar Worker");
          combo2.options[3] = new Option("Barista", "Barista");
          combo2.options[4] = new Option("Butcher", "Butcher");
          combo2.options[5] = new Option("Chef / Cook", "Chef / Cook");
          combo2.options[6] = new Option("Catering Manager", "Catering Manager");
          combo2.options[7] = new Option("Housekeeping", "Housekeeping");
          combo2.options[8] = new Option("Hotel Management", "Hotel Management");
          combo2.options[9] = new Option("Hotel Front of House", "Hotel Front of House");
          combo2.options[10] = new Option("Hotel Portering", "Hotel Portering");
          combo2.options[11] = new Option("Licensed Premises Manager", "Licensed Premises Manager");
          combo2.options[12] = new Option("Restaurant Manager", "Restaurant Manager");
          combo2.options[13] = new Option("Waiting at Tables", "Waiting at Tables");
          combo2.options[14] = new Option("Other (As Per CV)", "Other (As Per CV)");
    and the form html is
    Code:
    <select name="Job_Category" size="1" id="Combobox1" onchange="fillSecondCombo();return false;" style="position:absolute;left:141px;top:199px;width:111px;height:25px;z-index:12;" title="Job Category:">
    <option selected value="0">Please select an option</option>
    <option value="1">Agriculture</option>
    <option value="2">Catering and Hotel Work</option>
    <option value="3">Cleaning and Environmental</option>
    <option value="4">Education and Training</option>
    <option value="5">Engineering</option>
    <option value="6">Finance and Legal</option>
    <option value="7">Horticulture</option>
    <option value="8">Information Technology (IT)</option>
    <option value="9">Leisure Industry</option>
    <option value="10">Manufacturing</option>
    <option value="11">Medical</option>
    <option value="12">Office and Commercial</option>
    <option value="13">Plant and Construction</option>
    <option value="14">Sales and Retail</option>
    <option value="15">Security</option>
    <option value="16">Transport and Motor Trade</option>
    <option value="17">Warehouse and Logistics</option>
    <option value="18">Veterinary Services</option>
    </select>
    The problem I have is that when I select the initial value I.E. Agriculture and then select values from the second combo I.E. Agricultural Engineer it posts the values to the database but when i look at the database it has the following values.

    Job Category "1"
    Skills "Agricultural Engineer"

    How can I get the Job Category to insert the name into the database so it would then read

    Job Category "Agriculture"
    Skills "Agricultural Engineer"

    If needed I could post the full page code but as it is a sign up form there are a number of other fields.

  • #2
    God Emperor Fou-Lu's Avatar
    Join Date
    Sep 2002
    Location
    Saskatoon, Saskatchewan
    Posts
    16,979
    Thanks
    4
    Thanked 2,659 Times in 2,628 Posts
    Despite the similar sounding names, Java is not the same as Javascript.
    Moving from Java forum to Javascript forum.

  • #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,731
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    You want to capture the text of the option instead of its value.

    Code:
    var si = combo1.selectedIndex; // using previously defined id
    var txt1 = combo1.options[si].text;
    All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.
    Last edited by Philip M; 12-19-2012 at 07:24 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #4
    New Coder
    Join Date
    Oct 2012
    Posts
    13
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Thanks Philip but I'm new to javascript. Ive tried putting the code in various places but it wont work. Could you give me an idea please.

    Code:
    var combo1 = document.getElementById('Combobox1');
       var combo2 = document.getElementById('Combobox2');
       var selected = combo1.options[combo1.options.selectedIndex].value;
    Code:
    var si = combo1.selectedIndex; // using previously defined id
    var txt1 = combo1.options[si].text;

  • #5
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,465
    Thanks
    0
    Thanked 634 Times in 624 Posts
    Code:
    var combo1 = document.getElementById('Combobox1');
       var combo2 = document.getElementById('Combobox2');
       var selected = combo1.options[combo1.options.selectedIndex].text;

    Also you are working with selection lists and not with combo boxes as a combo box would also allow the person tp type in their own value if the one they wanted wasn't in the list.

    Desktop applications have had combo boxes available since the introduction of forms in computer programs but it is one form field that was originally omitted on the web - HTML 5 has rectified that with the introduction of combo boxes for the web.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • Users who have thanked felgall for this post:

    grundig (12-19-2012)

  • #6
    New Coder
    Join Date
    Oct 2012
    Posts
    13
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Thanks I replaced "Value" with "Text" but then when I selected from the first box the second box remained empty I tried:
    Code:
    var combo1 = document.getElementById('Combobox1');
       var combo2 = document.getElementById('Combobox2');
       var selected = combo1.options[combo1.options.selectedIndex].text;
    so I then replaced:

    if (selected == 1)

    with

    if (selected == Agriculture)

    But that didnt work either

    Looking at it again am i right in replacing:

    <option value="1">Agriculture</option>

    with

    <option value="Agriculture">Agriculture</option>

    Just tried that and that didnt work.
    Last edited by grundig; 12-19-2012 at 09:54 PM.

  • #7
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,731
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    var selected = combo1.options[combo1.options.selectedIndex].text;

    The value of selected is the TEXT of the selected option

    So

    if (selected == "Agriculture")

    The word agriculture is a string literal so must be in quotes.

    If you want you could make the VALUE of the options the same as the TEXT

    <option value="Agriculture">Agriculture</option>

    But then you would use the value of the selected option.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #8
    New Coder
    Join Date
    Oct 2012
    Posts
    13
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Philip

    Thanks so much the form works fine now and posts the right option to the database.

    The database did read

    Job_Category "1"

    Now reads

    Job_Category "Agriculture"

  • #9
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,731
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    Glad to hear that your problem is solved!

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.


  •  

    Posting Permissions

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