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

Question

I'm trying to get the value of a dropdown then inserting it to my textboxes then after that it will save to database. The data is coming from the database. The problem is after I select data from the dropdown then click the insert button; only one textbox has changed. The other row is not changing. And when I click on insert button of the 2nd row, it changes the 1st row textbox.

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>

dropdown

<?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

My suspicion is that you are only targeting a specific id in your javascript, and that you might be using the same id for multiple inputs in different rows. Ids have to be unique.

So instead, try this approach:

//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/

</div>