Cannot clear text input field

Question

I've tried several different ways, including Pure-JS and jQuery, but I can't get my input text field to clear. Please help.

Here's the relevant HTML:

<div align="center" id="searchDiv"></div>
<input type="text" id="searchBar" size="40" onsubmit="loadAllItems()">
<input type="submit" id="searchButton" value="Search" onclick="loadAllItems()">
<input type="button" value="Reset" onclick="reset()">

I'm trying to submit the searchBar, run backend code, and then call the reset() function to avoid manually clearing the text field:

function reset() {
        document.getElementById("gradeQuestionsForm").reset();
        document.getElementById('Output1').innerHTML = '';
        document.getElementById('Output1').innerHTML = '';
        updateStatus('Form has been reset.');
      }

I tested with a JSFiddle. Please advise.

Duplicate of - http://stackoverflow.com/questions/14837466/clearing-a-text-field-on-button-click — deeveeABC, Apr 14 '16 at 19:55
http://stackoverflow.com/questions/5700471/set-value-of-input-using-javascript-function — Steve0, Apr 14 '16 at 19:57
If you've tried several different ways, please share so we can better help you. — Goose, Apr 14 '16 at 20:05
wrap all the input fields in `
` tag and then set reset button type to reset as ` type="reset"`. It is default functionality of reset button and no need to write javascript function. — kakurala, Apr 14 '16 at 20:10
Thank you to those who read all of my question, especially miglio, who provided a solution. I read the other questions first, but they did not address my concern directly. It works now with `$('#searchBar').val('');` (I didn't have the ' around #searchBar when I tried the jquery before.) — AimFireReady, Apr 16 '16 at 02:51

score 2 · Answer 1 · answered Apr 14 '16 at 19:57

2

With jQuery you can do like this
fiddle

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

answered Apr 14 '16 at 19:57

Dejan.S

18,571
22
69
112

score 0 · Answer 2 · edited May 23 '17 at 12:31

0

Try document.getElementById("searchBar").value = '';

Also, you need to set LOAD TYPE TO No wrap -in <head> in your JSFiddle

.

See more on running script on JSFiddle here.

edited May 23 '17 at 12:31

Community

1
1

answered Apr 14 '16 at 20:15

sajinshrestha

735
1
6
11

Thanks for the help with JSFiddle. I feel like I'm in Coding Kindergarten: learning shapes and colors. – AimFireReady Apr 16 '16 at 02:17

Cannot clear text input field

2 Answers2