I have the following Javascript code:
function checkIfValid(){
var form = document.createuserform;
if(form.fName.value == "" || form.lName.value == "" || form.pass.value == "" || !isValidEmail()){
alert("Please Ensure All Fields Are Filled In Correctly");
}else{
//submit form
form.submit();
}
}
function isValidEmail(){
var x=document.forms["createuserform"]["email"].value
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
{
return false;
}
return true;
}
This for a create user page. The javascript checks to see if the data entered is valid and then submits the form to a php app which then stores the data in the database...
Here is the HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Create User</title>
<script src="http://dev.speechlink.co.uk/David/js/createuser.js" type="text/javascript"></script>
</head>
<body>
<h1>Create User</h1>
<p>Please fill in the details below to create a new user account</p>
<form name = "createuserform" action = "http://dev.speechlink.co.uk/David/createuser.php" method = "post">
<p>First Name: <input name = "fName" type="text" size="25"></p>
<p>Last Name: <input name = "lName" type="text" size="25"></p>
<p>E-mail: <input name = "email" type="text" size="25"></p>
<p>Password: <input name = "pass" type="text" size="25"></p>
<p> Gender: <input type="radio" name="gender" value="M" checked> Male
<input type="radio" name="gender" value="F"> Female</p>
<p>User Type: <select name="usertype">
<option>Athlete</option>
<option>Support Staff</option>
</select></p>
<p><input type ="button" value="Create Account" name = "createuser" onclick="checkIfValid()"></p>
</form>
</body>
</html>
The php code is as follows:
<?php
session_start();
$dbh = connect();
//connect to database
function connect() {
$dbh = mysql_connect ("localhost", "abc123", "def567") or die ('I cannot connect to the database because: ' . mysql_error());
mysql_select_db("PDS", $dbh);
return $dbh;
}
//insert into database
if (isset($_POST['createuser'])){
//prevent SQL injections (this version of php does not support mysqli functions)
$fn = mysql_real_escape_string($_POST['fName']);
$ln = mysql_real_escape_string($_POST['lName']);
$email = mysql_real_escape_string($_POST['email']);
$gender = mysql_real_escape_string($_POST['gender']);
$usertype = mysql_real_escape_string($_POST['usertype']);
if($usertype == 'Athlete'){
$usertype = 'Athletes';
}else{
$usertype = 'SupportStaff';
}
$pass = md5($_POST['pass']);
if(eregi("^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$", $email)) {
$query= "SELECT * FROM $usertype WHERE email = '" . $email . "'";
$result = mysql_query($query);
if(mysql_num_rows($result) < 1 || !mysql_num_rows($result)) {
$query= "INSERT INTO $usertype (fName, lName, gender, email, password) VALUES ('$fn', '$ln', '$gender', '$email', '$pass')";
mysql_query($query);
mysql_close($dbh);
echo ("&result=true&");
} else {
mysql_close($dbh);
echo "&result=userexists&";
}
}
else {
mysql_close($dbh);
echo "&result=false&"; //invalid e-mail address
}
}
?>
The php works when I use a submit button in the HTML form to POST directly to it. But when I use the javascript, the page is targeted but it is blank...nothing is echo'd...Any ideas?
I have a feeling the form is not catching the 'createuser' name of the HTML button firing the javascript...As my php file expects $_POST['createuser'] to be set...perhaps it isn't...?
3 Answers 3
As you don't press the button with the name "createuser", "createuser" is not part of the data sent to the server.
So instead of checking for "createuser", you should insert a hidden field in your form and check for this.
Comments
What stands out to me as the problem is the following:
this should have return false
<input type ="button" value="Create Account" name = "createuser" onclick="checkIfValid();return false"></p>
this should also return false:
function checkIfValid(){
var form = document.createuserform;
if(form.fName.value == "" || form.lName.value == "" || form.pass.value == "" || !isValidEmail()){
alert("Please Ensure All Fields Are Filled In Correctly");
return false;
}else{
//submit form
form.submit();
}
}
My thoughts are that its not passing validation, but it is still submitting.
Comments
Are there any JS errors in the console?
If no, try this code for validation function
function checkIfValid(){
var form = document.createuserform;
if(form.fName.value == "" || form.lName.value == "" || form.pass.value == "" || !isValidEmail()){
alert("Please Ensure All Fields Are Filled In Correctly");
return false;
}else{
//submit form
return true;
}
}
And this code for your button
<input type ="submit" value="Create Account" name = "createuser" onclick="return checkIfValid();" />
alertboxes are annoying if they are used to display validation results,ereg*functions are deprecated in favour ofpreg_*functions. Your database layer should be abstracted.mysql_close()is not necessary at all.