Text Box Not Getting Reset

I have a text box and I tried to reset it after a button click. But it is not getting reset. HTML Script:-

Solution 1:

To reset a form, use

form.reset();

var form = document.querySelector('form');
var button = document.querySelector('button');

button.addEventListener('click', function() {
  form.reset();
})

<form>
  <input value="volvo">

  <select>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </select>

  <button type="button">Reset form</button>
</form>

---

To reset a value on e.g. input, use

input.value = '';

var input = document.querySelector('input');
var button = document.querySelector('button');

button.addEventListener('click', function() {
  input.value = '';
})

<input value="volvo">


<button>Reset to none</button>

---

To reset a value on e.g. select, use

select.selectedIndex = 0;    // select first option
select.selectedIndex = -1;   // select none

var select = document.querySelector('select');
var button = document.querySelector('button');

button.addEventListener('click', function() {
  select.selectedIndex = -1;   // select none
})

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>


<button>Reset Select to none</button>

Solution 2:

To clear the value of input box use :

  document.getElementById('pre-selected-options').value = "";

https://www.w3schools.com/howto/howto_html_clear_input.asp

Solution 3:

To reset form by using jQuery.

$("form")[0].reset();