提交带有选定选项的表单

Question

我希望能够提交包含所选选项的表单。

如果我使用输入，我的后端代码可以正常工作：

<input id="id_value_0" name="value" type="radio" value="1" />
<input id="id_value_1" name="value" type="radio" value="2" />
<input id="id_value_2" name="value" type="radio" value="3" />
<input id="id_value_3" name="value" type="radio" value="4" />
<input id="id_value_4" name="value" type="radio" value="5" />
<button type="submit" class="btn btn-default btn-sm" value="{% trans "Rate" %}"
        onclick="return $(this.form).find('option:selected').length == 1;">
</button>

但出于视觉目的，我想使用星级评分系统而不是单选按钮，所以我改为：

<select id="id_value" form="form_id">
            <option id="id_value_0" name="value" value="1">1</option>
            <option id="id_value_1" name="value" value="2">2</option>
            <option id="id_value_2" name="value" value="3">3</option>
            <option id="id_value_3" name="value" value="4">4</option>
            <option id="id_value_4" name="value" value="5">5</option>
</select>
<button type="submit" class="btn btn-default btn-sm" value="{% trans "Rate" %}"
        onclick="return $(this.form).find('option:selected').length == 1;">
</button>

所以基本上，如果我使用输入，选定的无线电值会发送到后端，但如果我想使用选定的选项，该值不会向后端发送任何内容。如何更改提交按钮以获取所选值并将其发送到后端？

Answer 1

你不把 name 放在 <option> 上，而是把它放在 <select> 上，它的值是根据它选择的选项提交的

<select id="id_value" form="form_id" name="value>
   <option  value="1">1</option>

提交带有选定选项的表单

Submit form with selected options

javascript

jquery

rating

submit

form-submit