ajax表单提交+模态

时间:2018-04-13 16:01:54

标签: php ajax

所以当我点击提交它的问题给了我这个+没有数据插入到db:

Screen shot of modal

我在控制台中没有看到任何错误。

我的ajax代码:

<script type="text/javascript">
$(document).ready(function () {
    $("#lmao").on("submit", function(e) {
        var postData = $(this).serializeArray();
        var formURL = $(this).attr("action");
        $.ajax({
            url: formURL,
            type: "POST",
            data: postData,
            success: function(data, textStatus, jqXHR) {
                $('#add_data_Modal .modal-header .modal-title').html("Result");
                $('#add_data_Modal .modal-body').html(data);
                $("#submitForm").remove();
            },
            error: function(jqXHR, status, error) {
                console.log(status + ": " + error);
            }
        });
        e.preventDefault();
    });

    $("#submitForm").on('click', function() {
        $("#lmao").submit();
    });
});
</script>

我的表格+模态:

<div  id="add_data_Modal"class="modal fade">
      <div class="modal-dialog">
           <div class="modal-content">
                <div class="modal-header">
                     <button type="button" class="close" data-dismiss="modal">&times;</button>
                     <h4 class="modal-title">Add mew course</h4>
                </div>
                <div class="modal-body">
                  <div class="block-content block-content-narrow">
                      <form id="lmao"class="js-validation-courses form-horizontal push-10-t" data-async data-target="#add_data_Modal" action="add_c.php" method="post">

                      <div class="form-group">
                              <div class="col-xs-12">
                                  <div class="form-material">
                                      <input class="form-control" type="text" id="course_title" name="course_title" >
                                      <label for="material-email">course title</label>
                                  </div>
                              </div>
                          </div>
                          <div class="form-group">
                                  <div class="col-xs-12">
                                      <div class="form-material">
                                          <input class="form-control" type="text"  id="course_cord"name="course_cord" >
                                          <label for="material-email">Course cord</label>
                                      </div>
                                  </div>
                              </div>
                              <div class="form-group">
                                      <div class="col-xs-12">
                                          <div class="form-material">
                                              <input class="form-control" type="text"  id="course_hours"name="course_hours" >
                                              <label for="material-email">hours </label>
                                          </div>
                                      </div>
                                  </div>
                                  <div class="form-group">
                                          <div class="col-xs-12">
                                              <div class="form-material">
                                                  <input class="form-control" type="text" id="course_price" name="course_price" >
                                                  <label for="material-email">price</label>
                                              </div>
                                          </div>
                                      </div>
                          <div class="form-group">
                              <div class="col-sm-9">
                                  <button class="btn btn-sm btn-primary" name="add_course" id="submitForm" type="submit">Add course</button>
                              </div>
                          </div>
                        </form>

                      </div>
                  </div>


                </div>
                  </div>

                </div>

我在一个名为add_c.PHP

的单独文件中添加了查询

所以我从很多问题中尝试了几个答案,但我没有设法得到一些有用的东西。

add_c.php中的PHP代码:

Php code - pastebin

我对ajax的了解非常少,所以我感谢任何帮助。

1 个答案:

答案 0 :(得分:0)

我尝试了你的代码,php文件检索了这个帖子数组

Array ( [course_title] => test [course_cord] => tet [course_hours] => tet [course_price] => tt ) 

你的php代码:

if(isset($_POST['add_course'])) {

add_course nevers被发布,所以它永远不会进入if。另一个问题是你的表单会以你构建它的方式提交两次。

将按钮类型更改为按钮,而不是提交。你已经在按钮上有一个事件监听器;)

<button class="btn btn-sm btn-primary" name="add_course" id="submitForm" type="button">Add course</button>