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

时间:2015-08-02 14:29:36

标签: javascript jquery html ajax forms

我正在尝试执行以下操作: 我有一个包含多个div的页面,每个div包含一个图形和一个表单元素(包含一个选择器,它有一些选项来配置图形)。 现在,当用户在其中一个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()是主要问题。

谢谢。

1 个答案:

答案 0 :(得分:0)

提交表单会删除整个页面,并将其替换为提交表单的结果。这与表单所在的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...
    });
});