时间戳

首页 > 解决方案 > 在具有相同类的多个元素上使用 AJAX/jquery 向 MySQL 添加记录

php - 在具有相同类的多个元素上使用 AJAX/jquery 向 MySQL 添加记录

问题描述

我是新来的，我在使我的代码正常工作时遇到了一些困难。希望你们能帮助我。我以表格格式在模式框中显示来自 MySQL 的记录。每行都有自己的添加（+）按钮，通过 php 循环生成，该按钮显示应该输入的记录，使用 jquery on click 事件和 AJAX 添加到不同的表中。每个 td 行都提供了一个类名为“idKont”的输入字段，但单击 + / 添加按钮后只会添加第一个字段。

$('#add_kontpers').on("click", function(e) {

 e.preventDefault();


var ptId = $('#idAj').text();   // ID of the customer that will be passed
var idKont = $('.idKont').val(); // ID of the contact person 

$.ajax ({

      url: "folder/insert_data.php",
      method:"POST",
      data: 
          {
              id: ptId,
              idKont: idKont
          },

      dataType:'text',
      success: function(result) {
                //$('#myModal').modal('hide'); 
                $('#alert_modal').append( '<div class="alert alert-success">Success</div>' ).fadeIn(1000).fadeOut(4000);
            }

      })

})

这是带有 PHP 的 HTML 代码：

                          <!-- Modal content-->
  <div class="modal-content">
    <div class="modal-header" style="padding:10px 50px;">
      <p><span class="glyphicon glyphicon-lock"></span> Choose Contact Person</p>
      <button type="button" class="close" data-dismiss="modal">&times;</button>
    </div>
    <div class="modal-body" style="padding: 40px 50px;">
      <form role="form" method="post">

            <div id="alert_modal"></div>

                <table class="table table-responsive">
                  <thead class="thead-light">
                    <tr>
                      <th>ID</th>
                      <th>Vorname</th>
                      <th>Name</th>
                      <th>Tel</th>
                      <th>Mobil</th>
                    </tr>
                  </thead>
                  <tbody> 

                    <?php

                        try {

                        $stmt = $connser->prepare("SELECT ID, Vorname, Name, Tel, Mobil FROM Contactperson ORDER BY ID DESC");

                        $stmt->execute();

                                           while ($row = $stmt->fetch()) {

                                               $kontID = $row['ID']; 

                    ?>                                 

                                                    <tr>
                                                    <td><?php echo $row['ID']; ?></td>
                                                    <td><?php echo $row['Vorname']; ?></td>
                                                    <td><?php echo $row['Name']; ?></td> 
                                                    <td><?php echo $row['Tel']; ?></td>
                                                    <td><?php echo $row['Mobil']; ?></td>
                                                    <td><input class="idKont" value="<?php echo $kontID; ?>" type="hidden"  /></td>
                                                    <td><button type="submit" class="btn btn-success add_kontpers">+</button></td>
                                                    </tr>


                    <?php    
                                           }
                        }

                        catch(PDOException $e) {

                            echo "Error";
                            //echo "Error: " . $e->getMessage();
                            exit;

                        }

                    ?>

                  </tbody>
              </table>

      </form>
    </div>
    <div class="modal-footer">
      <button type="submit" class="btn btn-danger btn-default pull-left" data-dismiss="modal">Cancel</button>
    </div>
  </div>

</div>

模态框应该保持打开状态，但是如果我单击顶部的第一个元素，则只会添加这个元素。我希望有机会单击列表中的一个位置以将其添加到表格中，第二个位置，依此类推，但是如果我单击其他按钮，那么第一个按钮将关闭，并且网站重新加载。任何帮助或正确方向的提示都将受到高度赞赏。

标签： phpjquery

解决方案

两件事，首先你不能重用相同的 ID，并且通过add_kontpers循环，你将重用它。

因此，首先，将其更改为一个类并且idAj在提供的代码中不存在。

<button type="submit" class="btn btn-success add_kontpers">

然后在您的 jQUERY 中进行此更改

$('.add_kontpers').on("click", function(e) {

 e.preventDefault();

var ptId = $('#idAj').text();   ?????????????????????
var idKont = $(this).parents("tr").find('.idKont').val(); // ID of the contact person

推荐阅读