I have been working on this for some time now by looking at previous answers to questions, but still doesn't work.
I'm trying to get a MySQL table updated with the data in a Bootstrap Modal form when submitting via PHP. The php code below works when using it in a previous website (which doesn't use bootstrap).
The issue I get is on submit; the form passes the javascript validation and then opens the register.php file. When I look at the MySQL table the data hasn't transferred and the webpage is just blank with no content (url comes up as http://localhost/BootstrapEx/php/register.php).
Please can someone help as to why the data within the form doesn't transfer to MySQL when using Twitter Bootstrap and a way to fix this?
I know I have to change/update the security, validation and error pages within the php file, but at this stage all I want it to do is load the data into the MySQL table. I temporary created Thankyou.html, SystemError.html and RegError.html as you will see in the php code just to see if those pages opened.
Please find the code below:
Html: Just the modal form section
<div class="modal fade" id ="Register" role ="dialog">
<div class="modal-dialog">
<div class = "modal-content">
<div class = "modal-header">
<h4>Registration Screen</h4>
</div>
<div class ="modal-body">
<form name="myForm" role="form" action="php/register.php" method ="post" onsubmit="return validateForm()">
<fieldset>
<div class="form-group">
<label for="fname">First Name</label><span>*</span>
<input type="FirstName" class="form-control" id="fname" placeholder="Enter your first name" name="fname">
</div>
<div class="form-group">
<label for="lname">Last Name</label><span>*</span>
<input type="Surname" class="form-control" id="lname" placeholder="Enter your last name or surname" name="lname">
</div>
<div class="form-group">
<label for="email">Email address</label><span>*</span>
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
<div class="form-group">
<label for="psword1">Password</label><span>*</span>
<input type="password" class="form-control" id="psword1" placeholder="Password" name="psword1">
</div>
<div class="form-group">
<label for="psword2">Confirm Password</label><span>*</span>
<input type="password" class="form-control" id="psword2" placeholder="Confirm Password" name="psword2">
</div>
<div class = "form-group">
<a class = "btn btn-default" data-dismiss = "modal">Close</a>
<button class = "btn btn-primary" type="submit" name="submit" value="Yes">Register</button>
</fieldset>
</div>
</div>
</div>
</div>
</div>
</form>
register.php file (please excuse the error sections, these will be updated once the data submits into the table).
<?php
if(isset($_POST['submit']))
{
require ('php/mysqli_connect.php');
if ($_SERVER['REQUEST_METHOD'] == 'POST')
{
$errors = array(); // Initialize an error array.
// Check for a first name:
if (empty($_POST['fname']))
{
$errors[] = 'You forgot to enter your first name.';
} else
{
$fn = mysqli_real_escape_string($dbcon, trim($_POST['fname']));
}
// Check for a last name:
if (empty($_POST['lname']))
{
$errors[] = 'You forgot to enter your last name.';
} else
{
$ln = mysqli_real_escape_string($dbcon, trim($_POST['lname']));
}
// Check for an email address:
if (empty($_POST['email']))
{
$errors[] = 'You forgot to enter your email address.';
} else
{
$e = mysqli_real_escape_string($dbcon, trim($_POST['email']));
}
// Check for a password and match against the confirmed password:
if (!empty($_POST['psword1']))
{
if ($_POST['psword1'] != $_POST['psword2'])
{
$errors[] = 'Your two passwords did not match.';
} else
{
$p = mysqli_real_escape_string($dbcon, trim($_POST['psword1']));
}
} else
{
$errors[] = 'You forgot to enter your password.';
}
if (empty($errors))
{ // If everything's OK.
// Register the user in the database...
// Make the query:
$q = "INSERT INTO users (user_id, fname, lname, email, psword, registration_date) VALUES (' ', '$fn', '$ln', '$e', SHA1('$p'), NOW() )";
$result = @mysqli_query ($dbcon, $q); // Run the query.
if ($result)
{ // If it ran OK
header("Location:http://localhost/BootstrapEx/Thankyou.html");
echo '<p>Fields Loaded</p>';
exit();
} else
{ // If it did not run OK
// Error message:
header("Location:http://localhost/BootstrapEx/SystemError.html");
echo '<h2>System Error</h2>
<p class="error">You could not be registered due to a system error. We apologize for any inconvenience.</p>';
//Debugging message:
echo '<p>' . mysqli_error($dbcon) . '<br><br>Query: ' . $q . '</p>';
} // End of if ($result)
mysqli_close($dbcon); // Close the database connection.
exit();
} else
{ // Report the errors
header("Location:http://localhost/BootstrapEx/RegError.html");
echo '<h2>Error!</h2>
<p class="error">The following error(s) occurred:<br>';
foreach ($errors as $msg) { // Echo each error
echo " - $msg<br>
";
}
echo '</p><h3>Please try again.</h3><p><br></p>';
}// End of if (empty($errors))
} // End of the main Submit conditional
}
?>
MySQL php connection file (username, passwords etc details changed)
<?php
//This file provides the information for accessing the database and connecting to
//mysql. It also sets the language coding to utf-8.
DEFINE ('DB_USER', '****')
DEFINE ('DB_PASSWORD', '****')
DEFINE ('DB_HOST', 'localhost')
DEFINE ('DB_NAME', '****')
$dbcon = @mysqli_connect (DB_HOST, DB_USER, DB_PASSWORD, DB_NAME)
OR die ('Could not connect to MySQL:' .mysqli_connect_error());
language encoding
mysqli_set_charset($dbcon, 'utf8');
?>
Javascript Validation
function validateForm() {
// First name validation
var w = document.forms["myForm"]["fname"].value;
var x = document.forms["myForm"]["lname"].value;
var y = document.forms["myForm"]["email"].value;
var z = document.forms["myForm"]["psword1"].value;
var b = document.forms["myForm"]["psword2"].value;
var atpos = y.indexOf("@");
var dotpos = y.lastIndexOf(".");
if (w == null || w == "") {
alert("First name must be filled out");
return false;
}
else if (/[^a-zA-z'-]/.test(w)) {
alert("First Name not completed, please only use letters & spaces with either (') or (-).");
return false;
}
// Last name validation
else if (x == null || x == "") {
alert("Last name must be filled out");
return false;
}
else if (/[^a-zA-z'-]/.test(w)) {
alert("Last name not completed, please only use letters & spaces with either (') or (-).");
return false;
}
// Email validation
else if (y == null || y == "") {
alert("Email address must be completed");
return false;
}
else if (atpos< 1 || dotpos<atpos+2 || dotpos+2>=y.length) {
alert("Not a valid e-mail address");
return false;
}
// Password Validation
else if (z == null || z == "") {
alert("Password must be entered");
return false;
}
else if (z.length < 7 || !/[a-z]/.test(z) || !/[A-Z]/.test(z) || !/[0-9]/.test(z)) {
alert("Password must be a minimum of 8 characters, with at least 1 number, 1 lower case and 1 upper case letter.");
return false;
}
else if (z !== b) {
alert("Passwords do not match.");
return false;
}
}
Any help will be really appreciated.
Many thanks,
Hopeless coder
