Question

新手在这里。我在rails中构建一个应用程序，我正在尝试使用jquery来捕获表单中多个选择框的值。我试图尽可能简化这一点。

表单html：

<form action="/units" data-remote="true" id="add_form" method="post">

<select class="select_box" id="box_1">
<option value="1">1</option>
<option selected="selected" value="2">2</option>
<option value="3">3</option>
</select>

<select class="select_box" id = "box_2"
<option value="1">1</option>
<option value="2">2</option>
<option selected="selected" value="3">3</option>
</select>

*... additional select boxes...*

<input disable_with="Loading..." name="commit" type="submit" value="Submit" />

</form>

在我的 application.js 中，我想捕获每个选择框的选定值。

我尝试使用serialize()但无法使用它，因为表单是使用javascript动态生成的（即在最初加载页面时不是DOM的一部分）。

由于有很多表单元素（~20），我想避免逐个使用表单元素来捕获数据，例如

var val_1 = $("#box_1").find(":selected").val()
var val_2 = $("#box_2").find(":selected").val()
...

有没有什么方法可以捕获给定类元素的所有选定值（即.select_box）并将它们存储在数组中？

或许类似于：

var form_data = $(".select_box").find(":selected").data()

或以某种方式遍历类.select_box的元素？

只是不能完全理解这一个。谢谢！

Answer 1

data()方法用于获取元素data属性的值。

您可以使用serialize()元素上的form方法检索表单中所有元素的值。

或者您可以使用val()方法检索每个元素的值。

即：$("#textfield_id").val(); // gets the value of a textfield

Answer 2

这是您获取相关数据的方法：

var form_data = $(".select_box").find(":selected").map(function (index) {
            return ($(this))[0].value;
        });

这就是你可以将它转换为JSON以便发送到服务器的方法：

JSON.stringify(form_data.get())

Answer 3

您应该使用serialize()序列化（如Kyle所说）表单数据，然后发布表单。试试这个：

$.post( "yourPageUrl", $( "#add_form" ).serialize() );

使用jquery捕获表单数据并使用ajax调用发布

3 个答案: