button按钮无法提交表单问题发现与解决
? 前些天，我在用html制作登錄框時遇到一個問題，form表單中的button不能提交表單中的數據。
? 相信你知道，input的type="submit"有提交表單的功能，當然，我們自己也可以給一個input的type="button"的按鈕自定義點擊事件以提交表單。
? 在這里我不用submit而用自定義的button的原因是，submit是無條件提交表單，而登錄框需要對用戶輸入進行判斷，自定義的button能實現在滿足判斷條件后才提交表單。
? 以上，題外話，下面進入正題，我的button為什么不能提交表單？請看代碼：
<!DOCTYPE?html> <html?lang="en"> <head><meta?charset="UTF-8"?/><title>Document</title><script?type="text/javascript">window.οnlοad=function(){var?btn=document.getElementById('submit');var?form=document.getElementsByTagName('form')[0];btn.οnclick=function(){form.submit();}}</script> </head> <body><form?action="http://www.baidu.com"?method="get"><input?type="text"?name="name"?/><input?id="submit"?type="button"?value="提交"?/></form> </body> </html>? 原本應該是這樣：我在輸入框中隨便打幾個字，然后點擊提交按鈕，我的瀏覽器頁面就向"www.baidu.com"提交一對鍵值對數據。?
? 當我點擊“提交”按鈕，然而并沒有什么反應。
? 各種百度，各種搜貼，發現根本沒人發現這個問題。找了好久，終于在一個老外的帖子中看到回復說是因為button取名為submit導致無法使用。
? 為了驗證，我把button的id名改了，然后發現問題完美解決。
<!DOCTYPE?html> <html?lang="en"> <head><meta?charset="UTF-8"?/><title>Document</title><script?type="text/javascript">window.οnlοad=function(){var?btn=document.getElementById('btn');var?form=document.getElementsByTagName('form')[0];btn.οnclick=function(){form.submit();}}</script> </head> <body><form?action="http://www.baidu.com"?method="get"><input?type="text"?name="name"?/><input?id="btn"?type="button"?value="提交"?/></form> </body> </html>? 表單提交了，給百度穿了個"name=啊"的數據，如下圖：
? 后來，我又測試name屬性，把button的id去掉，而是添加name屬性并賦值"submit"。神奇，發現button又不能提交表單了。
<!DOCTYPE?html> <html?lang="en"> <head><meta?charset="UTF-8"?/><title>Document</title><script?type="text/javascript">window.οnlοad=function(){var?btn=document.getElementsByName('submit');?????//通過name屬性找到按鈕元素var?form=document.getElementsByTagName('form')[0];btn.οnclick=function(){form.submit();???????//調用表單的提交方法}}</script> </head> <body><form?action="http://www.baidu.com"?method="get"><input?type="text"?name="name"?/><input?name="submit"?type="button"?value="提交"?/></form> </body> </html>? 至此，問題的原因找到了。
? 總結：不能提交的原因是：button的id是“submit”，導致了提交表單功能的失效。按F12，控制臺報錯了：Uncaught TypeError: form.submit is not a function 。問題的根源在于，對form中的button命名submit，這個名字和form的提交表單方法submit()名字重復了，這就導致了系統無法識別submit()這個方法，所以它不執行了。
? 延伸：在編寫代碼時，我們應該注意命名的規范，應該與原生語言的保留字、關鍵字區分開。
轉載于:https://blog.51cto.com/webexp/1830564
總結
以上是生活随笔為你收集整理的button按钮无法提交表单问题发现与解决的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python django事务trans
- 下一篇： NFS 网络文件系统