首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >如何使用特定引导4卡的内容更新sql中的特定行?

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

Stack Overflow用户
提问于 2018-06-14 04:34:18
回答 1查看 262关注 0票数 0

我有以下数据库:

fund_name,fund_description,amount_received,amount_received,actual_amount

用PHP引导:

代码语言:javascript
复制
<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>

在我上面的代码中,im从数据库获取数据并使用引导4显示募捐者。每个募捐者使用卡片显示,每一张卡片都有一个捐赠按钮。捐赠按钮链接到一个模式,其中有一个形式,以支付金额的筹款人。

我的问题是,如何区分特定卡的捐赠按钮,为之付款,这样我就可以将“amount_received”字段存储在数据库中,用于特定行的筹款活动。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-06-14 05:46:59

您可以使用data-id存储每个募捐者的id。当用户单击按钮打开模式时,您将得到数据id的值。在模态形式中,我添加了<input type="hidden" name="fundid" id="fundid">来存储数据id。尝试以下代码:

下面是php数组中数据的复制:

代码语言:javascript
复制
<?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:

代码语言:javascript
复制
<!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并将其存储在表单中。

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

当我们关闭模态对话框时,我们不想留下数据id的痕迹。

代码语言:javascript
复制
    $('#exampleModalCenter').on('hidden.bs.modal', function () {
        $('#fundid').val('');
    });
</script>

当您提交表单时,它将将数据提交给updatedb.php。在updatedb.php中,要获取表单数据:

updatedb.php含量

代码语言:javascript
复制
 <?php
 $fundid = $_POST['fundid'];
 $amount = $_POST['amount'];
 echo "ID=>".$fundid."<br> Amount=>".$amount;
 ?>
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50849665

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档