JavaScript多表单 JavaScript可以用于处理多个表单的交互。通过使用事件监听器和DOM操作,可以实现在多个表单之间进行数据传递和处理。 在HTML中,可以为每个表单添加一个唯一的ID或类名,以便在JavaScript中通过选择器找到它们。可以使用document.getElementById()或document.querySelector()方法来获取表单元素。 一旦获取到表单元素,就可以使用addEventListener()方法来添加事件监听器。常见的表单事件有submit、r
JavaScript多表单 JavaScript可以用于处理多个表单的交互。通过使用事件监听器和DOM操作,可以实现在多个表单之间进行数据传递和处理。 在HTML中,可以为每个表单添加一个唯一的ID或类名,以便在JavaScript中通过选择器找到它们。可以使用document.getElementById()或document.querySelector()方法来获取表单元素。 一旦获取到表单元素,就可以使用addEventListener()方法来添加事件监听器。常见的表单事件有submit、r
如果我有一个像这样的表单,
我该如何通过JavaScript/jQuery提交它而不重定向到另一个视图?
我从Stack Overflow上读到了很多答案,但它们都会将我重定向到POST函数返回的视图。
问题的出现原因:用户花费了很多时间尝试使用jQuery或使用iframe的技巧来发送表单数据,但都没有成功。其中一个特定问题是无法通过jQuery将表单数据发送给Nginx后端,并且在contentType参数设置为false时,总是得到415错误。
解决方法:通过纯JavaScript的方式来解决这个问题。首先定义一个formSubmit函数,该函数接收一个事件参数。在函数内部,使用XMLHttpRequest对象来发送POST请求,并设置请求的URL、请求成功时的回调函数和请求失败时的回调函数。通过event.target获取触发事件的表单元素,使用FormData对象将表单数据转换为可发送的格式,并通过request.send方法发送请求。最后,使用event.preventDefault方法阻止表单的默认提交行为。
为了将表单提交事件与表单元素关联起来,可以使用attachFormSubmitEvent函数。该函数接收一个formId参数,通过document.getElementById方法获取对应的表单元素,并使用addEventListener方法为其添加submit事件监听器,当表单提交时调用formSubmit函数。
这个解决方法对于某些特定问题非常有效,例如发送表单数据给Nginx后端时遇到415错误的情况。
问题出现的原因:需要使用jQuery Ajax来实现表单的提交,但是希望能够手动调用提交函数。
解决方法:使用jQuery的Ajax方法来实现表单的提交,并创建一个名为SubForm的函数,在需要的时候手动调用这个函数来提交表单。
文章内容如下:
为了实现你想要的效果,你需要使用如下的jQuery Ajax方法:
$('#myForm').submit(function(e){ e.preventDefault(); $.ajax({ url: '/Car/Edit/17/', type: 'post', data:$('#myForm').serialize(), success:function(){ // 表单成功提交后的操作 } }); });
也可以尝试这种方法:
function SubForm(e){ e.preventDefault(); var url = $(this).closest('form').attr('action'), data = $(this).closest('form').serialize(); $.ajax({ url: url, type: 'post', data: data, success: function(){ // 表单成功提交后的操作 } }); }
最终的解决方案是:
这个方法完美地解决了问题。我通过`Html.ActionLink(...)`来调用这个函数。
function SubForm (){ $.ajax({ url: '/Person/Edit/.Id/', type: 'post', data: $('#myForm').serialize(), success: function(){ alert("worked"); } }); }
这个方法很好,但是我不希望它自动提交表单。我希望有一个名为`FUNCTION_WHICH_SUBMITES_FORM()`的函数来手动调用它,以便在需要的时候提交表单。像下面这样给出函数的名称来调用:
.ActionLink("Add a Report", "Create", "Reports", new { carId = Model.Id }, new { onclick = "FUNCTION_WHICH_SUBMITES_FORM()" })
这个方法成功了:
function SubForm (){ alert("1"); $.ajax({ url:'/Car/Edit/.Id/', type:'post', data:$('#myForm').serialize(), success:function(){ alert("fasf"); } }); }
由于你的帮助,我找到了解决办法,因此我会将我的解决方案添加到你的帖子中。
第二个解决方案可能也是可行的,可能还有其他的问题,但是既然你找到了解决办法,我们就不需要继续研究了!很高兴能帮到你。
感谢这个答案,它还帮助我在提交表单后在表单位置显示自定义文本。
我们应该开一个新的stackoverflow主题来讨论没有jQuery的解决方案。
JavaScript Multiple Forms问题的出现原因是需要在表单提交后执行一些操作,例如清空文本字段、将焦点返回到第一个字段等。解决方法是使用JavaScript来实现这些操作。可以通过将表单的action重定向到一个隐藏的
解决方法的具体步骤如下:
1. 添加一个隐藏的
2. 在表单中设置action为要提交的脚本,并将target设置为上述
3. 将标签的type由"submit"更改为"reset",并添加onclick事件来触发表单的提交:
需要注意的是,表单的target和
需要注意的是,如果你正在构建一个应用程序或大型网站,使用这种方法可能会导致页面重新加载到