jQuery reset form when user changes select option

Question

I have created a form with a lot of if statements in it, when a user selects certain objects, the values of other objects changes etc.

The form mostly hinges on the first decision the user makes, currently, if the user fills out the form and then changes the first selection, the form values don't change to reflect this first change, so I want to reset the form when the first select box is changed.

Here is the html for my first dropdown box:

<article id="event_type_container">
 <h4 class="calc_title">EVENT TYPE</h4>
 <form action="quote_mailer.php" method="POST" name="myform" id="quote_form" onsubmit="Dosubmit();">
<select class="select" id="eventType" name="eventType" size="1">
    <option name="first" value="0"></option>
    <option value="wedding" name="wedding">Wedding</option>
    <option value="private_party" name="private_party">Private Event</option>
    <!--<option value="corporate" name="corporate">Corporate Event</option>-->
 </select>
</article>

Is there a way using jQuery that if a user selects an option I can reset the whole form?

Answer 1

You can reset a form in Javascript calling the reset() on the form object.

Using jQuery to capture the change event of the select will tell you when to reset the form.

$("#quote_form").on("change", "#eventType", function(event){
    event.delegateTarget.reset();
});

Answer 2

$("#eventType").on("change",function(){

// desire code

/*** reset form code below **/
$(this).closest("form")[0].reset();

});

Answer 3

You can still reset the whole form using

$('#quote_form')[0].reset();

Here the form reset works same as the functionality of reset button in html.