How to reset a form using jQuery with .reset() met

Question

I had working code that could reset my form when I click on a reset button. However after my code is getting longer, I realize that it doesn't work anymore.

 <div id="labels">
        <table class="config">
            <thead>
                <tr>
                    <th colspan="4"; style= "padding-bottom: 20px; color:#6666FF; text-align:left; font-size: 1.5em">Control Buttons Configuration</th>
                </tr>
                <tr>
                    <th>Index</th>
                    <th>Switch</th>
                    <th>Response Number</th>
                    <th>Description</th>
                </tr>
            </thead>
            <tbody>

                <form id="configform" name= "input" action="#" method="get">
                <tr><td style="text-align: center">1</td>
                    <td><img src= "static/switch.png" height="100px" width="108px"></td>
                    <td id="small"><input style="background: white; color: black;" type="text" value="" id="number_one"></td>
                    <td><input style="background: white; color: black;" type="text"  id="label_one"></td>
                </tr>
                <tr>
                    <td style="text-align: center">2</td>
                    <td><img src= "static/switch.png" height="100px" width="108px"></td>
                    <td id="small"><input style="background: white; color: black;" type="text" id = "number_two" value=""></td>
                    <td><input style="background: white; color: black;" type="text"  id = "label_two"></td>
                </tr>
                <tr>
                    <td style="text-align: center">3</td>
                    <td><img src= "static/switch.png" height="100px" width="108px"></td>
                    <td id="small"><input style="background: white; color: black;" type="text" id="number_three" value=""></td>
                    <td><input style="background: white; color: black;" type="text" id="label_three"></td>
                </tr>
                <tr>
                    <td style="text-align: center">4</td>
                    <td><img src= "static/switch.png" height="100px" width="108px"></td>
                    <td id="small"><input style="background: white; color: black;" type="text" id="number_four" value=""></td>
                    <td><input style="background: white; color: black;" type="text" id="label_three"></td>
                </tr>
                <tr>
                    <td></td>
                    <td><input type="submit" id="configsubmit" value="Submit"></td>
                </tr>
                <tr>
                    <td><input type="reset" id="configreset" value="Reset"></td>
                </tr>

                </form>
            </tbody>
        </table>

    </div>

And my jQuery:

 $('#configreset').click(function(){
            $('#configform')[0].reset();
 });

Is there some source that I should include in my codes in order for the .reset() method to work? Previously I was using:

<script src="static/jquery.min.js">
</script>
<script src="static/jquery.mobile-1.2.0.min.js">
</script>

and the .reset() method was working.

Currently I'm using

<script src="static/jquery-1.9.1.min.js"></script>      
<script src="static/jquery-migrate-1.1.1.min.js"></script>
<script src="static/jquery.mobile-1.3.1.min.js"></script>

Could it possibly be one of the reason?

Answer 1

Your code should work. Make sure static/jquery-1.9.1.min.js exists. Also, you can try reverting to static/jquery.min.js. If that fixes the problem then you've pinpointed the problem.

Answer 2

A quick reset of the form fields is possible with this jQuery reset function.

when you got success response then fire below code.

$(selector)[0].reset();

Answer 3

 reset(){
     this.companyForm["enable"] = true;
     jQuery('has-success').each(function () { 
        jQuery(this).removeClass('has-success'); 
     });
     jQuery('.has-error').each(function () { 
        jQuery(this).removeClass('has-error');
     });
     jQuery('.has-feedback').each(function () { 
        jQuery(this).removeClass('has-feedback');
     });
     jQuery('.help-block').each(function () { 
        jQuery(this).hide(); 
     });
     jQuery('.form-control-feedback').each(function () { 
        jQuery(this).hide(); 
     });
}

Answer 4

You can just add an input type = reset with an id = resetform like this

<html>
<form>
<input type = 'reset' id = 'resetform' value = 'reset'/>
<!--Other items in the form can be placed here-->
</form>
</html>

then with jquery you simply use the .click() function on the element with the id = resetform as follows

<script> 
$('#resetform').click();
</script>

and the form resets Note: You can also hide the reset button with id = resetform using your css

<style>
#resetform
{
display:none;
}
</style>

Answer 5

Here is simple solution with Jquery. It works globally. Have a look on the code.

$('document').on("click", ".clear", function(){
   $(this).closest('form').trigger("reset");
})

Add a clear class to a button in every form you need to reset it. For example:

<button class="button clear" type="reset">Clear</button>

Answer 6

you may try using trigger() Reference Link

$('#form_id').trigger("reset");