Combo Boxes Fill

[grundig]

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:

<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

<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.

[Fou-Lu]

Despite the similar sounding names, Java is not the same as Javascript.
Moving from Java forum to Javascript forum.

[Philip M]

You want to capture the text of the option instead of its value.

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.

[grundig]

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.

var combo1 = document.getElementById('Combobox1');
   var combo2 = document.getElementById('Combobox2');
   var selected = combo1.options[combo1.options.selectedIndex].value;

var si = combo1.selectedIndex; // using previously defined id
var txt1 = combo1.options[si].text;

[felgall]

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.

[grundig]

Thanks I replaced "Value" with "Text" but then when I selected from the first box the second box remained empty I tried:

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.

[Philip M]

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.

[grundig]

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"

[Philip M]

Glad to hear that your problem is solved!