JavaScript Submit HTML Form via POST

Question

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:&nbsp;&nbsp;&nbsp;&nbsp;<input name = "fName" type="text" size="25"></p>

<p>Last Name:&nbsp;&nbsp;&nbsp;&nbsp;<input name = "lName" type="text" size="25"></p>

<p>E-mail:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input name = "email" type="text" size="25"></p>

<p>Password:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input name = "pass" type="text" size="25"></p>

<p> Gender:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" name="gender" value="M" checked> Male
<input type="radio" name="gender" value="F"> Female</p>

<p>User Type: &nbsp;&nbsp;&nbsp;&nbsp;<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...?

You can use FF addons like HTTPFox to see exactly WHAT is being sent to the browser. If the JS is mungeing the form somehow, you'd see it there. — Marc B
– Marc B, Commented Jul 27, 2011 at 16:32
Some general comments: alert boxes are annoying if they are used to display validation results, ereg* functions are deprecated in favour of preg_* functions. Your database layer should be abstracted. mysql_close() is not necessary at all. — ThiefMaster
– ThiefMaster, Commented Jul 27, 2011 at 16:34

DoubleMalt · Accepted Answer · 2011-07-27 16:31:38Z

2

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.

answered Jul 27, 2011 at 16:31

DoubleMalt

1,28312 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Johnny Craig · Accepted Answer · 2011-07-27 16:32:27Z

0

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.

answered Jul 27, 2011 at 16:32

Johnny Craig

4,9902 gold badges28 silver badges28 bronze badges

Comments

Ruslan Polutsygan · Accepted Answer · 2011-07-27 16:37:36Z

0

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();" />

answered Jul 27, 2011 at 16:37

Ruslan Polutsygan

4,4612 gold badges28 silver badges38 bronze badges

Collectives™ on Stack Overflow

JavaScript Submit HTML Form via POST

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related