个人中心
gpt4 book ai didi

javascript - 单击按钮时如何使用 Ajax 打开弹出表单提交？

转载 作者：行者123 更新时间：2023-12-01 02:19:28 24 4
gpt4 key购买 nike

我有一个包含数据的表格。在表格上方有一个添加按钮，单击该按钮时将显示一个表单。但我想要的是在单击添加按钮时在弹出窗口中显示该表单以提交。

我怎样才能做到这一点？

下面我附上了我的屏幕截图。

我的表格 View 代码:

<html>
<style>
#customers {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 100%;
}
#customers td, #customers th {
    border: 1px solid #ddd;
    padding: 3px;
}
#customers tr:nth-child(even){background-color: #f2f2f2;}
#customers tr:hover {background-color: #ddd;}
#customers th {
    padding-top: 3px;
    padding-bottom: 3px;
    text-align: left;
    background-color: #4CAF50;
    color: white;
}
</style>
<body>
<td><input type='button' name='add' class='add_class' value='Add'/></td>
<div id="created"></div>
<?php
$doc   = $display['hits']['hits'];
$html = '<table id = "customers" >
        <tr>
           <th>Id</th>
           <th>First_name</th>
           <th>Last_name</th>
           <th>Email</th>
           <th>Phone</th>
           <th>Address</th>
           <th>Password</th>
           <th>Status</th>
           <th>Createddate</th>
           <th>Updateddate</th>
           <th>File</th>
           <th>Edit</th>
           <th>Delete</th>

         </tr>';
foreach($doc as  $key => $value)
    {
        $html = $html."<tr>
                   <td>".$value['_source']['Id']."</td>
                   <td>".$value['_source']['First_name']."</td>
                   <td>".$value['_source']['Last_name']."</td>
                   <td>".$value['_source']['Email']."</td>
                   <td>".$value['_source']['Phone']."</td>
                   <td>".$value['_source']['Address']."</td>
                   <td>".$value['_source']['Password']."</td>
                   <td>".$value['_source']['Status']."</td>
                   <td>".$value['_source']['Createddate']."</td>
                   <td>".$value['_source']['Updateddate']."</td>
                   <td>".$value['_source']['File']."</td>
                   <td><input type='button' name='Edit' id='Edit' value='Edit'/></td>
                   <td><input type='button' name='Delete' id='Delete' value='Delete'/></td>

                </tr>";


}
$html = $html."</table>";

echo $html;
?>
</body>
</html>

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script>
         $(document).ready(function(){
            $('.add_class').click(function(){
                $("#created").toggle();
            });
         });
</script>

<script>
      $(document).ready(function(){
                $(".add_class").click(function(e) {
                    e.preventDefault();
                    $.ajax({
                        url  : "Crud_controller/Add",
                        data : '',
                        dataType: "HTML",
                                  success: function(response) {
                                    var result = $(response).find("body");
                                    $("#created").html(response);
                                    }
                        }).error(function() { alert("Something went wrong"); });

                });
                });
</script>

我的表单代码:

<!DOCTYPE html>
<html>
   <head>
      <title>Add Employee</title>
      <style>
         label
         {
         display:inline-block;
         width:100px;
         margin-bottom:10px;
         }
      </style>

   </head>
   <body>

      <h1>Add Employee</h1>
      <div id="add_div">

      <form method="post" id="add_form" action="Crud_controller/add">
         <label>ID:</label>
         <input type="text" name="Id" /><br/>
         <label>First Name:</label>
         <input type="text" name="First_name"/><br/>
         <label>Last Name:</label>
         <input type="text" name="Last_name"/><br/>
         <label>Email:</label>
         <input type="email" name="Email"/><br/>
         <label>Phone:</label>
         <input type="text" name="Phone"/><br/>
         <label>Address:</label>
         <input type="text" name="Address"/><br/>
         <label>Password:</label>
         <input type="password" name="Password"/><br/>
         <label>Status:</label>
         <input type="text" name="Status"/><br/>
         <label>CreatedDate:</label>
         <input type="text" name="Createddate"/><br/>
         <label>Updateddate:</label>
         <input type="text" name="Updateddate"/><br/><br/>
         <label>FileUpload:</label>
         <input name="File"  type="file" multiple="true"><br/><br/>  
         <input type="submit" name="submit" class="add" value="Insert"/>

</form>
</div>

</body>
</html>

enter image description here

最佳答案

您需要在 html 中添加引导模式。

    <html>
    <style>
    #customers {
        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
        border-collapse: collapse;
        width: 100%;
    }
    #customers td, #customers th {
        border: 1px solid #ddd;
        padding: 3px;
    }
    #customers tr:nth-child(even){background-color: #f2f2f2;}
    #customers tr:hover {background-color: #ddd;}
    #customers th {
        padding-top: 3px;
        padding-bottom: 3px;
        text-align: left;
        background-color: #4CAF50;
        color: white;
    }
    </style>
    <body>
    <td><input type='button' name='add' class='add_class' value='Add' data-toggle="modal" data-target="#myModal"/></td>
    <?php
    $doc   = $display['hits']['hits'];
    $html = '<table id = "customers" >
            <tr>
               <th>Id</th>
               <th>First_name</th>
               <th>Last_name</th>
               <th>Email</th>
               <th>Phone</th>
               <th>Address</th>
               <th>Password</th>
               <th>Status</th>
               <th>Createddate</th>
               <th>Updateddate</th>
               <th>File</th>
               <th>Edit</th>
               <th>Delete</th>

             </tr>';
    foreach($doc as  $key => $value)
        {
            $html = $html."<tr>
                       <td>".$value['_source']['Id']."</td>
                       <td>".$value['_source']['First_name']."</td>
                       <td>".$value['_source']['Last_name']."</td>
                       <td>".$value['_source']['Email']."</td>
                       <td>".$value['_source']['Phone']."</td>
                       <td>".$value['_source']['Address']."</td>
                       <td>".$value['_source']['Password']."</td>
                       <td>".$value['_source']['Status']."</td>
                       <td>".$value['_source']['Createddate']."</td>
                       <td>".$value['_source']['Updateddate']."</td>
                       <td>".$value['_source']['File']."</td>
                       <td><input type='button' name='Edit' id='Edit' value='Edit'/></td>
                       <td><input type='button' name='Delete' id='Delete' value='Delete'/></td>

                    </tr>";


    }
    $html = $html."</table>";

    echo $html;
    ?>

    <!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Add Employee</h4>
      </div>
      <div class="modal-body" id="created">
        <form method="post" id="add_form" action="Crud_controller/add">
         <label>ID:</label>
         <input type="text" name="Id" /><br/>
         <label>First Name:</label>
         <input type="text" name="First_name"/><br/>
         <label>Last Name:</label>
         <input type="text" name="Last_name"/><br/>
         <label>Email:</label>
         <input type="email" name="Email"/><br/>
         <label>Phone:</label>
         <input type="text" name="Phone"/><br/>
         <label>Address:</label>
         <input type="text" name="Address"/><br/>
         <label>Password:</label>
         <input type="password" name="Password"/><br/>
         <label>Status:</label>
         <input type="text" name="Status"/><br/>
         <label>CreatedDate:</label>
         <input type="text" name="Createddate"/><br/>
         <label>Updateddate:</label>
         <input type="text" name="Updateddate"/><br/><br/>
         <label>FileUpload:</label>
         <input name="File"  type="file" multiple="true"><br/><br/>  
         <input type="submit" name="submit" class="add" value="Insert"/>
      </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>
    </body>
    </html>

    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>

不要忘记在您的文件中包含 Bootstrap js 和 css。无需发送 AJAX 请求来获取表单 html。

关于javascript - 单击按钮时如何使用 Ajax 打开弹出表单提交？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49314635/

24 4 0
文章推荐： javascript - "saturation"globalCompositeOperation 不改变透明度？
文章推荐： javascript - 无法在 SVG 路径元素上执行单击事件
文章推荐： assembly - FLAGS/EFLAGS 是 clobber 列表的 "CC"(条件控制)的一部分吗？
文章推荐： javascript - 如何获取克隆元素的outerHTML？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com