不同div中有多个表单元素-提交一个会重置其他表单

Question

我正在尝试执行以下操作：我有一个包含多个div的页面，每个页面都包含一个图形和一个form元素（其中包含一个选择器，该选择器具有一些用于配置图形的选项）。 现在，当用户在其中一个div上提交表单时，该div中的图形会发生变化。 但是，如果用户决定在另一个div中提交另一个表单，则所有其他div中的表单都会重置为原始值，而忽略用户所做的任何选择。 我希望选择器能够记住它们的值，以便即使提交了页面上其他位置的表单，其他div也不会重新加载。
本质上，提交表单仅应重新加载其内部的div，而保留其他div。 从到目前为止的内容来看，Ajax似乎是解决此类问题的方法，但是我不确定如何将其合并到我的代码中。 这是我在做什么：

对于每个div，我都会动态创建表单：

    var form = document.createElement("form")
    var selector = document.createElement("selector")
    selector.setAttribute("onChange", "this.form.submit()")

（我还将动态地将各种选项添加到选择器中，但是我不包括该代码，仅涉及将选项附加到选择器的BC）

然后，稍后，基于选择器中的值，使用新设置刷新div中的图形。

请让我知道我的代码是否还有其他部分应该粘贴在这里。 我认为相关的部分是这部分（setAttribute（“ onChange”，“ this.form.submit（）”），其中this.form.submit（）是主要问题。

谢谢。

Answer 1

提交表单会撕毁整个页面，并将其替换为提交表单的结果。 这div于表单所在的div ，而是整个页面的操作。

如果您希望在发送表单数据时不刷新页面，那么ajax确实是您要执行的操作。 您已经标记了问题jquery ，所以这是一个简单的jQuery示例：

$("form").on("submit", function(e) {
    // Don't submit normally...
    e.preventDefault();

    // ...and then submit via ajax
    $.ajax({
        url: this.action,
        type: this.method,
        data: $(this).serialize()
    })
    .done(function(result) {
        // It worked...
    })
    .fail(function() {
        // It failed...
    });
});