0

这让我发疯，数小时的谷歌搜索和 RTFM'ing 也无济于事。我需要知道专家将如何处理分布在多个 div 中的表单。我的第一个选择是像这样在所有 div 周围放置一个表格，然后求助于祈祷：

代码（JSfiddle）：

<div class='A'>
   <form id='fooForm' method='post' action='foo.php'>
      <div class='B1'>
         ...
      </div>
      <div class='B2'>
         <div class='B2-1'>
            ...
         </div>
         <div class='B2-2'>
            ...
         </div>
      </div>
   </form>
</div>

但这会导致所有东西都聚集在一起

结果： 在此处输入图像描述

我决定做的是将表单移出一个虚拟表单，然后处理更新值并使用该jquery.submit方法，如下所示：

代码（JSfiddle）：

<div class='A'>
   <div class='B1'>
      ...
   </div>
   <div class='B2'>
      <div class='B2-1'>
         ...
      </div>
      <div class='B2-2'>
         ...
      </div>
      ... 
   </div>
</div>
<form id='fooForm' method='post' action='foo.php'>
</form>

现在看起来是我想要的样子

结果： 在此处输入图像描述

但是现在我必须通过创建虚拟input和select元素并在每次用户进行更改时更新它们的值来创建所有值，或者在最后调用之前执行此操作form.submit。我的问题是否可以只使用 jQuery 的post()方法来模拟表单的功能？我知道表单提供了自动打包并将值发送到服务器的好处，但它们的限制太严格了。

4

2 回答 2

1

是的，有可能，你可以用 $.post() 发送任何你想要的东西，严格来说你甚至不需要表单元素，只需将正确的数据对象传递给函数。

如果您仍然要使用正确的形式，您可以使用第一个 jquery 序列化方法从输入中获取值。http://api.jquery.com/serialize/

于 2012-11-07T07:12:02.877 回答
0

就结构化而言，使用 html列表来构造表单内的所有内容。

<form id="form1" >
<ul>
<li><input /></li>
<li><select></li>
</ul>
</form>

然后使用表单序列化提交表单，方法是使用将所有表单元素发送到服务器的 jquery ajax。

并防止刷新您的页面使用event.preventDefault()

代码：

$('#submit').on("click",function(event) {
event.preventDefault( );
$.post("url",$('#form-id').serialize( ),function(data){}); }
}
于 2012-11-07T08:42:01.430 回答