How to reset input field? jQuery

Question

I've read several posts, including this, and this, but I can't seem to get the input field to clear out after submitting. What is the most basic / elementary way to do this?

Currently I have this:

$(document).ready(function(){
    $('form[name=checkListForm]').on('submit', function() {
          // prevent the form from submitting
          event.preventDefault();
          var toAdd = $(this).find('input[name=checkListItem]').val();
          $('.list').append("<div class='item'>" + toAdd + "</div>")
          $('input[name=checkListItem').reset();
        });
});

My HTML is:

<!DOCTYPE html>
<html >
  <head>
    <meta charset="UTF-8">  
    <link rel="stylesheet" href="stylesheet.css">     
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script type="text/javascript" src="script.js"></script>
  </head>
  <body>
    <h2>To Do</h2>
    <form name="checkListForm">
      <input type="text" name="checkListItem" />
      <button type="submit" id="button">Add!</button>
    </form>
    <br/>
    <div class="list"></div>
  </body>
</html>

Single line of code to handle all the fields $(formselector)[0].reset(); — Adarsh Madrecha
– Adarsh Madrecha, Commented Dec 20, 2017 at 6:43

SwissCodeMen · Accepted Answer · 2021-03-29 18:07:52Z

42

Instead of resetting, just set a blank value to the input field using this bit of code:

$('input[name=checkListItem').val('');

In order to reset all inputs in a particular form you could also use the following code (using the :input selector):

$('form :input').val('');

edited Mar 29, 2021 at 18:07

SwissCodeMen

5,00310 gold badges30 silver badges39 bronze badges

answered Feb 18, 2016 at 20:47

stark

2,2562 gold badges24 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

TheRealFakeNews Over a year ago

Thanks, that worked. As a side question, do you know why the selector should be input[name=checkListItem and not form[name=checkListForm?

Przemek Over a year ago

@AlanH: Because you want to set input's value to be blank, not form's.

stark Over a year ago

@AlanH : that's because the input selector basically selects a form control and it has a value that can be set, whereas $('form') basically means you're selecting an html element itself rather than a form control, since the $('form') does not have a value attribute unlike the input selector, see my latest edit to the answer as well.

fdomn-m Over a year ago

When you use element[attribute=value] your filtering the elements/nodes - ie it selects all of type element then from those, only the one with [attribute=value] so form[name] find all forms with name attribute. If you did form [name] (ie with a space) then it would find all elements with name attribute inside the form.

Pasindu Jayanath Over a year ago

$('input[name=checkListItem]').val(''); you have missed ']' ;)

|

kodvin · Accepted Answer · 2016-02-18 20:49:47Z

2

This should work,(I've tested it myself).

$(document).ready(function(){
    $('form[name=checkListForm]').on('submit', function() {
          //other code
          $('input[name=checkListItem]').val("")
        });
});

answered Feb 18, 2016 at 20:49

kodvin

1,2769 silver badges14 bronze badges

Comments

Omari Victor Omosa · Accepted Answer · 2016-02-18 21:33:43Z

This one worked for me; Few modification to. I use function(e) and e.preventDefault() and used $('input[name=checkListItem').val(''); instead of reset()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>

    $(document).ready(function(){
        $('form[name=checkListForm]').on('submit', function(e) {
              // prevent the form from submitting
              e.preventDefault();
              var toAdd = $(this).find('input[name=checkListItem]').val();
              $('.list').append("<div class='item'>" + toAdd + "</div>")


              $('input[name=checkListItem').val('');
            });
    });
 </script>

<h2>To Do</h2>
<form name="checkListForm">
  <input type="text" name="checkListItem" />
  <button type="submit" id="button">Add!</button>
</form>
<br/>
<div class="list"></div>

Sibeesh Venu · Accepted Answer · 2018-01-29 12:20:29Z

0

We can write after submission.

document.getElementById("myform").reset();

edited Jan 29, 2018 at 12:20

Sibeesh Venu

22.2k17 gold badges115 silver badges153 bronze badges

answered Jan 29, 2018 at 10:38

Siddharth Shukla

1,14715 silver badges15 bronze badges

1 Comment

Sablefoste Over a year ago

This resets the entire form, not the field, as the OP asked.

Osh · Accepted Answer · 2021-05-08 14:31:40Z

0

Finally, this worked for me.

$(document).ready(function(){
$('#myForm').on('submit', function() {
$('#checkListItem').val('');
});
});

answered May 8, 2021 at 14:31

Osh

13 bronze badges

Collectives™ on Stack Overflow

How to reset input field? jQuery

5 Answers 5

6 Comments

Comments

Comments

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

6 Comments

Comments

Comments

1 Comment

Comments

Linked

Related