Resetting Values using jquery

Question

Trying to reset value of input to blank using button and jquery, but it gives

Uncaught TypeError: $(...).reset is not a function

$(document).ready(function() {
  $("#reset_btn").click(function() {
    $("#buy").reset();
  });
});

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

<input type="number" class="form-control" id="buy" placeholder="Buy Amount" name="buy">

<button type="button" class="btn btn-secondary" id="reset_btn">RESET</button>

Eddie · Accepted Answer · 2019-04-06 15:52:48Z

6

One option to remove the value of input is to use .val(""). Basically setting the value to an empty string.

Here is an example:

$(document).ready(function() {
  $("#reset_btn").click(function() {
    $("#buy").val("");
  });
});

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

<input type="number" class="form-control" id="buy" placeholder="Buy Amount" name="buy">

<button type="button" class="btn btn-secondary" id="reset_btn">RESET</button>

answered Apr 6, 2019 at 15:52

Eddie

26.8k6 gold badges39 silver badges59 bronze badges

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

3 Comments

Bacha Over a year ago

Run jsfiddle.net/hgf8x4b7, why #tot_amnt is being reset after clicking twice the reset button?

Bacha Over a year ago

Thanks, it worked! Does multiple loading of php file (no database connection in it) causes high CPU Usage?

Eddie Over a year ago

Happy to help. On your other question, It depends on the file you are loading and the processes that it is doing. You have to monitor your app/site for that one :)

Sarah Groß · Accepted Answer · 2019-04-06 15:53:50Z

2

As the error message clearly states, reset() is not a jQuery method. You'll want to call the native form element's reset() instead. For this, of course, you'll need a form element in the first place.

$(document).ready(function() {
  $("#reset_btn").click(function() {
    $("#form")[0].reset();
  });
});

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

<form id="form">
  <input type="number" class="form-control" id="buy" placeholder="Buy Amount" name="buy">

  <button type="button" class="btn btn-secondary" id="reset_btn">RESET</button>
</form>

answered Apr 6, 2019 at 15:53

Sarah Groß

10.9k4 gold badges30 silver badges53 bronze badges

1 Comment

Bacha Over a year ago

Your answer also worked but my input tag was not in the form, that's why accepted Eddie's answer.

ValhallaSkies · Accepted Answer · 2019-04-06 15:53:18Z

0

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

Clear the value instead of using reset.

answered Apr 6, 2019 at 15:53

ValhallaSkies

611 silver badge12 bronze badges

Collectives™ on Stack Overflow

Resetting Values using jquery

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related