javascript - 在表单元素中单击

Question

在摆弄 HTML 代码时，我想出了一个令人难以置信的事情。看看代码:-

<form class="index-form" name="LoginForm">
   <div class="index-input">
      <button onclick="myFunction();">Login</button>
   </div>
</form>
<script>
function myFunction(){
  window.location = "https://blahblah.com/auth/?client_id=fdsgsnlr";
};
</script>

这只是添加了一个 '?'在我的网址中，什么也没做。但是当我从父表单元素中释放按钮元素时，它工作得很好。我知道我所做的只是胡说八道，但仍然知道它是如何发生的以及为什么会发生？

Answer 1

当你的按钮写在里面<form>然后在调用 onclick 之后按钮上的事件处理程序，您的表单将被提交。因为没有 action <form> 中定义的属性元素所以默认是 make GET使用表单中任何给定的命名输入请求当前页面，因为你没有，你只得到'？'。

现在，如果您从 onclick 返回 false事件处理程序，然后表单不会被提交并且您的 window.location 代码有效。

更新代码应该是-

    <form class="index-form" name="LoginForm">
       <div class="index-input">
         <button onclick="myFunction(); return false;">Login</button>
       </div>
   </form>
   <script>
      function myFunction(){
        window.location = "https://blahblah.com/auth/?client_id=fdsgsnlr";
      };
   </script>

此外

<button>默认为 <button type="submit">提交父表单，您可以改用 <button type="button">不提交表单。