Button mit JS-Handler sendet kein Formular

Question

Ich habe vor kurzem begonnen, in HTML & Javascript und ich denke beide sind sehr faszinierende Sprachen. Ich bin jedoch auf meiner Reise auf einen Fehler gestoßen, den ich nicht lösen kann.

Im Grunde versuche ich, ein Login-Formular zu erstellen, und ich kann es nicht senden.

Button (login.html):

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

Fügen Sie JS-Skript (login.html):

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

JavaScript (login.js):

$(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); 
    } 
}); 

I‘ Ich bin mir bewusst, dass die Funktion im Moment nichts tut. Ich weiß nur nicht, was los ist.

Mit besten Grüßen,

Answer 1

Sie viele Fehler in Ihrem Code haben, müssen Sie Ihre Quelle des Lernens verdoppeln überprüfen. zuerst aus einem Arbeitscode:

<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) diese Zeile:

boolean isValid = false; 

keinen Sinn in Javascript macht. boolean ist einfach ein JavaScript-Datentyp, die Syntax Sie suchen, ist

var 

, die von selbst ein Verweis auf eine Stelle im Speicher ist, dass vor Ort eine boolean enthalten, der Datentyp ist.

2) Ihr JavaScript-Code sollte über den HTML-Code wie Javascript sein synchron

3) all diese Zeile einfach falsch ist:

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

Sie nicht equals definiert haben, und die Syntax, die Sie Verwenden wird nicht funktionieren. Bitte Tropfen welcher Quelle auch immer Sie versuchen, zu lernen und lernen:

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

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