레일은 하나의 양식에서 중첩 된 양식을 수행하는 방법은 무엇입니까?

Question

시나리오는 내가 picture, content, 많은 종류의 fruit을 포함하여 한 끼에 먹는 과일을 기록하는 데 사용되는 Post 양식을 디자인하려고합니다. 모델 관계는

Post has_many fruits 
Fruit belong_to post 

나는 사용자가 자신의 열매를 입력 할 수 있도록하기 위해 autocomplete를 만들기 위해 Jquery-ui을 usee 점이다. 과일 태그를 입력하면 입력 필드 아래에 태그가 생성됩니다. 이

처럼 그러나 어떻게 형태로이를 만드는 방법? 나는 동적 인 중첩 된 폼에 대해 생각했다. 그러나 폼이 많이 있기를 원하지 않는다. 하나의 입력 만 있고 동적 인 중첩 된 폼으로 같은 것을하기를 바란다.

여기에 github입니다. 자세한 정보를 제공해야하는지 알려주세요.

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[] 변수에 액세스하여 추가 된 과일을 검색 할 수 있습니다.이 과일은 선택한 과일 태그가 포함 된 배열입니다.