「手で」書いたフォームがあるとします。
<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
コントローラーには、文字列の配列である paramsがあります。このデータをどうするかはあなた次第です。ベース入力は別のタイプ (テキストエリア、チェックボックスなど) にすることもできますが、jQuery では別の JavaScript メソッドを使用して前のコンテンツをクリアする必要があります。