return a select box option text value rather than its numeric value 1

[mbarandao]

Hello:

I'm trying to obtain the text value of the select box instead of its numeric value. I have a pair of cascading select boxes which are structured in the following sql:

$r = mysql_query("SELECT sc.cat_id, sc.category_label, ss.cat_id, ss.item_id, ss.subcat_label, ss.invt, ss.product_desc, ss.invt, ss.qty, ss.cost FROM service_cat AS sc INNER JOIN service_subcat AS ss ON sc.cat_id = ss.cat_id ORDER BY sc.category_label, ss.subcat_label");
  if(mysql_num_rows($r)){
        $dd1 = "<select name=\"categories[]\" class=\"categories\" style=\"color:#003399; text-align:justify; font-size:1.0em; border-left: none; border-right: none; border-bottom: none\"><option value=\"0\">--Select One--</option>";
        $catname = '';  
        while($d = mysql_fetch_array($r)){
            if($catname != $d['category_label'])$dd1.= "<option value=\"{$d['cat_id']}\">{$d['category_label']}</option>"; 
            $array[$d['cat_id']][$d['item_id']] = array('subcat_label'=>$d['subcat_label'], 'invt' =>$d['invt'], 'product_desc' =>$d['product_desc'], 'qty'=>$d['qty'], 'cost'=>$d['cost']);
            $catname = $d['category_label'];
        }
        $dd1 .= "</select>";
    }
 $arr = json_encode($array);

the html output is something like this:

<select name="categories[]" class="categories" ><option value="0">--Select One--</option><option value="2">BRAKE SYSTEMS</option>.....</select>

After submit and based on the code above, I need to be get text Value "BRAKE SYSTEMS: rather than "2". Unfortunately, I cannot make the <option></option> value equal to the text value as my entire cascading effect is dependent on the numeric value of the first select box.

Can anyone help with a suggestion on how I can get the text value during post?
Best,

 

[vacunita]

I would add a hidden input, and set its value to the text of the dropdown onchange. That way you can recover the value in your server side script (PHP by the looks of it) from the hidden input rather than the dropdown.

<select ... onchange="document.getElementById('cattext').value = this.options[this.selectedIndex].text;">...</select>
<input type='hidden' name='categoriesText' id='cattext' value=''>

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[mbarandao]

vacunita, that is an excellent idea. This works great for one select box and its chained linked equivalent. Now suppose, my form offers the option of adding additional select boxes --dynamically, how would I capture those added dynamically? For visual understanding entirety of my form, here is a

Link

Again, thank you for that idea!

 

[vacunita]

2 ways I see. Concatenate the following values onto the text box value so you get a list separated by commas maybe; or make the the hidden element an array, that is create the hidden input as you do the select, and give it an incremental id you can then pass to the getElementById so you can alter the value of the correct hidden input.

<input type=hidden id='row[COLOR=white red]1[/color]'>
<input type=hidden id='row[COLOR=white red]2[/color]'>
...

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[mbarandao]

thank you Vacunita. Got it resolved! following your suggestion, I did the following:

solution:

<input type='hidden' name='categoriesText[]' class='cattext' value=''>
<input type='hidden' name='sub_categoriesText[]' class='sub_cattext' value=''>

and jquery for my pair of select boxes

.on('change', '.categories', function() {
    ...
    $row.find(".cattext").val($this.find("option:selected").text());
    ...
});   
and

.on('change', '.service_subcat', function() {
    ...
    $row.find(".sub_cattext").val($this.find("option:selected").text()); 
    ...
});

Thank you!

 

[vacunita]

Glad you got it to work.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech