Onclick里面的表单元素

在用HTML代码弄弄一些东西的时候，我想出了一个令人难以置信的东西。看一看代码： - “？”Onclick里面的表单元素

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

这只是增加了一个在我的网址并没有做任何事情。但是，当我从父窗体元素中释放按钮元素时，它工作得很好。我知道我所做的只是无稽之谈，但仍然，任何想法如何以及为何发生？

来源

2016-11-19 Harshit Agrawal

返回false - 的onclick = “myFunction的（）;返回false;” –

另请参阅我对@VikasSachdeva的编辑回答 – Victory

当您的按钮写入<form>时，然后在按钮上调用onclick事件处理程序后，您的表单将被提交。由于您的<form>元素中没有定义action属性，所以默认情况下会向当前页面发出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">不提交表单。

来源

2016-11-19 14:49:33

但是，这与我提交表单的事实有什么关系？按钮元素是否默认启用它？ –

由于@Victory澄清

哦，对不起，我没有读到...谢谢... –

试试这个从你的onclick处理

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

来源

2016-11-19 14:58:49

Onclick里面的表单元素

回答

相关问题