Clicking the reset radio button tries to submit the form in Django

Question

I made a form in Django. There is a reset button clicking on it should reset the radio buttons.

<td>
{{form.effort.help_text}}&nbsp;<font size=1 color=red>
    {% for error in form.effort.errors %}
        {{error}}
    {%endfor%}</font>
    {% for choice in form.effort %}
        {{choice.tag}}{{choice.choice_label}}
    {% endfor %}&nbsp;&nbsp;
    <button onclick="resetEffort();">reset</button>
</td>

code for resetEffort() function is -

<script type=text/javascript>
function resetEffort()
{
    $('input[name="effort"]').prop('checked', false);
}
</script>

but when I click this reset button, It reset the radio buttons but at the same time tries to submit the form. It shows error warnings for the fields which are not filled and are mandatory. Focus reaches at the top of page.

Save button in form-

<form action="{% url 'kaizen:addkaizen'%}" method="post">
 <!-- other fields of form here -->
    <input type="submit" value="Save" name="save"/> 

Error shown when clicking reset radio button (Or when submitting form without filling any value)

How can that be corrected so that clicking the reset button resets the radio button silently and do not try to submit the form.

PS - I don not want to reset whole form. I just want to reset one field ie radio button group. I already have reset button for whole form.

Answer 1

UPDATE: You need to specify type="button" in your <input> element for the form reset. More info here .

Answer 2

要阻止提交表单，请执行以下操作：将type属性按钮添加到您的按钮中，如下所示：

<button type="button" onclick="resetEffort();">My button</button>