Having problem submitting a form without reload using jquery ajax-CodePudding

When i submit form it doesnot update value in database mysql.Its a form written in php. here is my php and html. I want that the form should not reload and it must submit the changes in database without reloading the page and show preloader for 1 sec on submitting form. HTML,PHP AND ACTION of form: Here action is the current page where this form is avalilable

<?php


$server = "localhost";
$username = "root";
$pass = "";
$dbname = "stinkspolitics_pl";

$conn = mysqli_connect($server, $username, $pass, $dbname);



if (isset($_GET['detail_customer'])) {
    $quest_id = $_GET['detail_customer'];

    $get_quest = "SELECT * FROM questions WHERE quest_id = '$quest_id'";
    $getting_quest = mysqli_query($conn, $get_quest);

    while ($row = mysqli_fetch_assoc($getting_quest)) {
        $quest_title = $row['quest_title'];
        $category_id = $row['category_id'];
    }
}


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

    $quest_t = $_POST['quest_t'];

    $update = "UPDATE questions SET quest_title = '$quest_t' WHERE quest_id = '$quest_id'";
    $run_update = mysqli_query($conn, $update);
    if ($run_update) {
        echo 'hello';
    }
}

?>


<div >
    <h2> Customer Detail</h2>
    <div >
        <form id="form-submit" action="./inc/detail_customer.php
        " method="POST" >



            <div class='alert alert-success'>
                <strong>Success!</strong> Your question has been submitted.
            </div>


            <div class='alert alert-danger'>
                <strong>Sorry!</strong> Your question has not been submitted.
            </div>



            <div >
                <div >
                    <label for="" >Name</label>
                    <input type="text" name="cat_id" value="<?php echo $category_id  ?>" id="cat_id">
                </div>
                <div >
                    <label for="" >Contact</label>
                    <input type="text" name="quest_t" value="<?php echo $quest_title  ?>" id="quest_t">
                </div>
                <div >
                    <label for="" >City</label>
                    <input type="text" name="" id="">
                </div>
            </div>
            <div >
                <div >
                    <label for="" >Name</label>
                    <input type="text" name="" id="">
                </div>

                <div >
                    <label for="" >Contact</label>
                    <input type="text" name="" id="">
                </div>
                <div >
                    <label for="" >City</label>
                    <input type="text" name="" id="">
                </div>
            </div>
            <div >
                <input name="submit" type="hidden" />
                <input  type="submit" name="" value="Submit">
            </div>
        </form>
    </div>
</div>

JS Code

$("#form-submit").on("submit", function () {
    // e.preventDefault();
    var form = $(this);
    var formData = form.serialize();

    $.ajax({
      type: "POST",
      url: form.attr("action"),
      data: formData,
      success: function (data) {
        $(".alert-success").show();
        $(".alert-success").fadeOut(4000);
        console.log(data);
      },
      error: function (data) {
        $(".alert-danger").show();
        $(".alert-danger").fadeOut(4000);
        console.log(data);
      },
    });
    return false;
  });

Ajax Success Response But not updating data in mySQL

<div >
    <h2> Customer Detail</h2>
    <div >
        <form id="form-submit" action="./inc/detail_customer.php" method="POST"
            >



            <div class='alert alert-success'>
                <strong>Success!</strong> Your question has been submitted.
            </div>


            <div class='alert alert-danger'>
                <strong>Sorry!</strong> Your question has not been submitted.
            </div>



            <div >
                <div >
                    <label for="" >Name</label>
                    <input type="text" name="cat_id" value="<br />
<b>Warning</b>:  Undefined variable $category_id in <b>C:\xampp\htdocs\admin_panel\inc\detail_customer.php</b> on line <b>62</b><br />
" id="cat_id">
                </div>
                <div >
                    <label for="" >Contact</label>
                    <input type="text" name="quest_t" value="<br />
<b>Warning</b>:  Undefined variable $quest_title in <b>C:\xampp\htdocs\admin_panel\inc\detail_customer.php</b> on line <b>66</b><br />
" id="quest_t">
                </div>
                <div >
                    <label for="" >City</label>
                    <input type="text" name="" id="">
                </div>
            </div>
            <div >
                <div >
                    <label for="" >Name</label>
                    <input type="text" name="" id="">
                </div>

                <div >
                    <label for="" >Contact</label>
                    <input type="text" name="" id="">
                </div>
                <div >
                    <label for="" >City</label>
                    <input type="text" name="" id="">
                </div>
            </div>
            <div >
                <input name="submit" type="hidden" />
                <input  type="submit" name="" value="Submit">
            </div>
        </form>
    </div>
</div>

CodePudding user response：

Just return false after at the end of the method.

jQuery has its own way of ensuring "preventDefault()" and it is just returning false from the submit handler.

Full background on this here:

event.preventDefault() vs. return false

CodePudding user response：

The condition if (isset($_POST['submit'])) { will never evaluate to true, since there is no input element in the form with name="submit" (the button with name='submit' does not send the attribute by default).

Either change the condition:

if (isset($_POST['quest_t'])) { ...

Or, include an input element with name='submit', for example:

<input name="submit" type="hidden" />

Also, make sure to move the $_POST check at the beginning of the file and ensure that no other code will be evaluated in the PHP file (e.g. the rest of the HTML code) if a POST request has been received.