Cannot read the database when using Jquery, Ajax to submit the form without refreshing the page

Question

Cannot read the database when submitting the form without refreshing the page. It's okay to just use php to return straight. But it cannot be read from the database. I searched a lot on this topic. But I could not find a solution. As a beginner, I ask for help from all the specialists here.

this is the js code:

 $(document).ready(function(){ $("#createGuestForm").submit(function(event){ submitForm(); return false; }); }); function submitForm(){ $.ajax({ type: "POST", url: "individual_orders.php", cache:false, data: $('form#createGuestForm').serialize(), success: function(response){ $("#myAjax_one").html(response) $("#indivi_modal1").modal('show') $("#createGuestForm")[0].reset(); }, error: function(){ alert("Error"); } }); }

 <form method="post" id = "createGuestForm" role="form"> <div class="modal-body"> <div class="alert alert-success result" id="myAjax_one"></div> <div class="form-inline"> <input type="text" name="name" id="fname" tabindex="1" class="form-control my-1 mr-sm-1" placeholder="name" value="" required> <input type="phone" name="phone" id="phone" tabindex="1" class="form-control my-1 mr-sm-1" placeholder="TEL: 87772228844" value="" required> </div> <div class="form-inline"> <input type="text" name="username" id="username" tabindex="1" class="form-control my-2 mr-sm-1" placeholder="Login-id" value="" readonly> <label for="cityFormControlSelect1"></label> <select class="form-control form-control my-2 mr-sm-1" id="cityFormControlSelect1" name="city" required> <option selected hidden value="">city...</option> <option value="1">city1</option> </select> </div> <hr> <div class="form-group"> <input type="email" name="email" id="register_email2" tabindex="3" class="form-control" placeholder="Email" value=""> </div> <div class="form-group"> <input type="address" name="address" id="Address" tabindex="3" class="form-control" placeholder="Мекен-жайы (Міндетті емес)" value=""> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="submit" class="btn btn-primary" name="register-submit" id="indi_save_btn1" form="createGuestForm">Save</button> </div> </form>

Answer 1

Your jQuery code has an error, rectify it first.

function submitForm(){
     $.ajax({
        type: "POST",
        url: "individual_orders.php", //You have missed quates here....
        cache:false,
        data: $('form#createGuestForm').serialize(),
        success: function(response){
            $("#myAjax_one").html(response)
            $("#indivi_modal1").modal('show')
            $("#createGuestForm")[0].reset();
        },
        error: function(){
            alert("Error");
        }
    });
}