[英]Loop through and submit multiple forms without reloading page using javascript
我有一個大約 40 個表單的頁面,當按下“全部保存”按鈕時,所有表單都需要提交。 問題是,當我嘗試遍歷表單並提交它們時,只有第一個表單被提交。 我將如何重構它以便提交頁面上的所有表單? 我意識到之前已經問過這個問題,並且可能的解決方案與 AJAX 有關,但我只是不確定如何實現這樣的事情。
到目前為止,我擁有的 Javascript 如下所示:
function SaveAllForms() {
document.getElementById("SaveAll").innerText = "Processing..";
var forms = document.forms;
for (var f = 0, fLen = forms.length; f < fLen; f++) {
var form = forms[f];
form.submit();
}
window.location.reload();
}
所有的表格看起來都像這樣。 我只包括一個,因為就像我說的,頁面上有大約 40 個:
<form action="/FormSubmitLocation" method="post" name="Feed3"> <tr>
<td>
<input type="hidden" name="PREcost" value="3.027" />
<input type="hidden" name="PREtaxadd" value="4.5" />
1
<input id="Zone" name="Zone" type="hidden" value="1 " />
</td>
<td>
SomeZone
<input id="ZoneDescription" name="ZoneDescription" type="hidden" value="SomeZone" />
</td>
<td>
SomeCity
<input id="Rack" name="Rack" type="hidden" value="SomeCity" />
</td>
<td>
SomeProduct
<input id="ActualProduct" name="ActualProduct" type="hidden" value="SomeProduct" />
</td>
<td>
3.027
<input data-val="true" data-val-number="The field Cost must be a number." id="Cost" name="Cost" type="hidden" value="3.027" />
</td>
<td>
0.69
<input id="Tax" name="Tax" type="hidden" value="0.686488 " />
</td>
<td>
<input class="form-control" data-val="true" data-val-number="The field DMarkup must be a number." id="DMarkup" name="DMarkup" onchange="calcNewMarkup(this.value,'PRE','Feed3');" onfocus="javascript:if (this.value!=''){calcNewMarkup(this.value,'PRE','Feed3')};" style="width: 70px;" type="text" value="69.58" />
</td>
<td>
<input Class="PREDretail form-control" id="DSell" name="DSell" onchange="calcNewMargin(this.value,'PRE','Feed3');" style="width: 70px;" type="text" value="3.859 " />
</td>
<td>
<input class="form-control" data-val="true" data-val-number="The field RMarkup must be a number." id="RMarkup" name="RMarkup" onchange="calcNewMarkupRemote(this.value,'PRE','Feed3');" onfocus="javascript:if (this.value!=''){calcNewMarkupRemote(this.value,'PRE','Feed3')};" style="width: 70px;" type="text" value="69.67" />
</td>
<td>
<input Class="PRERretail form-control" data-val="true" data-val-number="The field RSell must be a number." id="RSell" name="RSell" onchange="calcNewMarginRemote(this.value,'PRE','Feed3');" onfocus="javascript:if (this.value!=''){calcNewMarginRemote(this.value,'PRE','Feed3')};" style="width: 70px;" type="text" value="3.8599" />
</td>
<td>
<small id="Update3">3/1/2020 7:57:00 PM</small>
<input data-val="true" data-val-date="The field DateUpdated must be a date." id="DateUpdated" name="DateUpdated" type="hidden" value="3/1/2020 7:57:00 PM" />
</td>
<td>
<input data-val="true" data-val-number="The field cpid must be a number." data-val-required="The cpid field is required." id="cpid" name="cpid" type="hidden" value="641" />
<input data-val="true" data-val-number="The field orpid must be a number." data-val-required="The orpid field is required." id="orpid" name="orpid" type="hidden" value="6" />
<button type="submit" class="btn btn-default" id="Feed3">Update</button>
</td>
</tr>
任何有關如何使其工作的示例將不勝感激。
你甚至不需要 ajax 請求的表單......它是一種發送數據的舊方式。
無論如何,您應該防止表單的默認行為:
form.preventDefault();
您可以提交帶有目標的表單,包括 iframe。 除了調用 submit() 之外,您不需要 JavaScript 來執行此操作。 例如
<form target="iframe1_name" ...> ... </form>
<iframe name="iframe1_name" src="about:blank" style="display:none"></iframe>
您可以根據需要多次重復此操作,每個表單都將提交到其隱藏的 iframe。
https://jsfiddle.net/efdmsao8/
旁注:您可能希望避免調用重新加載,因為它會取消任何掛起的提交,或者將其包裝在超時中以允許它們在它之前完成
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.