Jquery提交功能不与console.log结合使用

时间:2017-04-25 13:09:09

标签: javascript jquery forms

我试图检查表单是否已提交,如果已提交,我想在控制台中记录一个值以进行测试。

然而,控制台内部没有任何记录,我无法找到问题。

代码:

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

我感谢任何帮助。

1 个答案:

答案 0 :(得分:2)

提交后,页面将导航到另一个页面。因此,除非保留日志,否则每个新页面都会清除日志。

您可以使用以下方式保留日志:

preview

如果您希望保持同一页面,并且不想导航到表单的操作,则可以添加:

event.preventDefault();

到提交处理程序,它会阻止默认事件,你可以使用AJAX提交它或者根本不提交。

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