Link to home
Create AccountLog in
Avatar of Heather Ritchey
Heather RitcheyFlag for United States of America

asked on

Javascript onChange form fields

I'm creating fields and hidden dropdowns with php. I need one dropdown to auto populate two text boxes from two hidden dropdowns when the user chooses from a non-hidden dropdown.

What is the correct syntax for this? (I think it's just been too long since I worked with javascript and it's just not popping in my head.)

This is the php part:

 
$file_handle = fopen("fuel-chart.csv", "rb");
$x = 1;
$fuel_type_list = '<select size="1" id="R-5_a" name="R-5.a-Fuel-Type">';
$hidden_cost_list = '<select style="display: none;" size="1" id="hide" name="hide">';
$hidden_measurement_list = '<select style="display: none;" size="1" id="hide2" name="hide2">';
while ($parts = fgetcsv($file_handle,4096,",")) {
	$fuel_type[$x] = $parts[0];
	$fuel_measurement[$x] = $parts[1];
	$fuel_cost[$x] = $parts[2];
	$fuel_type_list .= '<option value="'.$fuel_type[$x].'">'.$fuel_type[$x].'</option>';
	$hidden_measurement_list .= '<option value="'.$fuel_cost[$x].'">'.$fuel_cost[$x].'</option>';
	$hidden_cost_list .= '<option value="'.$fuel_measurement[$x].'">'.$fuel_measurement[$x].'</option>';
	$x++;
} 
$fuel_typelist .= '</select>';
$hidden_cost_list .= '</select>';
$hidden_measurement_list .= '</select>';

Open in new window


This is the section with the fields:

 
<tr height="20" style="height:15.0pt">
    <td width="38" class="firsttd">Fuel Type</td>
    <td class="xl90" width="198"><?php echo $fuel_type_list;?><?php echo $hidden_measurement_list;?> <input type="text" id="5_1" name="5.1-Unit-of-Measure" size="20" value="<?php echo $_POST['5_1-Price-per-Unit'];?>"></td>
  </tr>
  <tr height="21" style="height:15.75pt">
    <td height="21" style="height: 15.75pt" width="38" class="firsttd">Price per Unit (enter if price differs
      from average)</td>
    <td width="198"><?php echo $hidden_cost_list;?><input type="text" id="5_b" name="5.a-Price-per-Unit" size="20" value="<?php echo $_POST['5_a-Price-per-Unit'];?>"></td>
  </tr>

Open in new window

Avatar of designsevolved
designsevolved
Flag of United States of America image

Add this code in between your head tags:

<script type="text/javascript">
function changeSelected(selectobj){
 var hide = document.getElementById("hide");
 var hide2 = document.getElementById("hide2");
 hide.selectedIndex(selectobj.selectedIndex);
 hide2.selectedIndex(selectobj.selectedIndex);
 document.getElementById("5_1").value(hide.options[hide.selectedIndex].value);
 document.getElementById("5_2").value(hide2.options[hide2.selectedIndex].value);
}
</script>

Open in new window


Change your php code like so:

$file_handle = fopen("fuel-chart.csv", "rb");
$x = 1;
$fuel_type_list = '<select size="1" id="R-5_a" name="R-5.a-Fuel-Type" onchange="changeSelected(this);">';
$hidden_cost_list = '<select style="display: none;" size="1" id="hide" name="hide">';
$hidden_measurement_list = '<select style="display: none;" size="1" id="hide2" name="hide2">';
while ($parts = fgetcsv($file_handle,4096,",")) {
	$fuel_type[$x] = $parts[0];
	$fuel_measurement[$x] = $parts[1];
	$fuel_cost[$x] = $parts[2];
	$fuel_type_list .= '<option value="'.$fuel_type[$x].'">'.$fuel_type[$x].'</option>';
	$hidden_measurement_list .= '<option value="'.$fuel_cost[$x].'">'.$fuel_cost[$x].'</option>';
	$hidden_cost_list .= '<option value="'.$fuel_measurement[$x].'">'.$fuel_measurement[$x].'</option>';
	$x++;
} 
$fuel_typelist .= '</select>';
$hidden_cost_list .= '</select>';
$hidden_measurement_list .= '</select>';

Open in new window


This assumes that your main select box indexes correspond to the hidden select box indexes in both count and position, which your code implies is the case.
Avatar of Heather Ritchey

ASKER

Yes, your assumption is correct. I should have remembered to clarify that in the question.

I'm getting this error in the javascript console though:

Error: hide.selectedIndex is not a function

Is there an error in the code? It looks good to me - but like I said, I seem to have lost my javascript skills.
Thanks much for your help.
Ah apparently I used the selectedIndex incorrectly. Here is the revised code:

<script type="text/javascript">
function changeSelected(selectobj){
 var i = selectobj.selectedIndex;
 var hide = document.getElementById("hide");
 var hide2 = document.getElementById("hide2");
 hide.selectedIndex = i;
 hide2.selectedIndex = i;
 document.getElementById("5_1").value(hide.options[i].value);
 document.getElementById("5_2").value(hide2.options[i].value);
}
</script>

Open in new window


I also realized changing the value of your drop downs was unnecessary so the following would also work:

<script type="text/javascript">
function changeSelected(selectobj){
 var i = selectobj.selectedIndex;
 var hide = document.getElementById("hide");
 var hide2 = document.getElementById("hide2");
 document.getElementById("5_1").value(hide.options[i].value);
 document.getElementById("5_2").value(hide2.options[i].value);
}
</script>

Open in new window

Darn, still getting the error:

Error: document.getElementById("5_1").value is not a function

Would it be that I used a digit as the variable? I just don't quite understand why it's thinking that it should be a function.
ASKER CERTIFIED SOLUTION
Avatar of designsevolved
designsevolved
Flag of United States of America image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
Thank you very much. That works great.
Sorry it took so long to get back to you.