CODEWITHSUNDEEP
javascriptjqueryhtmlforms
qwww
qwww

Reputation: 1363

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:-

    <input type="text" name="" class="input-default" id="inp">
    <button type="submit" class="btn btn-success btn-sm m-b-10 m-l-5" onclick="add()">Add</button>
<select id='pre-selected-options' multiple='multiple'>
    <option value='elem_1' selected>1</option>
    <option value='elem_2'>a</option>
    <option value='elem_3'>x</option>
    <option value='elem_4' selected>Ce</option>
    <option value='elem_100'>Td</option>
  </select>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
 <script src="js/jquery.multi-select.js"></script>

JavaScript Code :- 

var x;
var option;
var y;

function add() {
    var x = document.getElementById('pre-selected-options');
    console.log(x);
    var option = document.createElement("option");
    option.text = document.getElementById("inp").value;
    var y = option.text
    x.add(option);
    $('#pre-selected-options').multiSelect('addOption', {
        value: y,
        text: y,
        index: 0,
        nested: 'optgroup_label'
    });
    document.getElementById('pre-selected-options').reset();
}

$('#pre-selected-options').multiSelect();

I tried adding this and its not resetting the form :

document.getElementById('pre-selected-options').reset();

Upvotes: 2

Views: 750

Answers (4)

Ikram Ud Daula
Ikram Ud Daula

Reputation: 1321

To reset form by using jQuery.

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

Upvotes: 0

Asons
Asons

Reputation: 87303

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>

Upvotes: 4

user9420984
user9420984

Reputation:

The trouble you are facing here is that you are trying to clear the input box with id inp while calling pre-selected-options, which isn't connected to your text box.

Using document.getElementById('inp').value = "" should clear the value of your textbox.

Upvotes: 4

Amala James
Amala James

Reputation: 1486

To clear the value of input box use : 

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

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

Upvotes: 0

Related Questions