我正在尝试执行以下操作: 我有一个包含多个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()是主要问题。
谢谢。
答案 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...
});
});