PHP / javascript - 如何从输入文本框中获取值，并将其附加到div / Form

Question

编辑问题： 在我的WHILE循环中，它创建一个只读输入文本框，值是从数据库中提取的任何记录。在每个文本框之后，有一个添加按钮，可以将按钮旁边的文本框的值附加到我页面上的另一个div。添加的唯一值是第一条记录。我知道为什么，我无法解决。有什么想法吗？

    $query = "SELECT `$posResults` FROM test.departments ";
    $result = mysql_query($query);

    if ($result) {
    //output results from database

    echo 'Software';
    while($row = mysql_fetch_array($result))
    {
      echo '<tr>';
      echo '<td><input type="text" id="rSoft" size="50" name="reqSoft" value="'.$row[0].'" readonly/> <button  id="toForm" value="Add" >Add</button>';
      echo '</td>';
      echo '</tr>';
     }
      echo "<script type='text/javascript'>$(document).ready(function(){ $('button#toForm').click(function(){ var req = document.getElementById('rSoft').value;  $('<tr><td>' + req + '</td></tr>').appendTo('#empInfo');}); });</script>";                                     
     }

这是一张图片。当我点击添加时，我希望值转到div。现在，只追加第一个值。

Answer 1

找到涵盖所有内容的答案： 在我的主页上：

    $query = "SELECT `$posResults` FROM test.departments ";
    $result = mysql_query($query);

    if ($result) {
    //output results from database

    echo 'Software';
    echo '<table>';

    $i = 0;
    while($row = mysql_fetch_array($result))
    {
      echo '<tr><td><input type="text" id="rSoft'.$i.'" value="'.$row[0].'" name="reqSoft" readonly/>';
      echo '<button  id="toForm'.$i.'"  data="rSoft'.$i.'" >Add</button>';
       $i++;
      }
       echo '</table>';
    }

在我的JS页面上：

    /*Add software to form*/
    $(document).ready(function(){
    $('button').on('click' , function(){  
      var inputID = $(this).attr('data');
      var theValue = $('#' + inputID).val();
        $('#empInfo').append('<tr><td>' + theValue + '</td></tr>')
       });  

这会将输入框的数据附加到我需要它的位置。谢谢OIS和Kristen Jukowski让我开始分辨率！         }）;

Answer 2

输入的ID必须是唯一的。但是，如果将ID更改为如下所示，则可以将值作为数组传递：     echo '<td><input type="text" id="reqSoft[]" size="50" name="reqSoft[]" value="'.$row[0].'" readonly/> <button id="toForm" value="Add" >Add</button>'; 您传递的值将在$_POST['reqSoft']中作为数组提供。 （第一个文本框值为$_POST['reqSoft'][0]等）。

类似的问题/答案：Dynamically create unique ID for an array of input fields using Javascript