Jquery submit関数がconsole.logと組み合わせて機能していません

フォームが送信されたかどうかを確認しようとしています。送信された場合、テスト目的でコンソールに値を記録します。Jquery submit関数がconsole.logと組み合わせて機能していません

コンソール内に何も記録されていないため、問題が見つかりません。

コード：

<html> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Server</title> 
    <link href="main.css" rel="stylesheet" type="text/css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
</head> 

<body> 
    <div id="authPanel"> 
     <div id="authPanelTop">Server Login </br> <small id="subHeadline">Bitte authentifiziere deinen account</small></div> 
     <form id="login"> 
      <input style="margin-bottom: 15px;" class="inputField" id="password" type="password" placeholder="Passwort eingeben" /> 
      <button class="buttonStyle" type="submit">Authentifizieren</button> 
     </form> 
     </br><hr> 
     <div id="authPanelTop">Oder registriere dich </br> <small id="subHeadline">Bitte gib deine daten ein um dich zu registrieren</small></div> 
     <form> 
      <input style="margin-bottom: 15px;" class="inputField" type="text" placeholder="Vorname eingeben" /> 
      <input style="margin-bottom: 15px;" class="inputField" type="text" placeholder="Nachname eingeben" /> 
      <input style="margin-bottom: 15px;" class="inputField" type="password" placeholder="Passwort eingeben" /> 
      <input style="margin-bottom: 15px;" class="inputField" type="text" placeholder="Email eingeben" /> 
      <button class="buttonStyle" type="submit">Registrieren</button> 
     </form> 
    </div> 

    <script type="text/javascript"> 
     $('#login').submit(function() { 
      console.log('Form submitted'); 
     }); 
    </script> 

</body> 

</html>

私は助けのいずれかの種類を感謝しています。

出典

2017-04-25 pr0b

'$（ '＃ログイン'）提出する。（関数（E）{e.preventDefaultを（）; はconsole.log（ 'フォームが送信'）; }）;' – andrew

あなたのコンソールを持っていますかページがナビゲートするときにログを保存するように設定しますか？デフォルトでページが終了すると、ログは消去されます.... – epascarello

コメントをandrew leftに表示します。あなたはそれがデフォルトの提出（それ自身に提出する）をしないようにHTMLフォームに伝える必要があります。 – blackandorangecat

提出が行われると、ページは別のページにナビゲートされます。したがって、ログを保持しない限り、新しいページごとにログがクリアされます。

あなたが使用してログを保存することができます。

あなたが同じページに滞在したい、とフォームのアクションに移動したくない場合は、あなたが追加することができます。

event.preventDefault();

をサブミットハンドラに追加すると、デフォルトのイベントが防止され、AJAXを使用してサブミットしたり、サブミットしたりすることができます。

<script type="text/javascript"> 
    $('#login').submit(function(e) { 
     e.preventDefault(); 
     console.log('Form submitted'); 
    }); 
</script>

出典

2017-04-25 13:12:52

Jquery submit関数がconsole.logと組み合わせて機能していません

答えて

関連する問題