2016-06-16 5 views
1

私は最近、&JavascriptのHTMLに取り掛かり始めました。両方とも非常に魅力的な言語だと思います。私はしかし、私は私の旅で、私が解決することはできませんエラーが発生しました。JSハンドラのボタンはフォームを送信しません

基本的に私はログインフォームを作成しようとしていますが、提出することはできません。

ボタン(login.htmlと):

<script src="../js/login.js"></script> 

のJavaScript(login.js):

<button id="submit" type="button" onclick="verifyLogin()" class="btn btn-primary btn-lg btn-block">Login</button> 

は、JSスクリプト(login.htmlと)を含める

$(function() { 
    var $formLogin = $('#login-form'); 
    var $formLost = $('#lost-form'); 
    var $formRegister = $('#register-form'); 
    var $divForms = $('#div-forms'); 
    var $modalAnimateTime = 300; 
    var $msgAnimateTime = 150; 
    var $msgShowTime = 2000; 

    $("form").submit(function() { 
     switch(this.id) { 
      case "login-form": 
       var $lg_username=$('#login_username').val(); 
       var $lg_password=$('#login_password').val(); 
       if ($lg_username == "ERROR") { 
        msgChange($('#div-login-msg'), $('#icon-login-msg'), $('#text-login-msg'), "error", "glyphicon-remove", "Login error"); 
       } else { 
        msgChange($('#div-login-msg'), $('#icon-login-msg'), $('#text-login-msg'), "success", "glyphicon-ok", "Login OK"); 
       } 
       return false; 
       break; 
      case "lost-form": 
       var $ls_email=$('#lost_email').val(); 
       if ($ls_email == "ERROR") { 
        msgChange($('#div-lost-msg'), $('#icon-lost-msg'), $('#text-lost-msg'), "error", "glyphicon-remove", "Send error"); 
       } else { 
        msgChange($('#div-lost-msg'), $('#icon-lost-msg'), $('#text-lost-msg'), "success", "glyphicon-ok", "Send OK"); 
       } 
       return false; 
       break; 
      case "register-form": 
       var $rg_username=$('#register_username').val(); 
       var $rg_email=$('#register_email').val(); 
       var $rg_password=$('#register_password').val(); 
       if ($rg_username == "ERROR") { 
        msgChange($('#div-register-msg'), $('#icon-register-msg'), $('#text-register-msg'), "error", "glyphicon-remove", "Register error"); 
       } else { 
        msgChange($('#div-register-msg'), $('#icon-register-msg'), $('#text-register-msg'), "success", "glyphicon-ok", "Register OK"); 
       } 
       return false; 
       break; 
      default: 
       return false; 
     } 
     return false; 
    }); 

    $('#login_register_btn').click(function() { modalAnimate($formLogin, $formRegister) }); 
    $('#register_login_btn').click(function() { modalAnimate($formRegister, $formLogin); }); 
    $('#login_lost_btn').click(function() { modalAnimate($formLogin, $formLost); }); 
    $('#lost_login_btn').click(function() { modalAnimate($formLost, $formLogin); }); 
    $('#lost_register_btn').click(function() { modalAnimate($formLost, $formRegister); }); 
    $('#register_lost_btn').click(function() { modalAnimate($formRegister, $formLost); }); 

    function verifyLogin($email, $password){ 
     if($email === "admin" && $password === "1234"){ 
      alert("Login succesful"); 
     } else { 
      alert("Could not login"); 
     } 
    } 

    function modalAnimate ($oldForm, $newForm) { 
     var $oldH = $oldForm.height(); 
     var $newH = $newForm.height(); 
     $divForms.css("height",$oldH); 
     $oldForm.fadeToggle($modalAnimateTime, function(){ 
      $divForms.animate({height: $newH}, $modalAnimateTime, function(){ 
       $newForm.fadeToggle($modalAnimateTime); 
      }); 
     }); 
    } 

    function msgFade ($msgId, $msgText) { 
     $msgId.fadeOut($msgAnimateTime, function() { 
      $(this).text($msgText).fadeIn($msgAnimateTime); 
     }); 
    } 

    function msgChange($divTag, $iconTag, $textTag, $divClass, $iconClass, $msgText) { 
     var $msgOld = $divTag.text(); 
     msgFade($textTag, $msgText); 
     $divTag.addClass($divClass); 
     $iconTag.removeClass("glyphicon-chevron-right"); 
     $iconTag.addClass($iconClass + " " + $divClass); 
     setTimeout(function() { 
      msgFade($textTag, $msgOld); 
      $divTag.removeClass($divClass); 
      $iconTag.addClass("glyphicon-chevron-right"); 
      $iconTag.removeClass($iconClass + " " + $divClass); 
     }, $msgShowTime); 
    } 
}); 

私は」関数が現時点では何もしないことを認識しています。私は何が間違っているのか分かりません。

よろしく、

+0

お読みくださいは、[尋ねます]。質問の最も重要な部分の1つはタイトルであり、あなたの質問はあなたの質問の内容については何も言いません。 –

+1

エラーは何ですか? あなたのコードを視覚的に調べると、私が見ることができる問題は、verifyLoginが2つのパラメータをとり、(onclick経由で)それを呼び出すときに、nonLoginを渡していることです。 – Alan

+1

@ NicolaiArpeタイトルは閉じなければならないもののように見えたので、この質問を開いたが、本文にはタイトルよりもずっと多くの情報がある。編集が間違っている(または好きではない)場合は、自由にロールバックしたり変更を加えることができますが、より良いタイトルを使用してください。 – ssube

答えて

3

あなたはあなたのコード内で多くのエラーを持っている、あなたは学習のソースをダブルチェックする必要があります。

<script> 
console.log("hi"); 
function verifyLogin($email, $password){ 
    var isValid = false; 
    if($email === "admin" && $password === "admin"){ 
     alert("just logged in!"); 
     isValid = true; 
    } 
} 
</script> 

<button id="submit" type="button" onclick="verifyLogin('admin', 'admin')" class="btn btn-primary btn-lg btn-block">Login</button> 

1)この行:

boolean isValid = false; 

JavaScriptで意味をなさない第動作するコードオフ。ブール値は、単にJavaScriptのデータ型である、あなたが探している構文は、それ自体で、メモリ内の場所への参照です

var 

は、そのスポットがデータ型であるブール値を含めることができます。

2 Javascriptを

3同期しているよう)あなたのjavascriptのコードは、HTMLを超えるべきである)、このすべての行は単純に間違っている:

if((email && password).equals("admin")){ 

あなたは等号を定義し、構文あなたはなかったです使用していると動作しません。 、あなたが学び、から学ぶしようとしているものは何でもソースドロップしてください:

http://www.tutorialspoint.com/javascript/

https://www.youtube.com/watch?v=Bv_5Zv5c-Ts

+0

ありがとうございました。このコードを別のファイルで使用する方法はありますか?私はそれを含めてみましたが、それを見つけることはできません。 – nicarpe

+0

私はコードをチェックしなかったか、または修正しようとしたのは、別のエラーが発生したためです(私のlogin.jsファイルで動作させることができませんでした)。私は途中でJavaのコーダーです。 – nicarpe

+0

このコードをhtmlファイルで使用しようとするとうまく動作します。 – RunningFromShia

関連する問題