循环并提交多个表单,无需使用javascript重新加载页面
我有一个大约40张表格的页面,当按下“全部保存”按钮时,所有表格都需要提交。问题是,当我尝试循环表单并提交它们时,只有第一个表单被提交。我如何重构它,以便提交页面上的所有表单?我意识到以前有人问过这个问题,可能的解决方案与AJAX有关,但我不确定如何实现这样一个问题 到目前为止,我使用的Javascript如下所示:循环并提交多个表单,无需使用javascript重新加载页面,javascript,ajax,forms,Javascript,Ajax,Forms,我有一个大约40张表格的页面,当按下“全部保存”按钮时,所有表格都需要提交。问题是,当我尝试循环表单并提交它们时,只有第一个表单被提交。我如何重构它,以便提交页面上的所有表单?我意识到以前有人问过这个问题,可能的解决方案与AJAX有关,但我不确定如何实现这样一个问题 到目前为止,我使用的Javascript如下所示: function SaveAllForms() { document.getElementById("SaveAll").innerText = "Processing..
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();
}
函数SaveAllForms(){
document.getElementById(“SaveAll”).innerText=“处理..”;
var forms=document.forms;
for(var f=0,fLen=forms.length;f<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>
1.
某地
某地
某些产品
3.027
0.69
2020年3月1日下午7:57:00
更新
任何关于如何使其发挥作用的例子都将不胜感激 ajax请求甚至不需要表单。。。这是一种发送数据的老方法 无论如何,您应该防止表单的默认行为:
form.preventDefault();
您可以提交带有目标的表单,包括iFrame。除了按原样调用submit()之外,您不需要JavaScript来完成这项工作。比如说
<form target="iframe1_name" ...> ... </form>
<iframe name="iframe1_name" src="about:blank" style="display:none"></iframe>
。。。
您可以随时重复此操作,每个表单都将提交到其隐藏的iframe
旁注:您可能希望避免调用该重载,因为它会取消任何挂起的提交,或者在超时时间内将其包装,以允许它们在完成之前完成我将其放置在表单.submit()之前,它似乎挂在“Processing..”处。无需担心。form.submit().preventDefault()似乎可以做到这一点。它似乎会给页面添加不必要的混乱,而不仅仅是阻止默认行为。