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…?
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.