レールはどのように1つのフォームでネストされたフォームを作成しますか？

Question

picture,content、多くの種類のfruitを含めると、1つの食事で何を食べるのかを記録するために使用されるPostフォームを設計したいと考えています。 モデルの関係は

Post has_many fruits 
Fruit belong_to post 

は、私は、ユーザーが自分の実を入力するのを助けるためにautocompleteを作るためにJquery-uiをusee、ということです。彼らはフルーツタグを入力した後、入力フィールドの下にタグを作成します。この

同様 は、しかし、どのように私は形でこれを作成するには？私は動的なネストされたフォームについて考えましたが、フォームがたくさんあることは望ましくありません。入力が1つしかなく、動的なネストされたフォームで同じことをしたいと思っています。

ここには​​がありますので、詳細をお知らせください。

Answer 1

$(document).on('click','#add_fruit',function(e){ 
 
    e.preventDefault(); 
 
    addFruitTag(); 
 
}); 
 

 
function addFruitTag(){ 
 
    var content = $('#content').val().trim(); 
 
    var fruit = $('#fruit').val().trim(); 
 
    if(content.length <1 || fruit.length < 1){ 
 
    alert("Please fill content and fruit"); 
 
    }else{ 
 
     $('#fruit_tags').append(
 
     $('<input>') 
 
     .attr('type','checkbox') 
 
     .attr('name','fruits[]') 
 
     .attr('value',$('#fruit').val()) 
 
     .prop('checked','true') 
 
    ) 
 
     .append(
 
     $('<label>') 
 
     .text($('#fruit').val())  
 
    ) 
 
     .append($('<br>')); 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<form action="#" method="GET"> 
 
    Content : <input type="text" id="content" name="content"><br/> 
 
    Fruit : <input type="text" id="fruit"> 
 
    <button id="add_fruit">Add Fruit</button><br/> 
 
    <div id="fruit_tags"> 
 
    </div> 
 
    <input type="submit" value="Create Post"> 
 
</form>

注：私はオートコンプリートのプラグインについて多くのアイデアを持っていないので、私は機能addFruitTag()を作成している、あなたはのハッシュタグを追加するあなたの関数を呼び出しているところそれを呼び出します果物。

サーバーにフォームを送信するときに、fruits[]変数にアクセスすると、追加されたフルーツを取得できます。これは、選択したフルーツタグを含む配列になります。