通过表单提交多个选项卡内容 .submit答案

【问题标题】：Submitting multiple tab content via a form .submit通过表单提交多个选项卡内容 .submit
【发布时间】：2014-06-03 04:25:04
【问题描述】：

我有一个 API，它从允许用户发送消息的单个页面表单中接收所有数据。当用户点击“提交”时调用 API，触发表单提交。

我目前正在添加多标签功能，因此用户可以在标签中创建和发送多条消息。

有没有办法提交每个单独的选项卡内容并循环浏览每个选项卡，同时只需单击一次“提交”？

以下是用户可能创建的选项卡式内容示例：http://www.bootply.com/61679

任何帮助将不胜感激！

【问题讨论】：

标签： javascript jquery html ruby-on-rails twitter-bootstrap

【解决方案1】：

当然可以。重要的是您放置表单标签的位置。在您的情况下，由于您想将所有选项卡一起提交，因此您可以放置 <form> 标签，使其覆盖 .tab-content 内的所有字段。

<form id="api-form" method="post" action="">
 <div class="tab-content">
   <!-- ... -->
 </div>
 <!-- Submit button -->
 <input type="submit" class="btn btn-success" value="Submit"> 
</form>

此外，字段名称应相同，后缀[]。

<input type="text" name="message[]">

这样您可以保存多个具有相同名称的值。不确定如何在 ruby-on-rails 上调用它，但您需要遍历它们。

【讨论】：

其实我需要单独提交每个tab。我不能一次全部发送。这些选项卡实际上以更大的形式存在，尽管它们具有由选项卡共享的内容。每个选项卡中的消息是关于它们的唯一独特部分。
@iamryandrake 删除我的最后一条评论。如果您必须单独提交每个选项卡，您可以在每个选项卡中的字段周围的标记内附加 <form> 标记和 submit 按钮。 Like <form><input type="text"><input type="submit"></form> -> 每个选项卡中的布局相似。

【解决方案2】：

使用ajax。

Step-1) 为提交按钮定义一个 javascript 函数。

Step-2) 从该函数的每个选项卡中获取消息内容，然后使用 ajax 将其发送到您的服务器。

Step-3) 只需在 OnSubmit 属性上调用定义的函数表单标签也可以使用按钮标签的 OnClick 属性。

通过这种方法，您甚至可以使用一个按钮同时将这些消息发送到多个 url。

Here 是一个使用 ajax 的演示。

在演示中只发送了 1 个 GET 请求。

可以使用一个函数发送类似的多个 GET 或 POST 请求。

【讨论】：