JavaScript多表单 JavaScript可以用于处理多个表单的交互。通过使用事件监听器和DOM操作,可以实现在多个表单之间进行数据传递和处理。 在HTML中,可以为每个表单添加一个唯一的ID或类名,以便在JavaScript中通过选择器找到它们。可以使用document.getElementById()或document.querySelector()方法来获取表单元素。 一旦获取到表单元素,就可以使用addEventListener()方法来添加事件监听器。常见的表单事件有submit、r

17 浏览
0 Comments

JavaScript多表单 JavaScript可以用于处理多个表单的交互。通过使用事件监听器和DOM操作,可以实现在多个表单之间进行数据传递和处理。 在HTML中,可以为每个表单添加一个唯一的ID或类名,以便在JavaScript中通过选择器找到它们。可以使用document.getElementById()或document.querySelector()方法来获取表单元素。 一旦获取到表单元素,就可以使用addEventListener()方法来添加事件监听器。常见的表单事件有submit、r

如果我有一个像这样的表单,

...

我该如何通过JavaScript/jQuery提交它而不重定向到另一个视图?

我从Stack Overflow上读到了很多答案,但它们都会将我重定向到POST函数返回的视图。

0
0 Comments

问题的出现原因:用户花费了很多时间尝试使用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错误的情况。

0
0 Comments

问题出现的原因:需要使用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的解决方案。

0
0 Comments

JavaScript Multiple Forms问题的出现原因是需要在表单提交后执行一些操作,例如清空文本字段、将焦点返回到第一个字段等。解决方法是使用JavaScript来实现这些操作。可以通过将表单的action重定向到一个隐藏的

2. 在表单中设置action为要提交的脚本,并将target设置为上述