How to reset a form using jQuery with reset method

0 votes

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?

Jun 15, 2022 in JQuery by gaurav
• 23,260 points
15,622 views

1 answer to this question.

0 votes
  1. <input type="reset">
  2. Syntax for reset(): formObject.reset()
  3. Syntax to convert jQuery element to a JavaScript object. $(selector)[0].reset() or $(selector).get(0).reset()
answered Jun 16, 2022 by rajatha
• 7,680 points

Related Questions In JQuery

0 votes
1 answer

How to scroll to element from bottom to top with a nice animation using Jquery?

Hello @kartik, Assuming you have a button with ...READ MORE

answered Sep 10, 2020 in JQuery by Niroj
• 82,880 points
4,216 views
0 votes
1 answer

How to make a simple modal pop up form using jquery and html?

Create A Modal <button onclick="document.getElementById('id01').style.display='block'" class="w3-button">Open Modal</button> ... <div ...READ MORE

answered Jun 2, 2022 in JQuery by Edureka
• 13,690 points
7,548 views
0 votes
1 answer

How to disable all <input > inside a form with jQuery?

To disable all form elements inside 'target', ...READ MORE

answered Jun 3, 2022 in JQuery by Edureka
• 13,690 points
1,570 views
0 votes
1 answer

How to convert form data to JavaScript object with jQuery?

Hello @kartik, You can use: function form_to_json (selector) { ...READ MORE

answered Apr 28, 2020 in JQuery by Niroj
• 82,880 points
3,058 views
0 votes
0 answers

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

My code : <div id="labels"> <table class="config"> ...READ MORE

May 24, 2022 in Java-Script by Kichu
• 19,050 points
720 views
0 votes
1 answer

jQuery AJAX submit form

There is a simple input mentioned below ...READ MORE

answered Feb 8, 2022 in Java by Soham
• 9,710 points
1,602 views
0 votes
0 answers

How can I get form data with JavaScript/jQuery?

Is there a simple, one-line way to ...READ MORE

Jun 29, 2022 in Web Development by gaurav
• 23,260 points
2,415 views
0 votes
0 answers

Expand form based on radio selection in jQuery & Bootstrap

I am trying to show a part ...READ MORE

Jul 22, 2022 in Web Development by gaurav
• 23,260 points
578 views
0 votes
1 answer

How to focus on a form input text field on page load using jQuery?

In this example the form input text ...READ MORE

answered Jun 21, 2022 in JQuery by rajatha
• 7,680 points
2,252 views
0 votes
1 answer

How to open a Bootstrap 4 modal dialog using jQuery

Use the modal('show') Method You can simply use ...READ MORE

answered Jun 28, 2022 in JQuery by rajatha
• 7,680 points
7,145 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP