堆棧內存溢出
  簡體   English   中英

單擊按鈕時如何打開使用Ajax提交的彈出表單？

[英]How to open popup form submit with Ajax when click a button?

 原文  2018-03-16 06:40:40  7   2    javascript/ jquery/ ajax

問題描述

我有一張數據表。 在表格上方，我有一個添加按鈕，當單擊該按鈕時，將顯示一個表單。 但是我想要的是在單擊添加按鈕時在彈出窗口中顯示該表單以提交。

我怎樣才能做到這一點？

下面附上我的截圖。

我的表格視圖代碼： 

<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>

在此處輸入圖片說明

2 個解決方案

解決方案1
 1  2018-03-16 06:49:36

您需要在HTML中添加bootsrap模態。 

    <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表單。

解決方案2
 1  2018-03-16 06:50:12

基本上只使用模態（彈出窗口），然后將#add_div移到模態以及插入按鈕內。 然后在您的添加按鈕中添加一個事件，該事件將觸發模態，您的#add_div下面是如何僅使用純JavaScript來創建和觸發模態的附件鏈接。

https://www.w3schools.com/w3css/w3css_modal.asp

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 在表單驗證啟用提交按鈕后，如果單擊提交按鈕，使用 jQuery 打開模式彈出窗口？ 點擊打開彈出窗體，然后提交下載並關閉它！ 怎么樣？ 單擊提交按鈕時，Ajax 表單提交未捕獲錯誤 如何運行帶有自動單擊按鈕的表單提交ajax的功能 在 DataTable Edit 按鈕上打開一個彈出窗體單擊 在單擊同一按鈕時打開模型，然后提交表單 如何在單擊提交按鈕時顯示彈出窗口 如何在單擊按鈕時提交表單 當僅單擊特定的提交按鈕時，在彈出框中打開一個表單操作URL頁 如何在表單彈出窗口中將js添加到按鈕提交？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM