Ajax表单提交+模式

Question

So the problem when I click on submit it gives me this + no data is inserted into the db :

Screen shot of modal

I don't see any errors in the console.

my ajax code :

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

my form + modal :

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

I have the add query in a separate file called add_c.PHP

so I have tried several answers from a lot of questions but I didn't manage to get something useful.

The PHP code in add_c.php :

Php code - pastebin

My knowledge is very small about ajax so I appreciate any help.

Answer 1

I tried your code, and the php file retrieves this post array

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

your php code:

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

add_course nevers gets posted, so it will never come into the if. Another issue is your form gets submitted twice the way you build it.

Change the button type into button, not submit. You already have a event listener on the button ;)

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