Here is my code, HTML:
<div class="form-content">
<form method="post" action="../controller/regprocess.php">
<div class="form-group">
<label>Username</label>
<input type="text" id="Rusername" name="Rusername" required="required" />
</div>
<div class="form-group">
<label>Password</label>
<input type="password" id="Rpassword" name="Rpassword" required="required" />
</div>
<div class="form-group">
<label>First Name</label>
<input type="text" id="RfirstName" name="RfirstName" required="required" />
</div>
<div class="form-group">
<label>Last Name</label>
<input type="text" id="RlastName" name="RlastName" />
</div>
<div class="form-group">
<label>Email</label>
<input type="email" id="Remail" name="Remail" required="required" />
</div>
<div class="form-group">
<label>Phone</label>
<input type='number' id="Rphone" name="Rphone" required="required" />
</div>
<div class="form-group">
<button type="submit">Register</button>
</div>
</form>
</div>
regprocess PHP:
<?PHP
session_start();
//connect to the database
require('../model/database.php');
//Load user functions
require('../model/functions_users.php');
//retrieve the registration details into the form
$username = $_POST['Rusername'];
$password = $_POST['Rpassword'];
$firstName = $_POST['RfirstName'];
$lastName = $_POST['RlastName'];
$email = $_POST['Remail'];
$phone = $_POST['Rphone'];
//call the add_user() function
$result = add_user($username, $password, $firstName, $lastName, $email, $phone);
//create user messages
if($result)
{
//create a success message to display on page
$_SESSION['success'] = 'Thank you for creating an account. Please login.';
//redirect to products.php
header('location: ../view/login-registration.php?page=login');
}
else
{
//create a error message to display on page
$_SESSION['error'] = 'An error has occurred. Please try again.';
//redirect to product_add_form.php
header('location: ../view/login-registration.php?page=login');
}?>
and finally my result function:
function add_user($username, $password, $firstName, $lastName, $email, $phone)
{
global $conn;
$sql = "INSERT INTO users (username, password, firstName, lastName, email, phone) VALUES (:username, :password, :firstName, :lastName, :email, :phone)";
$statement = $conn->prepare($sql);
$statement->bindValue(':username', $username);
$statement->bindValue(':password', $password);
$statement->bindValue(':firstName', $firstName);
$statement->bindValue(':lastName', $lastName);
$statement->bindValue(':email', $email);
$statement->bindValue(':phone', $phone);
$result = $statement->execute();
$statement->closeCursor();
return $result;
}
I have two parent divs overlapping each other, one is hidden (registration form) until a panel is clicked and sets div active to appear on top of the login form. The active div (login form) submit button works but the 2nd form (registration form) submit button does not work.
JS:
$(document).ready(function() {
var panelOne = $('.form-panel.two').height(),
panelTwo = $('.form-panel.two')[0].scrollHeight;
$('.form-panel.two').not('.form-panel.two.active').on('click', function(e) {
e.preventDefault();
$('.form-toggle').addClass('visible');
$('.form-panel.one').addClass('hidden');
$('.form-panel.two').addClass('active');
$('.form').animate({'height': panelTwo
}, 200);
});
$('.form-toggle').on('click', function(e) {
e.preventDefault();
$(this).removeClass('visible');
$('.form-panel.one').removeClass('hidden');
$('.form-panel.two').removeClass('active');
$('.form').animate({
'height': panelOne
}, 200);
});
});