Submit Basic Form Using jQuery Ajax - php

Question

I've got a basic html form and a div under it called "response", the user enters a password, the script should check the database to find the username (works fine) then print the username in the "response" div under the form for further processing, but I cannot get the jQuery/Ajax bit working to submit the form and query to the database behind the scenes (I'm quite new to jQuery).
I've got this so far, can anyone help get it working please?
php (checkuser.php):
$pass = $_POST['password'];
echo $pass;
$con = new mysqli("--IP--", "--USER--", "--PASS--", "--DB--");
if (mysqli_connect_errno()) {
echo "A problem has occured, please come back later.";
exit();
}
if ($stmt = $con -> prepare("SELECT `username` FROM --DB-- WHERE `password`=?")) {
$stmt -> bind_param("s", $pass);
$stmt -> execute();
$stmt -> bind_result($user);
while ($stmt -> fetch()) {
echo "welcome ".$user;
}
return $user;
$stmt -> close();
}
$con -> close();
html:
<form id="pass_form" action="post">
<input id="form_pass" type="text" name="password" placeholder="Password Goes Here"><br><br>
<input id="form_submit" class="submit_btn" type="submit" value="Submit">
</form>
<div id="response"></div>
jQuery (in head):
$(function() {
$("#form_submit").click(function() {
$.ajax({
type: "POST",
url: "http://--SITE--/--FOLDER--/checkuser.php",
data: "password=" + $("#form_pass").val(),
success: function() {
// Not sure what to do here
}
});
});
});

Answer 1

You need to prevent the default form behavior and display the response from ajax request in the #response div
$(function() {
$("#form_submit").click(function(e) {
e.preventDefault();
$.ajax({
type: "POST",
url: "http://--SITE--/--FOLDER--/checkuser.php",
data: "password=" + $("#form_pass").val(),
success: function(result) {
$('#response').html(result);
}
});
});
});

Answer 2

Everything goes where you are Not sure what to do here.
success: function(response) {
alert(response);
}
Also, I am not sure why you have a return $user in your php. Comment that line out and test the above-mentioned code.
So response holds what the php echoed. You can now use that to do whatever you wish to do.

Answer 3

We rarely let the submit button do it's work. We kind of like to use it as a mere button while it is more than a button. So since you may be new let me introduce you to the submit button and event. The button is used to submit the form:
$(function() {
$("#pass_form").submit(function(e) {
e.preventDefault();
$.ajax({
type: "POST",
url: "http://--SITE--/--FOLDER--/checkuser.php",
data: "password=" + $("#form_pass").val(),
success: function(result) {
$('#response').html(result);
}
});
});
});
So we bind the a submit event handler to the form and the submit button takes it from there.

Answer 4

$("#form_submit").click(function(){
$("#response").show();
$.post( "http://--SITE--/--FOLDER--/checkuser.php", {
password: $("#form_pass").val(),
}).done(function( data ) {
$( "#response" ).html( data );
});
});
This will return whatever output your targeting page is going to output.
you don't really need a form to do this process