2017-06-30 11 views
0

私は以下のデータをhtmlで持っています。空白usernamepasswordなし混乱したJavascript投稿

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

私はボタンをクリックし、 は、それは私に適切な警告メッセージを与えて、しかし、満たされたユーザー名とパスワードを、私に、以下のエラーを与えている提出ヒットしました。

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

私はどこが間違っているのか、どのように修正できるのか教えてください。

ありがとうございました

答えて

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

は以下を取り除く:

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

それとも あなたは「LoginDetails」フォームタグを削除した後、代わりに次のように使用することができます。

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