All geek questions in one place

How to reset input field? JQuery

I read several posts, including this and, but I can't seem to get the input box to clear after posting. What is the easiest / easiest way to do this?

I currently 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:

 <!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>
+5
source share
4 answers

Instead of resetting, just set an empty value in the input field using this bit of code:

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

To reset all inputs in a specific form, you could also use the following code (using the selector :input ):

 $('form :input').val('');
+12
source

This should work (I tested it myself).

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

This one worked for me; A bit of modification. 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>
0
source

We can write after sending.

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

Source: https://habr.com/ru/post/1243342/

More articles:


All Articles