时间戳

首页 > 解决方案 > HTML 提交表单仅在提交时执行一个 JavaScript 函数

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

问题描述

下午好，

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

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

然后，javascript 代码出现在 body 标记的底部、脚本标记内，如下所示。

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

我遇到的问题是第二个 JavaScript 函数没有执行，即使它在 onsubmit 函数中被调用。因此，第三个函数也没有执行，因为该函数在第二个函数中被调用。第二个函数将带有用户名输入的 GET 值在 HTML 表单中提交到 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 函数成功执行，用于检查密码字段是否匹配。如果密码字段不匹配（因此第二个函数将不会执行），此函数要么返回 false 值，要么返回 true 值。即使第一个函数返回 true，下一个函数也不会执行，并且表单在不运行第二个函数的情况下提交。

如果比我更有经验的人（我只练习 Web 开发几个月）能指出我的方法中是否有任何错误，我将不胜感激，并可能帮助我解决问题。

感谢您抽出时间来阅读！

标签： javascriptphpjqueryhtmlfunction

解决方案

当你说“第二个函数没有运行”时 - 你的意思是你在 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');
?>

推荐阅读