How to empty input field with jQuery

Question

I am in a mobile app and I use an input field in order user submit a number.

When I go back and return to the page that input field present the latest number input displayed at the input field.

Is there any way to clear the field every time the page load?

$('#shares').keyup(function(){
    payment = 0;
    calcTotal();
    gtotal = ($('#shares').val() * 1) + payment;
    gtotal = gtotal.toFixed(2);
    $("p.total").html("Total Payment: <strong>" + gtotal + "</strong>");
});

score 497 · Accepted Answer · answered Feb 10 '12 at 23:36

497

You can clear the input field by using $('#shares').val('');

answered Feb 10 '12 at 23:36

shaunsantacruz

8,903
3
19
19

3

Does this work and is is it specification compliant if we have a numeric input like so ``? I guess said differently, are you allowed to set a numeric input to be blank? – Kevin Wheeler Jun 10 '15 at 21:49
3

How about `.val([])`? – Fr0zenFyr Sep 14 '15 at 19:36
3

On a related note, `.val([])` can also unselect any selected option in select list... not so much with `.val('')`. Best thing about it is it's cross-browser support. **P.S:** This is an alternative to only other efficient cross-browser solution - `$("select option").prop("selected", false);` but works with all inputs. Thanks to [Jon](http://stackoverflow.com/users/50079/jon) for [a test he created](http://jsfiddle.net/jS3ws/). – Fr0zenFyr Sep 14 '15 at 19:49

score 36 · Answer 2 · answered Feb 10 '12 at 23:36

36

$(document).ready(function(){
  $('#shares').val('');
});

answered Feb 10 '12 at 23:36

osahyoun

5,173
2
17
15

score 34 · Answer 3 · answered Oct 16 '19 at 21:06

34

To reset text, number, search, textarea inputs:

$('#shares').val('');

To reset select:

$('#select-box').prop('selectedIndex',0);

To reset radio input:

$('#radio-input').attr('checked',false);

To reset file input:

$("#file-input").val(null);

answered Oct 16 '19 at 21:06

chickens

19,976
6
58
55

Radhika · Answer 4 · 2017-06-08T19:07:11.660

15

While submitting form use reset method on form. The reset() method resets the values of all elements in a form.

$('#form-id')[0].reset();

OR 

document.getElementById("form-id").reset();

https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reset

$("#submit-button").on("click", function(){
       //code here
       $('#form-id')[0].reset();
});

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<form id="form-id">
  First name:<br>
  <input type="text" name="firstname">
  <br>
  Last name:<br>
  <input type="text" name="lastname">
  <br><br>
  <input id="submit-button" type="submit" value="Submit">
</form> 
</body>
</html>

edited Jun 08 '17 at 19:07

answered Mar 06 '17 at 19:35

Radhika

189
1
6

Can help someone but in this context your answer is useless. – Marco Concas Nov 06 '19 at 12:51
1

thank bro, it helped me i was using '' but using (reset) is better! – Mohamed ElNady Oct 19 '21 at 15:42
Thank you Radhika! – Koba Nov 08 '21 at 16:59

score 9 · Answer 5 · answered Feb 10 '12 at 23:37

9

Setting val('') will empty the input field. So you would use this:

Clear the input field when the page loads:

$(function(){
    $('#shares').val('');
});

answered Feb 10 '12 at 23:37

Francis Lewis

8,872
9
55
65

score 5 · Answer 6 · answered Oct 12 '16 at 02:55

5

Since you are using jQuery, how about using a trigger-reset:

$(document).ready(function(){
  $('#shares').trigger(':reset');
});

answered Oct 12 '16 at 02:55

Sablefoste

4,032
3
37
58

score 0 · Answer 7 · answered Oct 10 '22 at 09:44

0

If the input is pre-filled (e.g. in a submitted search form), you have to clear the value-attribute as well:

$("#clearSearch").on('click', function(){
  $('#search').val('').attr('value','');
});

answered Oct 10 '22 at 09:44

Yoche2001

56
4

score 0 · Answer 8 · answered Feb 10 '12 at 23:37

if you hit the "back" button it usually tends to stick, what you can do is when the form is submitted clear the element then before it goes to the next page but after doing with the element what you need to.

    $('#shares').keyup(function(){
                payment = 0;
                calcTotal();
                gtotal = ($('#shares').val() * 1) + payment;
                gtotal = gtotal.toFixed(2);
                $('#shares').val('');
                $("p.total").html("Total Payment: <strong>" + gtotal + "</strong>");
            });

How to empty input field with jQuery

8 Answers8

Linked

Related