假设您有一个“手写”的表格:
<form id="my_form" action="/my_endpoint" method="POST"
<!-- you need a line like this to PUT, DELETE, or PATCH -->
<input type='hidden' name='_method' value="PUT">
<!-- if you enabled csrf check -->
<input type='hidden' name='authenticity_token' value='<%= form_authenticity_token %>'>
<!-- a base input -->
<!-- send the param as an array by using [] in the name attribute -->
<input id="base_input" type='text' name='user_inputs[]'>
<input type='submit' value='submit'>
</form>
您还有一个按钮,可以向表单添加输入:
<button id="add_input">add input</button
您可以编写一些 jQuery 来向表单添加字段(此示例是 coffeescript):
# document ready block
$(->
$("#add_input").on "click", (e) ->
$form = $ "#my_form"
$baseInput = $ "#base_input"
$newInput = $baseInput.clone()
# clear entered text
$newInput.val ""
# remove base_input id
$newInput.attr "id", ""
# add the new input after the base input
$baseInput.after $newInput
)
在控制器中,您将有一个参数user_inputs
,它是一个字符串数组;如何处理这些数据取决于您。基本输入也可以是不同的类型(文本区域、复选框等),但在 jQuery 中,您必须使用不同的 javascript 方法来清除其先前的内容。