獲取下拉值，然后將其插入表中的文本框，但不更改第二行

Question

我試圖獲取下拉列表的值，然后將其插入到我的文本框中，然后將其保存到數據庫。 數據來自數據庫。 問題是在我從下拉列表中選擇數據然后單擊插入按鈕之后； 只有一個文本框已更改。 另一行未更改。 當我單擊第二行的插入按鈕時，它將更改第一行文本框。

javascript

function copyValue(id) {
    var dropboxvalue = document.getElementById('mydropbox').value;
    document.getElementById('mytextbox').value = dropboxvalue;
}

home.php

      <td align="center"><input type="submit" name="insert"  onclick="copyValue(<?php echo $r['so_id'] ?>)" class="btn btn-success" value="Insert" /></td>
      <td><input class="form-control" name="dar_numberr" id="mytextbox" type="text" required="required" placeholder="Delivery Date" value="<?php echo $r['dar_numberr'] ?>"></textarea></td>

落下

<?php
            $databaseHost = "localhost"; 
            $databaseUser = "root";
            $databasePassword = "";
            $databaseName = "csl_otd";

            $con=mysql_connect($databaseHost ,$databaseUser ,$databasePassword )or die ('Connection Error');
            mysql_select_db("csl_otd",$con) or die ('Database Error');
         ?>
             <select name="dar_number" id="mydropbox" class="form-control"> 
             <option value=""> -----------Available DAR Number----------- </option> 
         <?php
            $dd_res=mysql_query("Select DISTINCT dar_number from dar");
            while($r=mysql_fetch_row($dd_res))
            { 
               echo "<option value='$r[0]'> $r[0] </option>";
            }
         ?>
            </select>

Answer 1

我的懷疑是，您只針對javascript中的特定ID，並且您可能對不同行中的多個輸入使用相同的ID。 ID必須是唯一的。

因此，請嘗試以下方法：

 //change only the input in the same row by click on button function copyValue(event) { var dropboxvalue = document.getElementById('mydropbox').value; event.target.parentElement.nextElementSibling.getElementsByTagName('input')[0].value = dropboxvalue; } //change all inputs by click on button function updateAllRows() { var dropboxvalue = document.getElementById('mydropbox').value; var inputs = document.getElementsByClassName('mytextbox'); for (var i = 0; i < inputs.length; ++i) { inputs[i].value = dropboxvalue; } } 

 <!-- example dropdown --> <select id="mydropbox"> <option>myOption</option> <option>myOtherOption</option> </select> <!-- example if you want to update all rows at once --> <button onclick="updateAllRows()"> Update all rows </button> <!-- example table --> <table> <tr> <!-- here, add the event to your function call to access the exact button that was clicked --> <td><input type="submit" name="insert" onclick="copyValue(event)" class="btn btn-success" value="Insert" /></td> <!-- here, change id to class - if you use it somewhere, css or something similar, use '.' instead of '#' --> <td><input class="form-control mytextbox" name="dar_numberr" type="text" required="required" placeholder="Delivery Date" value="myNumber" /></td> </tr> <tr> <!-- second row --> <td><input type="submit" name="insert" onclick="copyValue(event)" class="btn btn-success" value="Insert" /></td> <td><input class="form-control mytextbox" name="dar_numberr" type="text" required="required" placeholder="Delivery Date" value="myNumber" /></td> </tr> </table> 

https://jsfiddle.net/ba91jpxf/