jqueryformsresetjquery-trigger

jQuery trigger reset button click

I need to reset radio buttons and checkboxes within a form via code when needed.

I am using an indirect approach, where I have placed a reset button and hidden it using CSS.

<form class="form-horizontal form form-existing" role="form" id="form-existing" action="">
  <input type="reset" name="reset-form-new" id="resetFormNew" value="" />
<div class="radio">
  <label>
    <input type="radio" name="new-turnover" id="new-turnover" value="€1 000 - €5 000"/> €1 000 - €5 000
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="new-turnover" id="new-turnover" value="€50 000 - €20 0000"/> €50 000 - €20 0000
  </label>
</div>
<div class="checkbox">  
  <label>  
    <input type="checkbox" name="new-preference" value="Mobile Phones"> Mobile phones  
  </label>
</div>  
<div class="checkbox">  
  <label>  
    <input type="checkbox" name="new-preference" value="Accessories"> Accessories  
  </label>
</div>

Then I try to click it like $("#resetFormNew").trigger("click");

This resets all the text boxes but not the radio buttons and check boxes.

Where am I going wrong?

Solution

  • A form has its own reset method you can call. So rather than adding steps by hiding a reset button, you can call something like:

    $("#form")[0].reset();