Question

我已经尝试在Google上寻找一些答案，而这里也是如此，但我真的很难找到任何与我的问题有关的东西。我玩过Formsets，Model选择字段等，没有结果。

所以这里是：我有一个表单，用户可以使用该表单创建具有名称，类，级别和技能的NPC（非玩家角色）。可能的技能数量并未修复，因此NPC可以拥有3种技能，因为他可以拥有10种技能，具体取决于用户的需求。是否有可能为用户提供添加＆＃34;技能＆＃34;字段（下拉栏）即时到此表单，例如使用＆＃34;添加技能＆＃34;按钮？

有没有办法用Django / Python（包括额外的django模块）来做这个，或者用Javascript更容易吗？

非常感谢任何读这篇文章的人，以及任何有用的答案，可以指出我正确的方向！

Answer 1

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

试试这个。

你的html文件中的

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

显示的图像来自我的工作，由jquery formset创建。我希望你想要同样的事情。

Answer 2

为什么不使用复选框来获取技能，这样用户可以检查他们想要的所有技能？

如果你设置了add-a-field选项，你可能需要/需要使用Javascript来添加新的表单字段。但是，在提交表单后处理表单不会有太大变化，并且仍然会在您的Django视图中进行。

以下是一个简短的代码示例，可以执行您想要的操作：

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>

以下是相同的示例，但改为使用复选框：

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>

在任何一种情况下，请在视图中使用以下内容将“npc_skills”作为列表：

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

＆＃34;加上＆＃34; Django表单中的按钮：用户添加的字段可能吗？

2 个答案: