Torostar Torostar - 4 months ago 16
jQuery Question

Submit form with selected options

I want to be able to submit a form with selected option.

My backend code is working if I'm using inputs:

<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>


but for visual purpose I want to use a star rating system instead of radio buttons so I changed to:

<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>


So basically if I use the inputs, the selected radio value gets sent to the beckend but if I want to use selected option the value does not send anything to the backend. How can I change the submit button to get the selected value and send it to the backend?

Answer

You don't put name on <option> you put it on <select> and the value of that is submitted based on it's selected option(s)

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