[Answered ]-"Plus" button in Django forms : user-added fields possible?

by

0👍

✅

Why don’t you just use checkboxes for the skills, and that way the user could check all the skills they want?

If you’re set on the add-a-field option though, you will probably want/need to use Javascript to add the new form field(s). However, handling the form after it is submitted will not change much, and will still take place in your same Django view.

Here is a brief code example that does what you want:

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>

Here is the same example, but using checkboxes instead:

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 either case, use the following in your view to get the “npc_skills” as a list:

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

2👍

enter image description herehttps://github.com/elo80ka/django-dynamic-formset

Try this out.

in your html file

<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',
    });
});

The image shown is from my work that is created by jquery formset. I hope the same thing is you want.

👤SOBIR N

Leave a comment