0

i have 3 dropdownlist in my form.i want everytime user select from list it will display into textbox..so if user select from 3 dropdownlist it will display into 3 textbox..the problem is only 1 value will display into textbox and the other 2 not display..here my code

<script>
 window.onload = function()
 {
    document.getElementsByName('mydropdown')[0].onchange = function(e)
    {
      document.getElementById('mylabel').innerHTML = this.value;
    };
 }
</script>

this is my html

<td>
   <select name="mydropdown" id="mydrop" onchange="">
      <option value="none" selected="selected"></option>
      <option value="17.50">6M</option>
      <option value="25.00">12M</option>
   </select>
</td>
<td><label id="mylabel"></label></td>
<td>
   <select name="mydropdown" id="mydrop">
      <option value="none" selected="selected">Length </option>
      <option value="0.0455">DS516HO</option>
      <option value="0.0559">DS520HO</option>
      <option value="0.0780">DS516HWR</option>
      <option value="0.0200">DS312WH</option>
      <option value="0.0624">DS520WH</option>
      <option value="0.0361">DS525FH</option>
      <option value="0.1170">DS620HW</option>
      <option value="0.1340">DS550HW</option>
      <option value="0.1340">TD525HW</option>
      <option value="0.1820">DS650HW</option>
      <option value="0.2340">TD665HWR</option>
   </select>
<td>
   <label id="mylabel">
   </label>
</td>

1 Answer 1

1

You can call a common function using "onchange" and update the value there. And since you set a value using innerHTML, it replaces the previous value. user += operator to append value to existing value.

HTML:

this is my html

<td><select name="mydropdown" id="mydrop" onchange="changeVal(this.value)">
<option value="none" selected="selected"></option>
<option value="17.50">6M</option>
<option value="25.00">12M</option>
</select>
</td>
<td><label id="mylabel"></label></td>

<td><select name="mydropdown" id="mydrop" onchange="changeVal(this.value)">
<option value="none" selected="selected">Length </option>
<option value="0.0455">DS516HO</option>
<option value="0.0559">DS520HO</option>
<option value="0.0780">DS516HWR</option>
<option value="0.0200">DS312WH</option>
<option value="0.0624">DS520WH</option>
<option value="0.0361">DS525FH</option>
<option value="0.1170">DS620HW</option>
<option value="0.1340">DS550HW</option>
<option value="0.1340">TD525HW</option>
<option value="0.1820">DS650HW</option>
<option value="0.2340">TD665HWR</option>
    </select></td>
<td><label id="mylabel"></label></td>

Javascript: Since there in no way to get multiple elements with same ID, we get elements with tag name label and check their ID's to select our desired labels.

function changeVal(value)
{
    var rows = document.getElementsByTagName('label');
    for(var i in rows)
    {
        if(rows[i].id == 'mylabel')
            rows[i].innerHTML += value;
    }
}

JS Fiddle: http://jsfiddle.net/xensoft/fK5m3/3/

8
  • so what should i use to replace innerHTML??
    – jaja
    Mar 30, 2013 at 9:07
  • You should use += as i showed in my quote. innerHTML += this.value;
    – kavin
    Mar 30, 2013 at 9:09
  • that not i mean.my problem is when i choose 6M then it will display 17.50 then when i choose another dropdownlist eg DS516HO it not display the value.i know it is because it cannot read same id on multiple element.so how to assigned different id for label so that it will display selected value from different dropdownlist value??
    – jaja
    Mar 30, 2013 at 9:16
  • You can try calling a function in onchange and update the label value there. Try my updated fiddle in this link. jsfiddle.net/xensoft/fK5m3/1
    – kavin
    Mar 30, 2013 at 9:28
  • yes it works but when i choose next dropbox the value of label is change.i want the label of value is remain example if i choose 6M the value will display 17.50 then when i choose DS516HO the value display 0.0559 but the value of 17.50 will remain..so how to assigned different id for label??
    – jaja
    Mar 31, 2013 at 1:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.