Having problem submitting a form without reload using jquery ajax

Question

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

detail_customer.php

<?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 class="recent-orders cust_det ">
    <h2> Customer Detail</h2>
    <div class="customer_detail">
        <form id="form-submit" action="./inc/detail_customer.php
        " method="POST" class="c_form animate__animated animate__fadeIn">



            <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 class="row">
                <div class="c_detail">
                    <label for="" class="form-labels">Name</label>
                    <input type="text" name="cat_id" value="<?php echo $category_id  ?>" id="cat_id">
                </div>
                <div class="c_detail">
                    <label for="" class="form-labels">Contact</label>
                    <input type="text" name="quest_t" value="<?php echo $quest_title  ?>" id="quest_t">
                </div>
                <div class="c_detail">
                    <label for="" class="form-labels">City</label>
                    <input type="text" name="" id="">
                </div>
            </div>
            <div class="row">
                <div class="c_detail">
                    <label for="" class="form-labels">Name</label>
                    <input type="text" name="" id="">
                </div>

                <div class="c_detail">
                    <label for="" class="form-labels">Contact</label>
                    <input type="text" name="" id="">
                </div>
                <div class="c_detail">
                    <label for="" class="form-labels">City</label>
                    <input type="text" name="" id="">
                </div>
            </div>
            <div class="row">
                <input name="submit" type="hidden" />
                <input class="btn-primary submit-btn" type="submit" name="" value="Submit">
            </div>
        </form>
    </div>
</div>

JS Code index.js

$("#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 class="recent-orders cust_det ">
    <h2> Customer Detail</h2>
    <div class="customer_detail">
        <form id="form-submit" action="./inc/detail_customer.php" method="POST"
            class="c_form animate__animated animate__fadeIn">



            <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 class="row">
                <div class="c_detail">
                    <label for="" class="form-labels">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 class="c_detail">
                    <label for="" class="form-labels">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 class="c_detail">
                    <label for="" class="form-labels">City</label>
                    <input type="text" name="" id="">
                </div>
            </div>
            <div class="row">
                <div class="c_detail">
                    <label for="" class="form-labels">Name</label>
                    <input type="text" name="" id="">
                </div>

                <div class="c_detail">
                    <label for="" class="form-labels">Contact</label>
                    <input type="text" name="" id="">
                </div>
                <div class="c_detail">
                    <label for="" class="form-labels">City</label>
                    <input type="text" name="" id="">
                </div>
            </div>
            <div class="row">
                <input name="submit" type="hidden" />
                <input class="btn-primary submit-btn" type="submit" name="" value="Submit">
            </div>
        </form>
    </div>
</div>

Shouldn't you be using the . concatenation operator for combining PHP variables and strings? title = ' . $quest . '? — Kostas Minaidis, May 01 '22 at 00:03
No bro its not necessary. It works well and query is good because i have checked the query without ajax — Muhammad Uzair, May 01 '22 at 00:06
it only problems when we try to submit it using ajax and no reload — Muhammad Uzair, May 01 '22 at 00:07
To prevent form from default reload and make `e.preventDefault()` work you need to add `e` to the function `function(e) { e.preventDefault(); ...` — Mohamed-Yousef, May 01 '22 at 01:54
Please do not "Throw code" in like your HTML Form which is a copy/paste from a Contact Form you found somewhere and just changed a couple of inputs leaving "Dead HTML" behind... Also where do you set $quest_id? Your naming etc is very confusing. — TimBrownlaw, May 01 '22 at 09:02
I am getting question id through $_GET because i want to use it in WHERE clause while updating form — Muhammad Uzair, May 01 '22 at 09:23
Please add the filenames along with the extensions next to the code, so that we understand where each code snippet can be found. — Kostas Minaidis, May 01 '22 at 13:23
You still need to remove all that extra "JUNK" Html in your form and rename your labels to something sensible. — TimBrownlaw, May 02 '22 at 01:14

score 1 · Answer 1 · edited May 05 '22 at 08:34

1

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.

edited May 05 '22 at 08:34

TimBrownlaw

5,457
3
24
28

answered Apr 30 '22 at 23:35

Kostas Minaidis

4,681
3
17
25

I have editted question with new code and it still not works :( – Muhammad Uzair Apr 30 '22 at 23:43
An input with type submit is still not sending the name=submit key value pair – Kostas Minaidis Apr 30 '22 at 23:58
Add an input with type="hidden" and name="submit" and check again @MuhammadUzair – Kostas Minaidis Apr 30 '22 at 23:59
Still not working – Muhammad Uzair May 01 '22 at 00:01
Code updated above with changes. – Muhammad Uzair May 01 '22 at 00:02
There is already a Submit button in the Form with a Blank Name. So why would adding a "hidden" input with a name of "submit" be a good idea? Just change the existing submit input name="" to name="submit". – TimBrownlaw May 02 '22 at 01:11
1

An input element with the `type` attribute set to submit, does not actually submit the name key/value pair. Since the PHP file was checking to see whether a name="submit" is being submitted, I suggested that he try this name attribute on another type of input element just to receive the key/value pair on the backend. This was meant as a quick debuggin advice. Further refactoring is needed on many parts of the code, but we have to start somewhere. @TimBrownlaw – Kostas Minaidis May 02 '22 at 07:08

score 0 · Answer 2 · answered Apr 30 '22 at 23:30

0

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

answered Apr 30 '22 at 23:30

Blunt Jackson

616
4
17

i have replaced button with but it is still not working with neither return false nethier by changing the button – Muhammad Uzair Apr 30 '22 at 23:40

score 0 · Answer 3 · answered May 02 '22 at 17:13

0

Issue has been solved. By changing path and then putting path of js file again.

answered May 02 '22 at 17:13

Muhammad Uzair

79
2
8

Having problem submitting a form without reload using jquery ajax

3 Answers3