溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
前些天，我在用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.onload=function(){
var btn=document.getElementById('submit');
var form=document.getElementsByTagName('form')[0];
btn.onclick=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.onload=function(){
var btn=document.getElementById('btn');
var form=document.getElementsByTagName('form')[0];
btn.onclick=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.onload=function(){
var btn=document.getElementsByName('submit'); //通過name屬性找到按鈕元素
var form=document.getElementsByTagName('form')[0];
btn.onclick=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()這個方法，所以它不執行了。
延伸：在編寫代碼時，我們應該注意命名的規范，應該與原生語言的保留字、關鍵字區分開。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
