L oop через и отправить несколько форм без перезагрузки страницы, используя javascript

Question

У меня есть страница около 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,&#39;PRE&#39;,&#39;Feed3&#39;);" onfocus="javascript:if (this.value!=&#39;&#39;){calcNewMarkup(this.value,&#39;PRE&#39;,&#39;Feed3&#39;)};" style="width: 70px;" type="text" value="69.58" />
    </td>
    <td>
        <input Class="PREDretail form-control" id="DSell" name="DSell" onchange="calcNewMargin(this.value,&#39;PRE&#39;,&#39;Feed3&#39;);" 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,&#39;PRE&#39;,&#39;Feed3&#39;);" onfocus="javascript:if (this.value!=&#39;&#39;){calcNewMarkupRemote(this.value,&#39;PRE&#39;,&#39;Feed3&#39;)};" 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,&#39;PRE&#39;,&#39;Feed3&#39;);" onfocus="javascript:if (this.value!=&#39;&#39;){calcNewMarginRemote(this.value,&#39;PRE&#39;,&#39;Feed3&#39;)};" 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>

Любые примеры того, как заставить это работать, были бы очень благодарны.

Answer 1

вам даже не нужны формы для ajax запросов ... это старый способ отправки данных.

В любом случае вам следует запретить поведение форм по умолчанию:

form.preventDefault();

Answer 2

Вы можете отправлять формы с целью, включая iframes. Вам не нужно JavaScript делать это вне вызова submit () как есть. Например,

<form target="iframe1_name" ...> ... </form>
<iframe name="iframe1_name" src="about:blank" style="display:none"></iframe>

Вы можете повторять это столько раз, сколько хотите, каждая форма будет отправлять свой скрытый iframe.

https://jsfiddle.net/efdmsao8/

Примечание: вы можете не вызывать эту перезагрузку, так как она отменит любые ожидающие отправки, или обернуть ее в тайм-аут, чтобы позволить им завершить sh до того, как