JavaScript在form表單中怎么使用button按鈕實(shí)現(xiàn)submit提交

發(fā)布時(shí)間：2022-05-11 10:27:37 來源：億速云閱讀：451 作者：iii 欄目：大數(shù)據(jù)

本文小編為大家詳細(xì)介紹“JavaScript在form表單中怎么使用button按鈕實(shí)現(xiàn)submit提交”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“JavaScript在form表單中怎么使用button按鈕實(shí)現(xiàn)submit提交”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識(shí)吧。

submit是button的一個(gè)特例，也是button的一種，它把提交這個(gè)動(dòng)作自動(dòng)集成了，submit和button,二者都以按鈕的形式展現(xiàn),看起來都是按鈕，所不同的是type屬性和處發(fā)響應(yīng)的事件上。

在javaScript中關(guān)于submit和button的區(qū)別介紹

在form表單提交中，使用button來間接完成submit的提交更為靈活。下面是實(shí)現(xiàn)方法：

使用button按鈕實(shí)現(xiàn)submit提交，需要在button標(biāo)簽中的使用onclick方法，然后在JavaScript中實(shí)現(xiàn)具體，代碼如下：

<head>
<script type="text/javascript">
function submitBtnClick(){
document.fileForm.submit();
}
</script>
</head>
<body>
<form action="../welcome.jsp" name="fileForm">
<input type="file" value="請(qǐng)選擇圖像">
<button id="submitBtn" onclick="submitBtnClick()">檢索</button>
</form>
</body>

上文代碼通過document選中fileForm表單，然后在調(diào)用該表單的submit方法即可實(shí)現(xiàn)用button按鈕間接完成submit方法的功能，但說到底還是調(diào)用submit方法。

下面看下JavaScript使用button提交表單的方法

<form action="test.html" method="POST">
  <input type="button" value="提交"/>
</form>  
 <!-- 用提交表單，重要 -->
<script type="text/javascript">
　　//定位提交按鈕
　　 var inputElement = document.getElementsByTagName("input")[0];
　　//為提交按鈕添加單擊事件
　　 inputElement.onclick = function(){
  　　//定位<form>標(biāo)簽，forms表示document對(duì)象中所有表單的集合，通過下標(biāo)引用不同的表單，從0開始
    var formElement = document.forms[0];
    //提交表單，提交到action屬性指定的地方
    formElement.submit();
   }  
 </script>

讀到這里，這篇“JavaScript在form表單中怎么使用button按鈕實(shí)現(xiàn)submit提交”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

JavaScript在form表單中怎么使用button按鈕實(shí)現(xiàn)submit提交

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽