Submit form without reload using jQuery AJAX in PHP MySQL

php jquery mysql ajax login

19,869

Solution 1

If you are using ajax no need to use input type as submit use button.

$(document).ready(function() {
$("#signup").click(function(e) {
    e.preventDefault();
    $.ajax({
  type: 'POST',
  url: 'signup.php',
  data: $('form').serialize()
  success: function() {
    console.log("Signup was successful");
  }
  error: function() {
    console.log("Signup was unsuccessful");
  }
});
});

Also change here

$post_FirstName = $_POST['first']; // name is `first` not `firstname`

Solution 2

You have some brakes and parentheses not properly closed

function submit() {
    $("form").submit(function(e) {
        e.preventDefault();
        $.ajax({
      type: 'POST',
      url: 'signup.php',
      data: $('form').serialize(),
      success: function() {
        console.log("Signup was successful");
      },//here
      error: function() {
        console.log("Signup was unsuccessful");
      }
    });});//here
}

$(document).ready(function() {
    submit();
});

Solution 3

No need to call submit function. Just this will do, (you missed comma and closing tag):

<script>
  $("form").submit(function(e) {
    e.preventDefault();
    $.ajax({
      type: 'POST',
      url: 'signup.php',
      data: $('form').serialize(),
      success: function() {
        console.log("Signup was successful");
      }, //You missed this
      error: function() {
        console.log("Signup was unsuccessful");
      }
    });
  }); //You missed this
</script>

19,869

Author by

Ryan Hawdon

Updated on June 21, 2022

Comments

Ryan Hawdon almost 2 years

I have a basic signup/ login page that submits the data to the SQL database with php. However, I would like the page not to redirect on submission with help of jQuery AJAX (either successful or not).

This is what I currently have and it is not working. It doesn't show any error messages.

HTML - signup.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Signup</title>
    <meta charset="utf-8">
</head>
<body>
    <form>
        <table>
            <tbody>
                <tr>
                    <td>
                        <input type="text" name="first" placeholder="First Name" id="first">
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="text" name="last" placeholder="Last Name" id="last">
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="submit" value="Signup" id="signup">
                    </td>
                </tr>
            </tbody>
        </table>
    </form>
</body>
</html>

JavaScript - signup.js

function submit() {
    $("form").submit(function(e) {
        e.preventDefault();
        $.ajax({
            type: 'POST',
            url: 'signup.php',
            data: $('form').serialize(),
            success: function() {
                console.log("Signup was successful");
            },
            error: function() {
                console.log("Signup was unsuccessful");
            }
        });
    });
}

$(document).ready(function() {
    submit();
});

PHP - signup.php

<?php
  include_once "db_connect.php";

  $post_FirstName = $_POST['first'];
  $post_LastName = $_POST['last'];

  $addData = "INSERT INTO details (firstname, lastname) VALUES ('$post_FirstName', '$post_LastName')";

  if ($conn->query($addData) === TRUE) {
    echo "Working";
  } else {
    echo "Not working";
  }
?>

Here is the JSFiddle.

I hope you guys can help. Thanks in advance :)

Thamilhan about 8 years

document ready is needed if you are loading jQuery script after this function and moreover this fires event after button click.