jQuery多个表单提交 [英] jQuery Multiple Forms Submit

查看:70
本文介绍了jQuery多个表单提交的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我在页面上有4个表单。



< form id =form1>< / form>



< form id =form2>< / form>



< form id =form3>< / form>
<按照该顺序呈现

< form id =form4>< / form>





表单1和表单4发布到相同的php页面进行处理。
表单1有一个输入字段
表单4有多个字段,复选框和选择。



对于表单1或表单,最好的方法是什么4发送这两种形式的组合字段?



我试过jQuery,对于文本输入和复选框非常适用,但无法使其与Select一起使用。
尝试了将表单1和表单4合并,并使用css重新定位表单1,但无法获得正确的布局。

有没有更简单的方法来做到这一点?

解决方案

这是不可能的。您可以使用 serialize() serializeArray()方法获取表单数据并将其发布到服务器Ajax:


将一组表单元素作为字符串进行编码以提交。




  $('#send')。click(function(){
var firstFormData = $('form:eq(0)') .serializeArray();
var fourthFormData = $('form:eq(3)')。serializeArray();
$ .ajax({$ b $ url:'...',
type:'post',
data:firstFormData.concat(fourthFormData)
})。done(function(){
// ...
});
});


I have 4 forms on a page. I know that forms cannot be nested.

<form id="form1"></form>

<form id="form2"></form>

<form id="form3"></form>

<form id="form4"></form>

presented in that order.

Form 1 and Form 4 post to same php page for processing. Form 1 have 1 input field Form 4 have multiple fields, checkboxes and selects.

What is the best approach for both form 1 or form 4 sending the combined fields of both forms?

I've tried jQuery, works great for text input and checkbox, but can't get it to work with Select. Tried combining form 1 and form 4 and using css to repositioning form 1, but can't get the layout right.

Is there something simpler to do this?

解决方案

It's not possible. You can either use serialize() or serializeArray() method for getting forms' data and post them to the server using Ajax:

Encode a set of form elements as a string for submission.

$('#send').click(function() {
   var firstFormData  = $('form:eq(0)').serializeArray();
   var fourthFormData = $('form:eq(3)').serializeArray();
   $.ajax({
        url  : '...',
        type : 'post',
        data : firstFormData.concat(fourthFormData)
   }).done(function() {
       // ...
   });
});

这篇关于jQuery多个表单提交的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆