Question

这是代码

＆＃13;

<HTML>
    <head>
      <style>
          #log{display:none;}
      </style>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
      </script>
      <script>
          $(document).ready(function(){
              $("a").click(function(){
                  $("#log").show();
              });
          });
       </script>
    </head>
<body>
    <a href="javascript:;">Log In</a>
    <div id="log">
       <form action="abc.php" method="post">
          <input type="text" name="user" placeholder="Email ID"> <br><br>
          <input type="password" name="pass" placeholder="Password"><br><br>
          <input type="submit" value="Login">
       </form>
    </div>
</body>
</html>

＆＃13;

当我点击提交按钮时，div弹出窗口会自动关闭。

Answer 1

我已在表单中添加了一个ID，以便为其提供一个独特的选择器，然后在表单提交上附加一个事件来隐藏表单。

<HTML>
    <head>
      <style>
          #log{display:none;}
      </style>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
      </script>
      <script>
          $(document).ready(function(){
              $("a").click(function(){
                  $("#log").show();
              });
              $("#myForm").on("submit", function() {
                  $("#log").hide();
              });
          });
       </script>
    </head>
<body>
    <a href="javascript:;">Log In</a>
    <div id="log">
       <form action="abc.php" method="post" id="myForm">
          <input type="text" name="user" placeholder="Email ID"> <br><br>
          <input type="password" name="pass" placeholder="Password"><br><br>
          <input type="submit" value="Login">
       </form>
    </div>
</body>
</html>

Answer 2

您可能想要更改类型submit to按钮并添加ajax调用以发布此表单（我没有运行代码，但方法是将按钮类型从提交更改为按钮并完成任务ajax调用，这样页面就不会刷新，你可以随后显示你喜欢的内容：

   <HTML>
        <head>
          <style>
              #log{display:none;}
          </style>
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
          </script>
          <script>
              $(document).ready(function(){
                  $("a").click(function(){
                      $("#log").show();
                  });

                  $("#loginButton").click(function(event) {
                    $.ajax({
                        url : "abc.php",
                        type : "post",
                        data : {
                            user : $("[name=user]").val(),
                            pass: $("[name=pass]").val()
                        },
                        dataType : 'json',
                        success : function(data) {
                                // show your validation text
                        }
                    });
                  });
              });
           </script>
        </head>
    <body>
        <a href="javascript:;">Log In</a>
        <div id="log">
           <form action="abc.php" method="post">
              <input type="text" name="user" placeholder="Email ID"> <br><br>
              <input type="password" name="pass" placeholder="Password"><br><br>
              <input id="loginButton" type="button" value="Login">
           </form>
        </div>
    </body>
    </html>

单击提交按钮后如何防止关闭jquery div弹出窗口

2 个答案: