Wie verschachteln sich Schienen in einer Form?

Question

Das Szenario ist, dass ich ein Post Formular, das verwendet wird, um aufzeichnen, welche Früchte ich in einer Mahlzeit, einschließlich picture, content, viele Arten von fruit. Das Modell Beziehung ist, dass

Post has_many fruits 
Fruit belong_to post 

I Jquery-ui usee autocomplete zu machen, um Benutzer zu helfen, ihre Früchte zu geben. Nachdem sie das Fruchtsymbol eingegeben haben, wird unter dem Eingabefeld ein Tag erstellt. Gefällt Ihnen dieses

jedoch, wie schaffe ich dies in Form? Ich dachte über dynamische verschachtelte Form nach, aber ich möchte nicht, dass es viele Formulare gibt, ich wünschte, es gäbe nur eine Eingabe und dasselbe mit dynamischer verschachtelter Form.

Hier ist die github, bitte lassen Sie mich wissen, wenn ich weitere Informationen bereitstellen muss.

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>

Hinweis: Ich habe nicht viel Ahnung von Auto-Vervollständigen-Plugin haben, so habe ich die Funktion addFruitTag(), nennen Sie es erstellt, wo Sie Ihre Funktion aufrufen von Hash-Tags hinzuzufügen Früchte.

Und wenn Sie das Formular an den Server senden, können Sie die hinzugefügten Früchte durch Zugriff auf die fruits[] Variable abrufen, die ein Array mit den ausgewählten Früchten Tags sein wird.