Submit form without reload using jQuery AJAX in PHP MySQL
<p>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).</p>

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

<p><strong><em>HTML - signup.html</em></strong></p>

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

<p><strong><em>JavaScript - signup.js</em></strong></p>

<pre><code>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();
});
</code></pre>

<p><strong><em>PHP - signup.php</em></strong></p>

<pre><code>&lt;?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-&gt;query($addData) === TRUE) {
    echo "Working";
  } else {
    echo "Not working";
  }
?&gt;
</code></pre>

<p>Here is the <a href="https://jsfiddle.net/fwgdt2pt/" rel="nofollow noreferrer">JSFiddle</a>.</p>

<p>I hope you guys can help. Thanks in advance :)</p>