How to empty input field with jQuery

M

9

252

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>");
});

Marmara answered 10/2, 2012 at 23:33 Comment(0)

V

500

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

Velasquez answered 10/2, 2012 at 23:36 Comment(3)

Does this work and is is it specification compliant if we have a numeric input like so <input type="number" min="0' max="10" value="5"></input>? I guess said differently, are you allowed to set a numeric input to be blank? – Ching 10/6, 2015 at 21:49

How about .val([])? – Jaquiss 14/9, 2015 at 19:36

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 for a test he created. – Jaquiss 14/9, 2015 at 19:49

P

36

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

Palladous answered 10/2, 2012 at 23:36 Comment(0)

P

35

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);

Polythene answered 16/10, 2019 at 21:6 Comment(0)

V

16

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>

Vicereine answered 6/3, 2017 at 19:35 Comment(3)

Can help someone but in this context your answer is useless. – Driedup 6/11, 2019 at 12:51

thank bro, it helped me i was using '' but using (reset) is better! – Amsden 19/10, 2021 at 15:42

Thank you Radhika! – Ofelia 8/11, 2021 at 16:59

J

9

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

Clear the input field when the page loads:

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

Jayejaylene answered 10/2, 2012 at 23:37 Comment(0)

O

5

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

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

Overcareful answered 12/10, 2016 at 2:55 Comment(0)

A

0

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>");
            });

Aweinspiring answered 10/2, 2012 at 23:37 Comment(0)

E

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','');
});

Eightfold answered 10/10, 2022 at 9:44 Comment(0)

R

-2

$(function(){
    loadData(); 
    $(document).ready(function(){
  $('#insert').trigger(':reset');

  var item=$("#item").val(null);
  var qty=$("#quantity").val(null);
   var bb=$("#bb").val(null);
    var ee=$("#ee").val(null);

});
});

Refresh answered 7/4, 2024 at 13:30 Comment(0)

Recommended topics

Hot tags