Javascript 多表格提交不起作用

谁能帮帮我吗。我已经回答了一个类似的问题，但无法解决我的问题，所以我在这里尽量详细。对不起，如果这是一个重复，但我真的在这方面需要帮助

我试图通过鼠标悬停事件将三个表单提交到同一asp页面。asp页面根据提交的表单及其包含的数据执行代码以保存图像。我试过几种方法来做到这一点。按如下所示依次提交会导致创建部分或全部图像，但这是随机的，后续提交似乎覆盖了以前的调用

function save_all_des(){
    document.getElementById("form_zoom1").submit();
    document.getElementById("form_zoom2").submit();
    document.getElementById("form_zoom3").submit();
}

我也尝试过像这样使用jquery：

$("#create_image").mouseover(function() {
    $("#form_zoom1").submit(function() {
    $("#form_zoom2").submit(function() {
    $("#form_zoom3").submit();
    });
    });
});

function submitForm(form) {
    $.ajax({
        url: 'abc.asp',
        method: 'post',
        data: {
            tab : $('input[name="tab"]',form).val()
        },
        success: function(data) {
            /* handle the response from the server here
            if you don't need to do anything to the structure of the page, you can probably just leave this blank
            may want to put in some console.log or alert statements for debugging purposes
            */
        }
    });
}

$('#create_image').mouseover(function() {
    submitForm($('#form_zoom1'));
    submitForm($('#form_zoom2'));
    submitForm($('#form_zoom3'));
});

这根本不起作用，即使我只尝试一种形式。（鼠标悬停事件本身触发ok。）

这三个表单具有相同的输入名称（我只显示了一个），但值不同。他们单独提交ok

<form id="form_zoom1" name="form_zoom1"  action="abc.asp" target="MyFrame">
    <input type="hidden" name="tab" value="1">
</form>
<form id="form_zoom2" name="form_zoom2"  action="abc.asp" target="MyFrame2">
    <input type="hidden" name="tab" value="2">
</form>
<form id="form_zoom3" name="form_zoom3"  action="abc.asp" target="MyFrame3">
    <input type="hidden" name="tab" value="3">
</form>

<iframe id="MyFrame" name="MyFrame" style="display:none;"></iframe>
<iframe id="MyFrame2" name="MyFrame2" style="display:none;"></iframe>
<iframe id="MyFrame3" name="MyFrame3" style="display:none;"></iframe>

如何确保在提交第二份、第三份表单之前，完成一份表单提交文件背后的代码

谢谢你的帮助。

---

谢谢

听起来您最好使用AJAX向服务器发送POST请求，而不是实际提交表单。您可以同时发送所有三个请求，并使其正常工作，但这完全取决于您在提交后对服务器响应所做的操作

请参阅，以获取有关使用它执行AJAX调用的更多信息

示例代码可能如下所示：

$("#create_image").mouseover(function() {
    $("#form_zoom1").submit(function() {
    $("#form_zoom2").submit(function() {
    $("#form_zoom3").submit();
    });
    });
});

function submitForm(form) {
    $.ajax({
        url: 'abc.asp',
        method: 'post',
        data: {
            tab : $('input[name="tab"]',form).val()
        },
        success: function(data) {
            /* handle the response from the server here
            if you don't need to do anything to the structure of the page, you can probably just leave this blank
            may want to put in some console.log or alert statements for debugging purposes
            */
        }
    });
}

$('#create_image').mouseover(function() {
    submitForm($('#form_zoom1'));
    submitForm($('#form_zoom2'));
    submitForm($('#form_zoom3'));
});

---

请注意，它几乎同时发送三个AJAX POST请求，每个表单一个。无法保证他们会按此顺序完成（尽管考虑到您提供的信息，这似乎并不重要）。

感谢您的回复。不幸的是，我是javascript新手，所以jquery和AJAX对我来说更为陌生。服务器创建一个映像，并使用一些详细的asp代码将其保存到服务器。就用户而言，他们看不到任何变化。然后可以通过Lightbox查看图像。你能给我举个你建议的例子吗？我担心AJAX目前还不适合我。@user1101686根据您提供的信息，我已经编辑了答案，其中包含了一些jQuery代码，这些代码可能会满足您的要求。它（大致）同时发送所有三个请求，而不是等待第一个请求完成后再发送下一个请求，尽管我认为这不会成为问题。谢谢。我会试试看，然后告诉你我能不能让它工作。安东尼。我已经使用了您的代码，但在“tab:$…”行中出现语法错误。你知道为什么吗？@Mark_54 Gah！删除该行末尾的分号，不需要。我的错误-我也会编辑答案。