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><inputvalue="volvo"><select><optionvalue="volvo">Volvo</option><optionvalue="saab">Saab</option><optionvalue="mercedes">Mercedes</option><optionvalue="audi">Audi</option></select><buttontype="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 = '';
})

<inputvalue="volvo"><button>Reset to none</button>

---

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

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

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

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

<select><optionvalue="volvo">Volvo</option><optionvalue="saab">Saab</option><optionvalue="mercedes">Mercedes</option><optionvalue="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();