Question

该功能接收用户的用户名和密码。如果其中任何一个为空，则没有任何反应，如果他们点击“开始”按钮，它们将不会链接到google.ca。如果他们提交了所需的部分，那么他们将被引导到google.ca。出于某种原因，如果任何文本框未填充并且按下Go按钮，则当我希望它保持在该页面上直到用户填充文本框时，它会将我带到404错误页面。是什么导致了这个问题？这是HTML文件。

<form action="index.php" method="get" id="form" onsubmit="return go(document.getElementById('username'), document.getElementById('password'))">
    <table>
        <tr><td>Username: <input type="text" name="username" maxlength="16" id="username" onKeyUp="updateLength('username', 'usernameLength')" onblur="checkTextField(this);"/> <span id="usernameLength"></span></td></tr>     
        <tr><td>Password: <input type="password" name="password" maxlength="50" id="password" onKeyUp="updateLength('password', 'passwordLength')"> <span id="passwordLength" onblur="checkTextField(this);"></span></td></tr>
        <tr><td><input type="submit" value="Go" id="goButton" onclick="go(username, password)"/></td></tr>
    </table>
</form>

这是js文件

function loginFunction() {
    var url = "login.html";
    window.open(url);
}

function createAccountFunction() {
    var url2 = "createAccount.html";
    window.open(url2);
}

function go(username, password) {
    if (username != null && password != null) {
        var url = "https://www.google.ca/";
        window.open(url);
    }
}

function updateLength(field, output) {
    var curr_length = document.getElementById(field).value.length;
    var field_mLen = document.getElementById(field).maxLength;
    document.getElementById(output).innerHTML = curr_length + '/' +     field_mLen;
}

function checkTextField(field) {
    if (field.value == '')
        alert("Field is empty");
}

Answer 1

您没有停止onsubmit的默认事件。您可以将go功能更改为：

function go(username, password) {
    return function(event) {
        event.preventDefault();

        if (username != null && password != null) {
            var url = "https://www.google.ca/";
            window.open(url);
        }
    }
}

您也不需要HTML中的return。只需调用该函数。

Answer 2

我不了解您的代码逻辑，但也许我可以为您提供一种自行修复代码的方法。

你有一个表格和一个按钮。如果单击该按钮，则执行go（）函数。因为该按钮是一个提交按钮，所以在同一次单击时你再执行一次go（）函数。

我的建议是创建一个新功能，您可以将其命名为 validate（）：

function validate() {
    var username = document.get........ 
    var password = document.get........ 
    // more logic here, if need
    if(!username || !password) {
        return false;
    } 
    return true
}

现在，您的提交按钮如下所示：

<input type="submit" value="Go" id="goButton" onclick="return validate()"/>

如果 validate（）函数返回 false ，则表单不会提交。

希望这有帮助。

如果他/她没有输入所需信息，我希望用户无法前进到下一个屏幕

2 个答案: