js提交表單(js提交表單觸發事件)

Js表單提交

表單提交是剛開始學js的朋友很迷惑的一個問題，怎么提交，怎么阻止默認提交，怎么提交表單不跳轉等等問題，下面是一些示例

原始的表單提交有 button 按鈕提交和 <input /> 類型的。它們又什么區別呢？

(1) 默認表單提交

(2)默認不會提交表單

(3) 如果在 form ,我們使用了 type=''submit 屬性，但是不讓表單默認提交，有什么辦法呢？看下面

(4) 如果在 form ,我們使用了 type=''button 屬性，但是還是需要提交表單，這是可以使用ajax來提交，好處是可以自己控制提交，并且頁面不會跳轉

(5)若是使用默認提交的方法，且提交之前驗證表單，方法看下面

(6) 若是使用了 type='button' 屬性，但是還是想實現默認提交的方式怎么辦？ 看下面

(7) 下面的提交會發生什么？

分析 : 點擊提交按鈕:
(1)當表單驗證失敗時，不會觸發 form.submit() 函數，所以可以觸發 <form> 的 onsubmit 句柄，又因為該句柄 return fal 所以表單不會從該句柄處默認提交，所以 會在控制臺打印出 表單的onsubmit事件句柄在form.submit()調用時失效'
(2)當表單驗證成功時,會觸發 form.submit() 函數提交表單，又因為 form.submit()提交表單的方式與用戶單擊 Submit 按鈕一樣，但是表單的 onsubmit 事件句柄不會被調用，所以 控制臺不會打印出 表單的onsubmit事件句柄在form.submit()調用時失效

現在表單默認提交的方式基本沒人用了，都是ajax異步提交。但是了解一些還是好的。。。

js 提交表單數據： 附件+對象的的多集合

在我們前端進行表單提交的時候，有時候會出現這種情況：Failed to convert   java.lang.String    to java.util.List

等等。

例如：

  我后臺定義一個對象：

       examPaper 包含  String urId,Float urScore, MultipartFile  examFile  用戶id  ,試卷分數，試卷文件

對象外面   classPaper有： String classId  String className  List<examPaper>  examPaperList

這個時候，后臺接收為  ClassPaper

如果按照平常的 form-data   提交  則應按以下方式提交：

let  fd  = new FormData();

fd.append("classId ",classId );

fd.append("className ",className );

examPaperList.forEach((item,index) ->{

     fd.append("examPaperList["+index+"].urId",item.urId);

     fd.append("examPaperList["+index+"].urScore",item.urScore);

     fd.append("examPaperList["+index+"].examFile ",item.examFile );

});

以這種方式就可以實現 多附件  一一 對應提交。以避免對象轉換錯誤問題。

js表單提交和submit提交的區別是什么？

js提交和submit按鈕提交的區別:x0dx0a x0dx0a1. js提交表單時不會帶上 submit 按鈕的值(因為沒有被單擊) 所有瀏覽器x0dx0a2. input 回車提交 w3c瀏覽器會帶上submit按鈕的值，ie6則不會帶x0dx0a解決辦法：x0dx0a增加一個hidden域,用這個來判斷，無論用哪種方式提交都會有值x0dx0asubmit按鈕上綁定提交事件:x0dx0a即:x0dx0a都會帶上submit的值, 用js提交都檢測不到onsubmit狀態x0dx0aw3c： 提交一次x0dx0aie6: 分兩次提交，先js在form提交x0dx0a解決辦法：x0dx0a如果按鈕為submit則 檢測時用onsubmit事件檢測x0dx0a如果按鈕為button，則檢測通過后在觸發submit事件x0dx0a一定不要用js提交表單，然后又用onsubmit去檢測x0dx0a單純的用js提交表單, alert, ff下阻塞表單的提交，而其他瀏覽

2020-01-03 原生js中form表單提交的數據的格式

第一次寫這種文章。

1.    原生js中，form表單在提交數據的時候默認的編碼格式是application/x-www-form-urlencoded

2.    如果表單中有文件需要上傳，那么必須在form元素中添加除了action和method（如果是get請求，可以不添加method屬性。默認情況下，form表單以get方式提交表單數據）之外的第3個屬性enctype，并且設置enctype="multipart/form-data"。

參考頁面： HTML

javascript中怎么提交表單

H5edu教育html5開發為您解答：
辦法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>

js表單提交和submit提交的區別

js表單提交和submit提交的區別如下：

js提交表單時不會會帶上按鈕的參數傳遞到服務端。

而submit按鈕提交的時候會把button上的name和value一起作為請求參數傳遞到服務端。

舉例說明：

<form id="myfrom">

<input type="submit" onclick="doMySubmit()" name="MyList" value="SEND" class="button actionbutton" />

</form>

這里提交的時候會把參數名Mylist和參數值Send傳到目標地址

<form id="myfrom">

<input type="button" onclick="doMySubmit()" name="MyList" value="SEND" class="button actionbutton" />

</form>

提交的腳本:

function doMySubmit() {
var myform = document.getElementById('archFilterForm');
myform.myfield.value = "Hello World";
myform.submit();
}

這種情況下不會把button的參數帶給服務端。