Php 如何使用特定引导4卡的内容更新sql中的特定行？_Php_Jquery_Sql_Ajax_Bootstrap 4

Php 如何使用特定引导4卡的内容更新sql中的特定行？

php jquery sql ajax bootstrap-4

Php 如何使用特定引导4卡的内容更新sql中的特定行？,php,jquery,sql,ajax,bootstrap-4,Php,Jquery,Sql,Ajax,Bootstrap 4,我有以下数据库： |基金名称|基金描述|收到金额|实际金额| 使用PHP进行引导： <div class="card-deck"> <?php $sql = "SELECT * FROM fundraiser;"; $result = mysqli_query($conn,$sql); while($row = mysqli_fetch_as

我有以下数据库：

使用PHP进行引导：

<div class="card-deck">
        <?php 

            $sql = "SELECT * FROM fundraiser;";
                        $result = mysqli_query($conn,$sql);
                       while($row = mysqli_fetch_assoc($result)){

                            echo '<div class="card">
                            <img class="card-img-top" >
                                <div class="card-body text-center">
                            <h5 class="card-title">'.$row['fund_name'].'</h5>
                            <div class="card-text">

                             <p>'.$row['fund_description'].'</p>

                           <h6>Amount:'.$row['actual_amount'].'</h6>
                            <div class="progress">
                            <div class="progress-bar" role="progressbar" 
                            style="width:'.$row['amount_received'].'%;"aria- 
                            valuenow="0" aria-valuemin="0" aria- 
                            valuemax="1000">
                            </div>
                        </div>
                <div class="mt-2">
                 <button type="button" class="btn btn-md btn-primary" data- 
             toggle="modal" data-target="#exampleModalCenter"> Donate 
                </button>
                </div>


                                                 </div>

                                            </div>

                                         </div>';
                                }


                             ?>

                        </div>
                        <!-- Modal -->
    <div class="modal fade" id="exampleModalCenter" tabindex="-1" 
    role="dialog" aria-labelledby="exampleModalCenterTitle" aria- 
    hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLongTitle">Modal 
            title</h5>
          <button type="button" class="close" data-dismiss="modal" aria- 
           label="Close">
          <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
        <form>
        <div class="form-group">
        <label for="formGroupExampleInput">Enter Amount</label>
        <input type="number" class="form-control" id="formGroupExampleInput" 
        placeholder="Enter Amount">
        </div>
        <div class="form-group">
        <input type="submit" class="form-control btn btn-primary btn-small" 
         id="formGroupExampleInput" >
        </div>

                                    </form>
                                  </div>
                                </div>
                              </div>
                            </div>
                    </div>


情态动词
标题
&时代；
输入金额

在我上面的代码中，我从数据库中获取数据，并使用bootstrap 4显示募捐者。每个筹款者都使用卡片显示，每张卡片都有一个捐赠按钮。“捐赠”按钮链接到一个模式，该模式有一个向募捐者支付金额的表单

我的问题是如何区分正在付款的特定卡的“捐赠”按钮，以便我可以在数据库中为特定行的筹款人存储“收到的金额”字段？

您可以使用

数据id

存储每个筹款人的id。当用户单击按钮打开模式时，您将获得data-id的值。在模式表单中，我添加

来存储data-id。请尝试以下代码：

以下是php数组中数据的复制：

<?php 
$fundraiser = array( 
    array('id'=>1,'fundname'=>"Anyname","description"=>"About fund","actual_amount"=>50.00,'amount_receive'=>40),
    array('id'=>2,'fundname'=>"Anyname2","description"=>"About fund3","actual_amount"=>100.00,'amount_receive'=>90),
    array('id'=>3,'fundname'=>"Anyname3","description"=>"About fund3","actual_amount"=>20.00,'amount_receive'=>10)
);
?>

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <div class="card-deck">
        <?php 
    foreach($fundraiser as $key=>$val):
          echo '<div class="card">
                <img class="card-img-top" >
                <div class="card-body text-center">
                    <h5 class="card-title">'.$val['fundname'].'</h5>
                       <div class="card-text">
                          <p>'.$val['description'].'</p>
                           <h6>Amount:'.$val['actual_amount'].'</h6>
                           <div class="progress">
                               <div class="progress-bar" role="progressbar" 
                            style="width:'.$val['amount_receive'].'%;"aria- 
                            valuenow="0" aria-valuemin="0" aria- 
                            valuemax="1000">
                                </div>
                            </div>
                          <div class="mt-2">
                             <button type="button" class="btn btn-md btn-primary fundid" data-toggle="modal" data-target="#exampleModalCenter" data-id="'.$val['id'].'"> Donate 
                             </button>
                        </div>
                     </div>
             </div>
        </div>';
      endforeach; ?>
</div>
  <!-- Modal -->
  <div class="modal fade" id="exampleModalCenter" role="dialog">
    <div class="modal-dialog">    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
            <h4 class="modal-title">Modal Header</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>              
        </div>
        <form method="POST" action='updatedb.php'>
        <div class="modal-body">            
                <div class="form-group">
                    <label for="formGroupExampleInput">Enter Amount</label>
                        <input type="number" name="amount" class="form-control" id="formGroupExampleInput" placeholder="Enter Amount">
                </div>    
                <input type="hidden" name="fundid" id="fundid">                      
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="submit" class="form-control btn btn-primary btn-small" id="formGroupExampleInput">Submit</button>
        </div>
    </form>
        </div>
      </div>      
    </div>
  </div>
</div>
</body>
</html>


引导示例
模态头
&时代；
输入金额
接近
提交

获取数据id并存储在表单中

<script type="text/javascript">
    $('.fundid').on('click', function (e) {
       $('#fundid').val($(this).attr("data-id"));       
    });


$（'.fundid'）。在（'click'，函数（e）上{
$（'#fundid'）.val（$（this.attr（“数据id”））；
});

我们不想在关闭模式对话框时留下数据id的痕迹

    $('#exampleModalCenter').on('hidden.bs.modal', function () {
        $('#fundid').val('');
    });
</script>

$（'exampleModalCenter'）.on（'hidden.bs.modal'，function（）{
$（'#fundid'）.val（''）；
});

提交表单时，它会将数据提交到updatedb.php。在updatedb.php中，要获取表单数据：

updatedb.php的内容

 <?php
 $fundid = $_POST['fundid'];
 $amount = $_POST['amount'];
 echo "ID=>".$fundid."<br> Amount=>".$amount;
 ?>

我还有一个疑问，当我们在modal中提交表单时，是否将此数据id分配给modal。因为数据必须转到sql中的特定行。为什么不自己试试呢？然后，如果它不起作用，您可以在此处与错误共享…我收到此错误“无法读取未定义的属性“val”。我在重复php中的卡片。当我按下按钮时，会出现以下错误。我已定义了数据id，但它显示了错误。实际上，我已在脚本“$”（“#fundid”）.attr（'name'）.val（$（this.attr（'data id”）；”中更改了此项，在我的php中，剩下的一切都是一样的。我正在尝试将数据id值分配给基金id元素的名称。是否使用ajax提交表单？