javascript - Why is this code showing anomalous behaviour? (form not submitted)

Question

I'm trying to submit a form using PHP and Ajax. But the problem is that sometimes it inserts one value, sometimes 2, sometimes all, and now it is inserting nothing. Why is it happening? How can I correct it?

Here's my code: Ajax

$(document).ready(function(){
$("button").click(function(){
$.ajax({
    url: "submitform.php",
    type: "POST",
    data: $("form").serialize(),
    success: function(data){
        alert("well");
    },
    error: function(){
            alert("Error");
            }
        });
    });
 });

HTML

<form id="signupform" name="form1" method="post" enctype="multipart/form-data">
                    <table>
                      <tr>
                        <td><input type="text" name="name" placeholder="Enter your name" required /></td>
                        <td rowspan="3"><div class="propic"><img id="imgid" src="images/dp.png" /></div>
                          <input id="imgInput" type="file" name="image"/></td>
                      </tr>
                      <tr>
                        <td><input type="text" name="username" placeholder="Enter username" required /></td>
                      </tr>
                      <tr>
                        <td><input id="digits" type="text" name="phone" maxlength="10" placeholder="Enter your phone no." required /></td>
                      </tr>
                      <tr>
                        <td><input type="password" name="password" maxlength="12" placeholder="Enter password" required /></td>
                        <td><input id="button" type="submit" name="submit" value="Sign Up" /></td>
                      </tr>
</table>
</form>

PHP

<?php
$conn=mysqli_connect("localhost", "root", "", "winkcage");
//$im=$_SESSION["pathsession"];
$nam=""; $usernam=""; $phon=""; $pass="";
$nam=$_POST["name"];
$usernam=$_POST["username"];
$phon=$_POST["phone"];
$pass=$_POST["password"];
$signquery="INSERT INTO signup(name, username, phone, password) VALUES('$nam', '$usernam', '$phon', '$pass')";
$signqueryrun=mysqli_query($conn, $signquery);
?>

NOTE: I don't want to insert image value right now. I'll insert it later when this problem is fixed.

Answer 1

You may have entered a ' quote and it killed your sql statement. This is called sql injection. To prevent sql injection you can use pdo prepared statements. You will also want to hash passwords to prevent people from stealling them if they get access to your database. Hashing password is a one way encryption that is easy to check.

$pdo = new PDO("mysql:host=$db_host;dbname=$DB_name", $user, $pass);
$sql = "INSERT INTO signup(name, username, phone, password) VALUES(':name', ':username', ':phone', ':pass')";
if ($con = $pdo->prepare($sql)) {
    $con->execute([
        ':name' => $_POST["name"],
        ':username' => $_POST["username"],
        ':phone' => $_POST["username"],
        ':pass' => $_POST["password"]
    ]);
}

As far as the html and javascript goes. Catch the submitted form with jquerys .submit() function.

$('form').submit(function(e){
        e.preventDefault();
        $.post('submit.php',$(this).serialize(),function(response){
            alert('complete');
        }).error(function(){
            alert('wrong');
        });
    });

This makes sure than any submit event triggers the ajax.