Javascript 从表中的动态下拉列表中获取选定值_Javascript_Jquery_Ajax

Javascript 从表中的动态下拉列表中获取选定值

javascript jquery ajax

Javascript 从表中的动态下拉列表中获取选定值,javascript,jquery,ajax,Javascript,Jquery,Ajax,我有一个按钮，可以向表中添加一行，以便插入数据。其中一个标记填充下拉菜单。我需要从下拉列表中获取值，然后在ajax调用中返回php页面，以便将数据插入数据库。我尝试的所有操作都返回了未定义的位置ID 我在帖子中得到一个500错误，我认为这是由于var position_ID=$this.parents'tr'.find'.positionList'.val；，在插入函数中，未设置 HTML代码： <html> <head> <script src

我有一个按钮，可以向表中添加一行，以便插入数据。其中一个标记填充下拉菜单。我需要从下拉列表中获取值，然后在ajax调用中返回php页面，以便将数据插入数据库。我尝试的所有操作都返回了未定义的位置ID

我在帖子中得到一个500错误，我认为这是由于var position_ID=$this.parents'tr'.find'.positionList'.val；，在插入函数中，未设置

HTML代码：

<html>
    <head>
      <script src='jquery-3.4.1.js' type='text/javascript'></script>
      <script src='script.js' type='text/javascript'></script>
    </head>
    <body>
        <button type="button" name="add" id="add">Add</button>
        <table id="dataTable">
            <tr>
                <th>Last Name</th>
                <th>First Name</th>
                <th>Location Number</th>
                <th>Position</th>
            </tr>
        </table>
    </body>
</html>

PHP代码：

<?PHP>
    $sql = "SELECT positionID, name FROM position";

    $result = mysqli_query($db,$sql);

    $position_arr = array();

    while( $row = mysqli_fetch_array($result) ){
        $positionID = $row['positionID'];
        $name = $row['name'];

        $position_arr[] = array("positionID" => $positionID, "name" => $name);
    }

    // encoding array to json format

    $JSON_array = json_encode($position_arr);
    echo $JSON_array;
?>
<?PHP>
    if(isset($_POST["last_name"], $_POST["first_name"], $_POST["location_num"], $_POST["position_ID"]))
    {
         $lastName = mysqli_real_escape_string($db, $_POST["last_name"]);
         $firstName = mysqli_real_escape_string($db, $_POST["first_name"]);      
         $locationNum = mysqli_real_escape_string($db, $_POST["location_num"]);
         $positionID = mysqli_real_escape_string($db, $_POST["position_ID"]);

         $sqlInsertEmployee = "INSERT INTO employee(lastName, firstName, positionID, locationID) SELECT ?, ?, positionID, locationID from location join position p on p.positionID = ? where number = ?";
         $stmtInsertEmployee = mysqli_prepare($db,$sqlInsertEmployee);
         mysqli_stmt_bind_param($stmtInsertEmployee, "ssss", $lastName,$firstName,$positionID,$locationNum,);
         mysqli_stmt_execute($stmtInsertEmployee);
         mysqli_stmt_close($stmtInsertEmployee);
    }   
?>

脚本代码：

$('#add').click(function(){
       var html = '<tr>';
       html += '<td contenteditable id="lastName"></td>';
       html += '<td contenteditable id="firstName"></td>';
       html += '<td contenteditable id="locationNum"></td>';
       html += '<td contenteditable id="positionID"><select class="positionList"><option></option></select>';   

       $(document).ready(function() {
              var data
              $.ajax({
                dataType: 'json',
                url: 'get-position.php',
                data: data,
                success: function(data) {
                    // begin accessing JSON data here
                  console.log(data)
                  //data = jQuery.parseJSON(data);
                  var html_to_append = '';
                  html_to_append += '<option value="0">-- Select One --</option>'
                  $.each(data, function(i, item) {
                    html_to_append += '<option value="' + item.positionID + '">' + item.name + '</option>';
                  });
                  $(".positionList").html(html_to_append);
                },
              })
            })


       html += '</td><td><button type="button" name="insert" id="insert">Insert</button></td>';
       html += '</tr>';
       $('#dataTable tr:first').after(html);
    });




    $(document).on('click', '#insert', function(){
       var last_name = $('#lastName').text();
       var first_name = $('#firstName').text();    
       var location_num = $('#locationNum').text();

       var position_ID = $(this).parents('tr').find('.positionList').val();

       console.log(position_ID);

       if(first_name != '' && last_name != '' && location_num != '')
       {
        $.ajax({
         url:"insert.php",
         method:"POST",
         data:{last_name:last_name, first_name:first_name, location_num:location_num, position_ID:position_ID},
         success:function(data)
         {
          $('#alert_message').html('<div class="alert alert-success">'+data+'</div>');
          $('#dataTable').DataTable().destroy();
          fetch_data();

         }
        });
        setInterval(function(){
         $('#alert_message').html('');
        }, 5000);
       }
       else
       {
        alert("All Fields is required");
       }
     });

用于获取元素的值

还要注意@Kaka Sarmah是正确的。即使这样也不行，因为您正在创建具有相同ID的多个元素。ID必须是唯一的。试着给它上课

html += '<td contenteditable class="positionID"><select class="positionList"><option></option></select>';

我建议您提供一个ID，以便我们能更好地帮助您。您的选择框有一个ID，每次您添加一行时，该ID都会与该行一起再次添加，并且作为您，该ID应该是唯一的。@k3llydev我现在添加了更多详细信息。如何查看位置\u ID的值？我尝试了一个console.logposition\u ID，但它没有显示任何内容。我在控制台中看到的只是帖子上的一个500错误。没关系……我是用调试器得到的。正在设置位置_ID的值。看起来可能是AJAX调用的问题。有什么想法吗？如果post请求中出现500个错误，这意味着您的服务器正在响应内部服务器错误。问题不在于请求，而在于它没有从服务器获取任何信息。php是否应该发送响应？如果您试图从服务器向客户端获取数据，那么是的。看起来您正试图实现php脚本的双重用途。将任务分解为两个单独的脚本。一个用于获取数据，另一个用于将数据发回服务器。

var position_ID = $(this).parents('tr').find('.positionList').val();