Linking each Select option to its Textbox in a form by name and index

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • masgasam
    New Member
    • Dec 2012
    • 1

    Linking each Select option to its Textbox in a form by name and index

    I have a Php/Html with a form that has Select options named as items[] and each of items has a Textbox that it's value should change/link to the per selected value.

    Code:
    <html>
    <head>
    
    <form name="aform">
    <table border="1">
    <thead><tr><th>Row No.</th><th>Type</th><th>Color/Size</th></tr></thead>
    <?php
    for($i=1;$i<=5;$i++){
    echo'<tr>
    <td>' . $i . '</td>
    <td>
    <select name="itemmenu[]" size="1">
    <option value="nothing" selected="selected">Select item</option>
    <option value="Shoe">Shoe</option>
    <option value="Hat">Hat</option>
    <option value="Shirt">Shirt</option>
    </select>
    <input type="text" name="item[]" readonly>
    </td>
    
    <td>
    <select name="colormenu[]" size="1">
    <option value="nothing" selected="selected">Select color</option>
    <option value="Blue">Blue</option>
    <option value="White">White</option>
    <option value="Black">Black</option>
    </select>
    <input type="text" name="color[]" readonly>
    </td>
    </tr>';
    }
    ?>
    </table>
    </form>
    
    
    <script type="text/javascript">
    
    var selitemmenu=aform.itemmenu;
    var selcolormenu=aform.colormenu;
    
    selitemmenu.onchange=function(){ //run some code when "onchange" event fires
    
     for (var i = 0; i < selitemmenu.length; i++) { 
    
     var chosenoption[i]=this.options[this[i].selectedIndex]; //this refers to "selitemmenu"
     if (chosenoption[i].value!="nothing"){
      //window.open(chosenoption.value, "", ""); //open target site (based on option's value attr) in new window
      item[i].value=chosenoption[i].value;
      alert(chosenoption[i].value);
     }
    }
    
    </script>
    </body>
    </html>
    Last edited by masgasam; Dec 5 '12, 11:42 AM. Reason: sample code was forgotten
  • Rabbit
    Recognized Expert MVP
    • Jan 2007
    • 12517

    #2
    Use the on change event of the select to populate the drop down.

    Comment

    Working...