JavaScript 通过 POST 提交 HTML 表单答案

【问题标题】：JavaScript Submit HTML Form via POSTJavaScript 通过 POST 提交 HTML 表单
【发布时间】：2011-10-14 10:35:14
【问题描述】：

我有以下 Javascript 代码：

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;
}

这用于创建用户页面。 javascript 检查输入的数据是否有效，然后将表单提交到 php 应用程序，然后将数据存储在数据库中......

这是 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>

php代码如下：

<?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
    }   
}
?>

当我使用 HTML 表单中的提交按钮直接向其 POST 时，php 工作。但是当我使用 javascript 时，页面是有针对性的，但它是空白的……没有任何回声……有什么想法吗？

我感觉表单没有捕捉到触发 javascript 的 HTML 按钮的“createuser”名称...因为我的 php 文件期望设置 $_POST['createuser']...也许不是...？

【问题讨论】：

您可以使用 HTTPFox 等 FF 插件来准确查看正在发送到浏览器的内容。如果 JS 以某种方式处理表单，你会在那里看到它。
一些通用 cmets：alert 框如果用于显示验证结果会很烦人，ereg* 函数已弃用，而支持 preg_* 函数。您的数据库层应该是抽象的。 mysql_close() 根本不需要。

标签： php javascript html database forms

【解决方案1】：

由于您没有按下名称为“createuser”的按钮，因此“createuser”不是发送到服务器的数据的一部分。

因此，您应该在表单中插入一个隐藏字段并检查，而不是检查“createuser”。

【讨论】：

【解决方案2】：

对我来说最突出的问题是：

这应该返回 false

<input type ="button" value="Create Account" name = "createuser" onclick="checkIfValid();return false"></p>

这也应该返回 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();
    }
}

我的想法是它没有通过验证，但它仍在提交。

【讨论】：

【解决方案3】：

控制台中是否有任何 JS 错误？

如果没有，试试这段代码的验证功能

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;
    }
}

还有这个按钮的代码

<input type ="submit" value="Create Account" name = "createuser" onclick="return checkIfValid();" />

【讨论】：