困惑Javascriptpost

Question

我在 html 中有以下数据。

@Html.BeginForm("LoginDetails", "Home", FormMethod.Post){

<body onload="makeCalls()" style="background-image: url('../../ImageIcons/FaceLoginBG.jpg'); background-size: cover; visibility:hidden">


    <div class="captureAndCompareWindowForLogin" style="display: block; margin-left: auto;margin-right: auto;float: none;">
        <div class="centerTitle">
            <h3 style="color:white">Welcome</h3>
        </div>


        <div class="errText" id="errText" value="errText" visibility:hidden">Invalid Username and Password</div>
        <form name="loginForm" id="loginForm">
            @Html.Label("Username") <input type="text" id="userid" name="userid"/><br /><br />
            @Html.Label("Password") <input type="password" id="pswrd" name="pswrd"/><br /><br />
            <input type="button" id="btnLogin" onclick="check()" value="Login" class="btn-block">
        </form>
    </div>

    <script type="text/javascript">
        function check() {
            /* the following code checkes if user is given access */
            var userNameFromForm = document.getElementById("userid").value;
            var passwordFromForm = document.getElementById("pswrd").value;
            var lower = userNameFromForm.toLowerCase();

            if (userNameFromForm === "") {
                alert("please enter your username");
            }
            if (passwordFromForm === "") {
                alert("please enter your password");
            }
                //Display error message, reset the form and select the userid textbox
            else {
                console.log(document.getElementById("loginForm"));
                document.getElementById("loginForm").submit();

            }
        }
    </script>


</body>
}

当我单击按钮时，没有空白 username 和 password，它会给我相应的警告消息，但是，填写用户名和密码并点击提交会给我以下错误。

LoginHome:142 Uncaught TypeError: Cannot read property 'submit' of null.

请告诉我哪里出错了，我该如何解决。

谢谢

Answer 1

在您的情况下，问题是您将表单包装在另一个表单中。请这样使用：

<body onload="makeCalls()" style="background-image: url('../../ImageIcons/FaceLoginBG.jpg'); background-size: cover; visibility:hidden">


    <div class="captureAndCompareWindowForLogin" style="display: block; margin-left: auto;margin-right: auto;float: none;">
        <div class="centerTitle">
            <h3 style="color:white">Welcome</h3>
        </div>


        <div class="errText" id="errText" value="errText" visibility:hidden">Invalid Username and Password</div>
        @using (Html.BeginForm("LoginDetails", "Home", FormMethod.Post, new { id = "loginForm" }))
        {
        @Html.Label("Username") <input type="text" id="userid" name="userid" /><br /><br />
        @Html.Label("Password") <input type="password" id="pswrd" name="pswrd" /><br /><br />
        <input type="button" id="btnLogin" onclick="check()" value="Login" class="btn-block">
        }


    </div>

    <script type="text/javascript">
        function check() {
            /* the following code checkes if user is given access */
            var userNameFromForm = document.getElementById("userid").value;
            var passwordFromForm = document.getElementById("pswrd").value;
            var lower = userNameFromForm.toLowerCase();

            if (userNameFromForm === "") {
                alert("please enter your username");
            }
            if (passwordFromForm === "") {
                alert("please enter your password");
            }
                //Display error message, reset the form and select the userid textbox
            else {
                console.log(document.getElementById("loginForm"));
                document.getElementById("loginForm").submit();

            }
        }
    </script>


</body>

您的代码将提交表单至 Home/LoginDetails url。你在 HomeController 中的方法应该是这样的：

public ActionResult LoginDetails(string userid, string pswrd) 
{
     //do something
}

Answer 2

删除以下内容：

@Html.BeginForm("LoginDetails", "Home", FormMethod.Post)

或者在删除 'LoginDetails' 表单标签后，您可以改用以下内容。

document.getElementById("LoginDetails").submit();

困惑Javascriptpost

Confused Javascript post

html

javascript

form-submit

razor