html中js提交表单,js同时提交多个表单的方法

发布时间:2020-09-29编辑:脚本学堂
如何用js提交表单,在html页面中使用js脚本进行表单提交的例子,以及js同时提交多个表单的方法,js表单提交代码分享。

html中js提交表单

办法1,同一个頁面中建立兩个表单 各自提交:
 

复制代码 代码示例:
<form action="?" name="form1" id="form1">
 <!-- 表单內容 -->
<input type="submit" />
</form>
<form action="?" name="form1" id="form1">
 <!-- 表单內容 -->
<input type="submit"  />
</form>

办法2、如果非要只有一个表单的話,通过js提交:
 

复制代码 代码示例:

<script type="text/javascript" language="javascript">
function submitYouFrom(path){
 $('form1').action=path;
 $('form1').submit();
}
</script>
<form action="?" name="form1" id="form1">

 <!-- 表单內容 -->
<input type="button" value="提交1" onclick="submitYouFrom('地址一')"/>
<input type="button" value="提交2" onclick="submitYouFrom('地址二')"/>
</form>

javascript同时提交多个web表单的方法

问题:
web頁面里有多个表单,每个表单對應著某一類數據操作。
比如一个詳細的簡歷信息頁面分
1、个人資料
2、工作經驗
3、項目經驗
4、其他信息 4个表单。
一般的需求是允許用戶单獨提交其中任何一个表单到下一个頁面進行修改操作(也就是說頁面有4个不同的修改按鈕,點擊哪个按鈕則只提交某一个表单的數據到服務器,並根據表单的action)。
現在有這樣的需求,允許用戶選擇其中任意的一个或多个表单進行提交修改,這樣的話在客戶端如何提交表单?
聲明:可能會有人說將4个表单合成一个大表单,根據修改按鈕的不同在服務器端進行不同的數據操作即可。這是一種解決办法,但考慮到頁面數據量比較大,為了提高效率,減少數據傳輸量,還是希望能夠分成多个表单提交,所以這个办法暫不考慮。是不是一定要用js或ajax?如果不用呢?

个人觀點
1、用Ajax提交,比如prototype
 

new Ajax.Request("/do1",{parameters:$("form1").serialize().......);
new Ajax.Request("/do2",{parameters:$("form2").serialize().......);
 

你可以同時調用多个,默認是異步提交,所以可以同時提交多个表单,這个方案是最簡单的。
2、使用多个iframe,然後將每个表单的target指向不同的iframe
然後用js的
 

document.getElementById("form1").submit();
document.getElementById("form2").submit();
 

這个樣子進行提交。
3、兩个方法的對比
Ajax方便簡单,對結果的處理也比較省事,框架都替我們做好了,但不能跨域提交
iframe最符合一般的使用,也可以跨域提交,處理返回結果稍微麻煩些,需要在iframe里面使用 parent.進行調用才可以。