HTML提交表单仅在提交时执行一个JavaScript函数

时间:2018-11-23 11:58:45

标签: javascript php jquery html function

下午好,

我目前正在使用HTML,PHP和JavaScript创建网站,并且在尝试检查数据库中的重复用户名时遇到问题。目前,我有一个使用以下代码的表单,用于在提交时调用两个javascript函数。

<form onsubmit="return (checkValid() && usernameCheck())" action="create.php" method="post" id="registerForm">

然后javascript代码出现在body标签底部,script标签内,如下所示。

<script>

            var pass = document.getElementById('passVal').value;
            var confPass = document.getElementById('confPassVal').value;
            var error = document.getElementById('errorMsg');
            var result = true;

        function checkValid(){ 

            if(pass !== confPass)
            {
                error.type = "text";
                error.value = "Passwords do not match!";
                error.style.backgroundColor = "#E34234";
                document.getElementById('passVal').style.borderColor = "#E34234";
                document.getElementById('confPassVal').style.borderColor = "#E34234";
                result = false;
            }

            return result;

        }

            function usernameCheck()
            {

              var username = document.getElementById('userName').value;
              var j = checkName(username);
              console.log(j);

              if ( j == "taken" ) {
                error.type = "text";
                error.value = "Username Already Exists, Please choose an alternative.";
                error.style.backgroundColor = "#E34234";
                document.getElementById('userName').style.borderColor = "#E34234";
                console.log(j);
                result = false;
              }
              if ( j == "available" ) {
                console.log(j);
                result = true;
              }

                return result;
            }

        function checkName(uname) {

              if (window.XMLHttpRequest) {
                xhttp = new XMLHttpRequest();
              } else {
                xhttp = new ActiveXObject("Microsoft.XMLHTTP");
              }
              var httpURL = "checkUserName.php?n=" + uname;
              xhttp.open("GET",httpURL,false);
              xhttp.send();
              return xhttp.responseText;
            }

    </script>

我遇到的问题是,即使在onsubmit函数中调用了第二个JavaScript函数,该函数也没有执行。因此,第三个功能也没有执行,因为在第二个功能内调用了该功能。第二个函数使用HTML表单中输入的用户名将GET值提交给PHP脚本。然后,PHP脚本检查数据库以查看该用户是否存在,并根据是否为真返回一个值。下面的代码显示了PHP脚本。

<?php
session_start();

require 'sql.php';

header('Content-type: text/plain');
$userName = $_GET['n'];

$query =  "SELECT username FROM users where username='$username'";
$checkun = $conn->query($query);
while ($row = $checkun->fetch_assoc()) {
    if ($row > 0) 
    {
        exit('taken');
    } else
    {
        exit('available');
    }
}

?>

第一个JavaScript函数成功执行,该函数用于检查密码字段是否匹配。如果密码字段不匹配(因此第二个功能将不执行),则此函数将返回假值;如果密码字段不匹配,则此函数将返回真值。即使第一个函数返回true,下一个函数也不会执行,并且表单将在不运行第二个函数的情况下提交。

如果有比我经验丰富的人(我仅从事Web开发仅几个月之久)能强调我的方法是否有任何错误,并可能为我提供解决方案,我将不胜感激。

感谢您抽出宝贵的时间阅读本文!

1 个答案:

答案 0 :(得分:1)

当您说“第二个功能未运行”时-您是说在JS中没有响应吗?我想这是真的,因为您的MySQL查询中永远不会有匹配项-而且,您的“ catchall”也没有放在正确的位置。

这看起来像是您从数据库中获取数据的第一次学习经验,因此我不会为您准备接受SQL注入攻击而大开眼界,尽管我会说您绝对不能在数据库上使用此代码。任何有真实用户的开放系统(您需要学习如何防御这些攻击-SO上有大量数据)!

因此,您的第一步至少是要使“第二个功能”变为“正常工作” .....

<?php
session_start();
require 'sql.php';
header('Content-type: text/plain');
// $userName = $_GET['n']; // <<<==== here you use with a capital
$username = $_GET['n']; // let's change it to be the same
$query =  "SELECT username FROM users where username='$username'"; // now, we have a chance...
$checkun = $conn->query($query);
while ($row = $checkun->fetch_assoc()) {
    if ($row > 0) 
    {
        exit('taken');
    }
}
// Here is where to put your 'catchall' in case you don't get anything from the query (what you have won't ever give 'available')
exit('available');
?>