javascript - 获取下拉值然后将其插入表格内的文本框，但不会更改第二行

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/