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>

这只是添加了一个＆＃39;？＆＃39;在我的URL中并没有做任何事情。但是当我从父表单元素中释放按钮元素时，它的工作完全正常。我知道我所做的只是胡说八道，但仍然知道它是如何以及为什么会发生的？

Answer 1

当您的按钮写在<form>内，然后在按钮上调用onclick事件处理程序后，您的表单就会被提交。由于action元素中没有定义<form>属性，因此默认为make GET请求当前页面中的任何给定命名输入，因为您没有，只需得到＆＃39;？＆＃39;。

现在，如果您从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">。

Answer 2

试试这个

<form class="index-form" name="LoginForm">
   <div class="index-input">
     <button onclick="myFunction()">Login</button>
   </div>
</form>

<script>
  function myFunction(e){
     e.preventDefault();
     window.location = "https://blahblah.com/auth/?client_id=fdsgsnlr";
  };
</script>

在表单元素内部单击

2 个答案: