"Plus" -Schaltfläche in Django-Formularen: vom Benutzer hinzugefügte Felder möglich?

Ich habe versucht, nach einer Antwort auf Google und hier auf SO zu suchen, aber ich bin wirklich schwer zu finden, auch nur entfernt mit meinem Problem verbunden. Ich habe herum gespielt mit Formsets, Modellwahlfeld und so, ohne Ergebnisse."Plus" -Schaltfläche in Django-Formularen: vom Benutzer hinzugefügte Felder möglich?

Also hier ist es: Ich habe ein Formular, aus dem ein Benutzer NPCs (Non-Player-Charaktere) mit einem Namen, einer Klasse, einem Level und einem Skill erstellen kann. Die Anzahl der möglichen Fertigkeiten ist nicht festgelegt, also könnte ein NPC 3 Fähigkeiten haben, da er 10 haben könnte, abhängig von den Bedürfnissen des Benutzers. Ist es möglich, dem Benutzer die Möglichkeit zu geben, "skill" -Felder (Dropdown-Leisten) zu diesem Formular hinzuzufügen, zum Beispiel mit einer Schaltfläche "add skill"?

Gibt es eine Möglichkeit, dies mit Django/Python (einschließlich zusätzlicher django-Module) zu tun, oder wäre es einfacher mit, sagen wir, Javascript?

Vielen Dank an alle, die dies lesen, und für jede hilfreiche Antwort, die mir in die richtige Richtung zeigen könnte!

Quelle

2017-05-01 Patapon

Warum verwenden Sie nicht nur Kontrollkästchen für die Fähigkeiten, und auf diese Weise könnte der Benutzer alle Fähigkeiten überprüfen, die sie wollen?

Wenn Sie jedoch auf die Option zum Hinzufügen eines Felds eingestellt sind, möchten/müssen Sie wahrscheinlich Javascript verwenden, um das/die neue (n) Formularfeld (e) hinzuzufügen. Die Handhabung des Formulars nach der Übermittlung ändert jedoch nicht viel und wird immer noch in der gleichen Django-Ansicht stattfinden.

Hier ist ein kurzes Codebeispiel, das tut, was Sie wollen:

function confirm(event) { 
 
    // event.preventDefault(); 
 
    document.getElementById("confirmation").style.display = "block"; 
 
    return false; 
 
}; 
 

 
function addSkill() { 
 

 
    var newSkillField = document.createElement("LI"); 
 
    selectNode = ` 
 
      <select form="npc_form" name="npc_skills"> 
 
      <option value="skill_one">Skill 1</option> 
 
      <option value="skill_two">Skill 2</option> 
 
      <option value="skill_three">Skill 3</option> 
 
      <option value="skill_four">Skill 4</option> 
 
     </select> 
 
    `; 
 
    newSkillField.innerHTML = selectNode; 
 

 
    var skill_list = document.getElementById("skill-list"); 
 
    skill_list.insertBefore(newSkillField, document.getElementById("add-skill-li")); 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
</head> 
 

 
<body> 
 

 

 
    <form action="/your-url/" method="post" id="npc_form"> 
 
    <br> 
 
    <label for="npc_name">Name: </label> 
 
    <input id="npc_name" type="text" name="npc_name" placeholder="NPC Name"> 
 

 
    <br> 
 
    <label for="npc_class">Class: </label> 
 
    <select form="npc_form" name="npc_class"> 
 
     <option value="class_one">Class 1</option> 
 
     <option value="class_two">Class 2</option> 
 
     <option value="class_three">Class 3</option> 
 
    </select> 
 

 
    <br> 
 
    <label for="npc_level">Level: </label> 
 
    <input type="number" name="npc_level" min="1" max="100" value="1"> 
 

 
    <br> 
 
    <label for="npc_skills">Skills: </label> 
 
    <ul id="skill-list"> 
 
     <li> 
 
     <select form="npc_form" name="npc_skills"> 
 
      <option value="skill_one">Skill 1</option> 
 
      <option value="skill_two">Skill 2</option> 
 
      <option value="skill_three">Skill 3</option> 
 
      <option value="skill_four">Skill 4</option> 
 
     </select> 
 
     </li> 
 
     <li id="add-skill-li"> 
 
     <input type="button" value="Add Skill" onclick="addSkill();" id="add-skill"> 
 
     </li> 
 
    </ul> 
 

 
    <!-- comment this out to actually submit --> 
 
    <input type="button" value="Submit" onclick="confirm();"> 
 

 
    <!-- uncomment this to actually submit --> 
 
    <!-- <input type="submit" value="Submit"> --> 
 
    </form> 
 

 
    <p style="display: none; color: green;" id="confirmation">Submitted!</p> 
 

 
</body> 
 

 
</html>

Hier ist das gleiche Beispiel, aber Kontrollkästchen anstelle:

function confirm(event) { 
 
    // event.preventDefault(); 
 
    document.getElementById("confirmation").style.display = "block"; 
 
    return false; 
 
};

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
</head> 
 

 
<body> 
 

 

 
    <form action="/your-url/" method="post" id="npc_form"> 
 
    <br> 
 
    <label for="npc_name">Name: </label> 
 
    <input id="npc_name" type="text" name="npc_name" placeholder="NPC Name"> 
 

 
    <br> 
 
    <label for="npc_class">Class: </label> 
 
    <select form="npc_form" name="npc_class"> 
 
     <option value="class_one">Class 1</option> 
 
     <option value="class_two">Class 2</option> 
 
     <option value="class_three">Class 3</option> 
 
    </select> 
 

 
    <br> 
 
    <label for="npc_level">Level: </label> 
 
    <input type="number" name="npc_level" min="1" max="100" value="1"> 
 

 
    <br> 
 
    <label for="npc_skills">Skills: </label> 
 
    <ul id="skill-list"> 
 
     <li> <input type="checkbox" name="npc_skills" value="skill-one">Skill 1 </li> 
 
     <li> <input type="checkbox" name="npc_skills" value="skill-two">Skill 2 </li> 
 
     <li> <input type="checkbox" name="npc_skills" value="skill-three">Skill 3 </li> 
 
     <li> <input type="checkbox" name="npc_skills" value="skill-four">Skill 4 </li> 
 
    </ul> 
 

 
    <!-- comment this out to actually submit --> 
 
    <input type="button" value="Submit" onclick="confirm();"> 
 

 
    <!-- uncomment this to actually submit --> 
 
    <!-- <input type="submit" value="Submit"> --> 
 
    </form> 
 

 
    <p style="display: none; color: green;" id="confirmation">Submitted!</p> 
 

 
</body> 
 

 
</html>

In jedem Fall folgende in Ihrer Ansicht verwenden, um die "npc_skills" als Liste zu erhalten:

npc_skills = request.POST.getlist('npc_skills') 
# if you selected/checked skills one and three: npc_skills = ['skill_one', skill_three']

Quelle

2017-05-01 18:55:14

Vielen Dank, das funktionierte gut, mit ein paar Optimierungen, um einige andere Elemente hinzuzufügen und an mein Projekt anzupassen. Es ist mit den Drop-Down-Optionen verbunden, da die Anzahl der Skills etwas zu groß ist, um sie bequem mit Checkboxen anzuzeigen. :) – Patapon

https://github.com/elo80ka/django-dynamic-formset

dies ausprobieren.

in der HTML-Datei

<form method="post" action="{{url}}"> 
    {% csrf_token %}   
    <table> 
     <thead> 
      <tr> 
       <th>Skill</th> 
       <th class="one"></th> 
      </tr> 
     </thead> 
     <tbody> 
      {% for form in skill_formset.forms %} 
       <tr class="check_items_row form_set_row">   
        <td> 
         {{form.id}} 
         <span class="name">        
          {{ form.name }} 
         </span> 
        </td> 
        <td class="one">{% if form.instance.pk %}{{ form.DELETE }}{% endif %}</td> 
       </tr> 
      {% endfor %} 
     </tbody> 
    </table> 
    {{ skill_formset.management_form }} 
    <div class="m-t-20"> 
     <button type="submit" class="btn btn-info waves-effect">Submit</button> 
    </div> 
</form> 

<script type="text/javascript" src="{% static 'js/jquery.formset.js' %}"></script> 
$(document).ready(function(){ 
    $('.skill_formset table tr.form_set_row').formset({ 
    prefix: '{{ skill_formset.prefix }}', 
    formCssClass: 'dynamic-formset1', 
    }); 
});

Das Bild von meiner Arbeit gezeigt, die von jquery formset erstellt wird. Ich hoffe, dass du dasselbe willst.

Quelle

2017-05-01 18:59:25

"Plus" -Schaltfläche in Django-Formularen: vom Benutzer hinzugefügte Felder möglich?

Antwort

Verwandte Themen