Question

我有以下用于bootstrap模态窗口的HTML代码

<div id="userModal" class="modal fade">
    <div class="model-dialog">
        <form method="post" id="user_form">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Add User</h4>
                </div>
                <div class="modal-body">
                    <label>Enter First Name</label>
                    <input type="text" name="first_name" id="first_name" class="form-control" />
                    <br />
                    <label>Enter Last Name</label>
                    <input type="text" name="last_name" id="last_name" class="form-control" />
                    <br />
                    <label>Enter Email</label>
                    <input type="text" name="email" id="email" class="form-control" />
                </div>
                <div class="modal-footer">
                    <input type="submit" name="action" class="btn btn-success" value="Add" />
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </form>
    </div>
</div>

当我在php控制器中执行以下操作时

print_r $_POST

它只打印first_name，last_name和email。

不打印动作。所以行动没有发布..为什么？

EDIT 这是我的全部观点..我正在使用带有ajax crud的数据表

<html>
    <head>
        <title><?php echo $title; ?></title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
        <script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
        <script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
        <link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" />
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

        <style>  
           body  
           {  
                margin:0;  
                padding:0;  
                background-color:#f1f1f1;  
           }  
           .box  
           {  
                width:900px;  
                padding:20px;  
                background-color:#fff;  
                border:1px solid #ccc;  
                border-radius:5px;  
                margin-top:10px;  
           }  
        </style>  
    </head>

    <body>
        <div class="container box">
            <h3 align="center"><?php echo $title; ?></h3><br />
            <div class="table-responsive">
                <br />
                <button type="button" data-toggle="modal" data-target="#userModal" class="btn btn-info btn-lg">Add</button>
                <br /><br />
                <table id="user_data" class="table table-bordered table-striped">
                    <thead>
                        <tr>
                            <th width="20%">First Name</th>
                            <th width="20%">Last Name</th>
                            <th width="40%">Email</th>
                            <th width="10%">Edit</th>
                            <th width="10%">Delete</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </body>
</html>

<div id="userModal" class="modal fade">
    <div class="model-dialog">
        <form method="post" id="user_form">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Add User</h4>
                </div>
                <div class="modal-body">
                    <label>Enter First Name</label>
                    <input type="text" name="first_name" id="first_name" class="form-control" />
                    <br />
                    <label>Enter Last Name</label>
                    <input type="text" name="last_name" id="last_name" class="form-control" />
                    <br />
                    <label>Enter Email</label>
                    <input type="text" name="email" id="email" class="form-control" />
                </div>
                <div class="modal-footer">
                    <button type="submit" name="action" class="btn btn-success" value="Add">Add</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </form>
    </div>
</div>

<script type="text/javascript" language="javascript" >  
$(document).ready(function(){  
      var dataTable = $('#user_data').DataTable({  
           "processing":true,  
           "serverSide":true,  
           "order":[],  
           "ajax":{  
                url:"<?php echo base_url() . 'crud/fetch_user'; ?>",  
                type:"POST"  
           },  
           "columnDefs":[  
                {  
                     "targets":[0, 3, 4],  
                     "orderable":false,  
                },  
           ],  
      });

      $(document).on('submit', '#user_form', function(event){
          event.preventDefault();
          var firstName = $('#first_name').val();
          var lastName = $('#last_name').val();
          var email = $('#email').val();
          function isValidEmailAddress(emailAddress) {
            var pattern = /^([a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+(\.[a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+)*|"((([ \t]*\r\n)?[ \t]+)?([\x01-\x08\x0b\x0c\x0e-\x1f\x7f\x21\x23-\x5b\x5d-\x7e\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|\\[\x01-\x09\x0b\x0c\x0d-\x7f\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))*(([ \t]*\r\n)?[ \t]+)?")@(([a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.)+([a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.?$/i;
            return pattern.test(emailAddress);
          };

          if(!isValidEmailAddress(email)){
              alert("Invalid Email Address");
              return false;
          }

          if(firstName!='' && lastName!=''){
              $.ajax({
                  url:"<?php echo base_url() . 'crud/user_action'?>",
                  method:"POST", 
                  data:new FormData(this),
                  contentType:false,
                  processData:false,
                  success:function(data){
                      alert(data);
                      $('#user_form')[0].reset();
                      $('#userModal').modal('hide');
                      dataTable.ajax.reload();
                  }  
              });
          }

          else{
              alert("Both first name and last name are required");
          }
      });  
 }); 
 </script>

Answer 1

您必须在表单标记中使用操作，例如..

filter:none;

当你打印$ _POST时，你永远不会看到它的动作。

Answer 2

肯定会有效

<div id="userModal" class="modal fade">
<div class="model-dialog">
    <form method="post" id="user_form" action="url">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Add User</h4>
            </div>
            <div class="modal-body">
                <label>Enter First Name</label>
                <input type="text" name="first_name" id="first_name" class="form-control" />
                <br />
                <label>Enter Last Name</label>
                <input type="text" name="last_name" id="last_name" class="form-control" />
                <br />
                <label>Enter Email</label>
                <input type="text" name="email" id="email" class="form-control" />
            </div>
            <div class="modal-footer">
                <input type="submit" name="submit_action" class="btn btn-success" value="Add" />
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </form>
</div>

Answer 3

而不是这个。

              $.ajax({
              url:"<?php echo base_url() . 'crud/user_action'?>",
              method:"POST", 
              data:new FormData(this),
              contentType:false,
              processData:false,
              success:function(data){
                  alert(data);
                  $('#user_form')[0].reset();
                  $('#userModal').modal('hide');
                  dataTable.ajax.reload();
              }  
          });

这样做。

          var data = 'firstName='+ firstName  & 'lastname='+ lastname 
          & 'email='+ email;
          $.ajax({
              url:"<?php echo base_url() . 'crud/user_action'?>",
              method:"POST", 
              data:data,
              contentType:false,
              processData:false,
              success:function(data){
                  alert(data);
                  $('#user_form')[0].reset();
                  $('#userModal').modal('hide');
                  dataTable.ajax.reload();
              }  
          });

输入类型=＆＃34;提交＆＃34;值不会在bootstrap模式中发布

3 个答案: