javascript - 使用多个单选按钮模拟 ManyToManyField

Question

Django ManyToManyField 在 HTML 中呈现如下内容:

<form action="" method="post">
  <select name="answers" multiple="multiple">
    <option value="1" >Question 1, Answer 1</option>
    <option value="2">Question 1, Answer 2</option>
    <option value="3">Question 1, Answer 3</option>
    <option value="4">Question 2, Answer 1</option>
    <option value="5">Question 2, Answer 2</option>
  </select>
  <input type="submit">
</form>

我可以从问题 1 组中手动选择一项，并从问题 2 组中手动选择一项。当它在 POST 请求中发送时，我得到一个包含 answers = [1, 3] 或类似内容的 POST 数组。

我想从单选按钮组中获得相同的行为，因为这是一个更适合单选按钮的问题。例如，如果我执行以下操作:

<form action="" method="post">
    <fieldset>
        <legend>Question 1</legend>
        <input name="answers" id="id_1" value="1" type="radio">
        <label for="id_1">Answer 1</label>
        <br>

        <input name="answers" id="id_2" value="2" type="radio">
        <label for="id_2">Answer 2</label>
        <br>

        <input name="answers" id="id_3" value="3" type="radio">
        <label for="id_3">Answer 3</label>
        <br>
    </fieldset>
    <fieldset>
        <legend>Question 2</legend>
        <input name="answers" id="id_4" value="4" type="radio">
        <label for="id_4">Answer 1</label>
        <br>
        <input name="answers" id="id_5" value="5" type="radio">
        <label for="id_5">Answer 2</label>
        <br>
    </fieldset>
</form>

它实际上并没有让用户一次选择多个单选按钮。另一方面，如果我将单选按钮命名为 answers[0] 和 answers[1]，在 POST 中，它会发送两个具有这些名称的独立实体，而不是发送一个组合答案。

我问是因为在后端，我有一个 Django ManyToManyField 和一个带有自定义小部件的 ModelForm，我正在尝试将数据保存到ManyToManyField 来自这个自定义小部件，没有在后端诉诸太多诡计，但我不断收到错误“输入值列表”。

编辑:JavaScript 是可以接受的，只要它不发送原始数据，Django 继承/自定义解析也是如此。

编辑 2:这是我现在的 ManyToManyField 小部件。

{% if questions %}
    {% for question in questions %}
        <fieldset>
            <legend>{{ question.question }}</legend>
            {% if question.options %}
                {% for option in question.options %}
                    <input type="checkbox"  class="form-check-input" name="answers" id="id_{{ option.id }}" value="{{ option.id }}">
                    <label for="id_{{ option.id }}">{{ option.text }}</label>
                    <br>
                {% endfor %}
            {% else %}
                <p>No options for this question.</p>
            {% endif %}
        </fieldset>
    {% endfor %}
{% else %}
    <p>No questions in test.</p>
{% endif %}

Answer 1

It doesn't actually let the user select more than one radio button at once. On the other hand, if I name the radio buttons answers[0] and answers[1], in POST, it sends two separate entities with those names instead of sending a combined answers.

这并不能满足你的要求，但至少解开了一个谜。当您使用 answers[] 作为名称时，后端会将其识别为数组并将所有值连接到数组中。这对于除单一(单选/选择)之外的任何输入类型都是可能的。

这是您可以使用的 js 解决方案，但您的情况表明您使用的模型不是这种情况下的最佳选择。当然，它可以像下面这样用 hacky 的方式解决，但是当你遇到这段代码时，你总是必须解决变通办法..

所以我的建议:改变后端的方法

document.getElementById('answers').onsubmit = function(e) {
  e.preventDefault(); //prevent submit;
  let clone = this.cloneNode(true);
  let inputs = clone.querySelectorAll('input[type=radio]');
  let formData = new FormData(clone); // HTML5
  // dumb check for validity
  if (Array.from(formData.values()).length != clone.querySelectorAll('fieldset').length) {
  	alert('Invalid form!')
  	return false;
  }  
  for (let i=0;i<inputs.length;i++) {
    inputs[i].type = "checkbox";
    inputs[i].name = "answers[]";
  }
  // only for snippet
  formData = new FormData(clone);
  console.log(Array.from(formData.entries()));
  // commented in snippet
  //clone.submit(); 
}

/* This is cleaner submit by JS without reload
document.getElementById('answers').onsubmit = function(e) {
	let formData = new FormData(this); // HTML5
  let answers = Array.from(formData.values());
  // dumb check for validity
  if (answers.length != this.querySelectorAll('fieldset').length) {
  	alert('Invalid form!')
  	return false;
  }
  let newFormData = new FormData();
  newFormData.set('answers', answers);
  let request = new XMLHttpRequest();
	request.open(this.method || "POST", this.action || '/default/post/link');
	request.send(newFormData);
  return false;
}
*/

<form action="" method="post" id="answers">
    <fieldset>
        <legend>Question 1</legend>
        <input name="question_1" id="id_1" value="1" type="radio">
        <label for="id_1">Answer 1</label>
        <br>

        <input name="question_1" id="id_2" value="2" type="radio">
        <label for="id_2">Answer 2</label>
        <br>

        <input name="question_1" id="id_3" value="3" type="radio">
        <label for="id_3">Answer 3</label>
        <br>
    </fieldset>
    <fieldset>
        <legend>Question 2</legend>
        <input name="question_2" id="id_4" value="4" type="radio">
        <label for="id_4">Answer 1</label>
        <br>
        <input name="question_2" id="id_5" value="5" type="radio">
        <label for="id_5">Answer 2</label>
        <br>
    </fieldset>
    <button type="submit">Submit</button>
</form>