Trying to get my register page posting the data to the database using Ajax and jQuery but having great difficulty.
I'm very new to ajax and cane seem to get my head around how to do this insert. Would be very grateful of any advice regarding how to do this. Im not sure if what i have got is even remotely close at the moment.
As current when I click the submit button the page refreshes but there is no change to the database.
*html code
<html>
<head>
<title>Register</title>
<link rel="stylesheet" type="text/css" href="../css/stylesheet.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="../js/validation.js"></script>
<script type="text/javascript" src="../js/registerpost.js"></script>
</head>
<body>
<div id="container">
<div id="mainContent")>
<form class="basic-grey" method="post">
<h1>Registration Form<span>Please complete all fields.</span></h1>
<p>
<label><span>First Name:</span>
<input name="firstname" id="firstname" type="text" size="40" maxlength="40" placeholder="First Name" required/>
</label>
<label><span>Surname:</span>
<input name="lastname" id="lastname" type="text" size="40" maxlength="40" placeholder="Surname" required/>
</label>
<label><span>Username:</span>
<input name="username" id="username" oninput="checkUsername();" type="text" size="40" maxlength="40" placeholder="Username" required/>
</label>
<label><span>Email:</span>
<input name="email" id="email" oninput="checkEmail();" type="email" size="40" maxlength="40" placeholder="Email" required/>
</label>
<label><span>Password:</span>
<input name="password1" id="password1" type="password" size="40" maxlength="40" placeholder="********" required/>
</label>
<label><span>Confirm Password:</span>
<input name="password2" id="password2" oninput="checkPassword();" type="password" size="40" placeholder="********" required/>
</label>
</p>
<div align="center"><span align = "center" id="user-result"></span><br><br><br>
</div>
<div align="center">
<span> </span><input type="submit" class="button" id="submit_btn" value="Submit" />
</div>
</form>
</form>
</div>
</div>
</body>
</html>
php code
<?php
include 'connection.php';
$hash = password_hash($_POST['password2'], PASSWORD_DEFAULT, ['cost' => 11]);
$sql = "INSERT INTO members(firstname, lastname, username, email, password )
VALUES(:firstname, :lastname, :username, :email, :password )";
$stmt = $db->prepare($sql);
$stmt->bindParam(':firstname', $_POST['firstname'], PDO::PARAM_STR);
$stmt->bindParam(':lastname', $_POST['lastname'], PDO::PARAM_STR);
$stmt->bindParam(':username', $_POST['username'], PDO::PARAM_STR);
$stmt->bindParam(':email', $_POST['email'], PDO::PARAM_STR);
$stmt->bindParam(':password', $hash, PDO::PARAM_STR);
$results->$stmt->execute();
if($results) {
echo 'Welcome new member, and thanks you for registering with the website.';
echo '<br><br>Click <a href="../index.html">here</a> to return to the login page';
} else {
echo 'Did not work.';
}
?>
js code
$(document).ready(function() {
$('#submit_btn').click(function(){
var data = {};
data.firstname = $('#firstname').val();
data.lastname = $('#lastname').val();
data.username = $('#username').val();
data.email = $('#email').val();
data.password2 = $('#password2').val();
$.ajax({
type: "POST",
url: "../php/newuser.php",
data: data,
cache: false,
success: function (response) {
}
});
return false;
});
});
Any help would be greatly appreciated.
Thanks
You can do something like this. See details here: https://webdevideas.wordpress.com/2013/07/30/n-forms-one-javascript/
$(document).ready(function(){
$(".ajaxform").bind("submit",function(e){
e.preventDefault();
var ajaxurl = $(this).attr("action");
var data = $(this).serialize();
$.post(ajaxurl,data,function(res){
$("#message").html(res.message);
},'json');
});
});
Solved it was a simple error that i had made in the PHP file.
This
$results->$stmt->execute();
To this
$results = $stmt->execute();
Thanks all