Restore textfield's default value when user clicks the reset button JavaScript

Question

I'm trying to get the textfields to return to their default value when the user clicks the Reset button.

All it does now when the user clicks the Reset button is replacing the user's text with ''.

How can I do it by using pure JavaScript (no jQuery)?

HTML:

<p>Type the first number</p>
<input id="first" type="text" placeholder="First Number" />
<p>Type the second number</p>
<input id="second" type="text" placeholder="Second Number" />
<button id="aButton">Apply</button>
<button id="rButton">Reset</button>
<div id="add"></div>

JAVASCRIPT:

app.onactivated = function (args) {
        var aButton = document.getElementById("aButton");
        aButton.addEventListener("click", buttonClickHandler, false);

        var rButton = document.getElementById("rButton");
        rButton.addEventListener("click", buttonResetHandler, false);

    };

...

function buttonResetHandler(evetInfo) {

        document.getElementById("first").innerText = '';
        document.getElementById("second").innerText = '';

    }

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

Fabrício Matté
– Fabrício Matté

2013-05-26 23:30:24 +00:00
Commented May 26, 2013 at 23:30 — Fabrício Matté
– Fabrício Matté, Commented May 26, 2013 at 23:30

Ram · Accepted Answer · 2013-05-26 23:39:10Z

10

innerText is an invalid property that is implemented in IE browsers and is used for setting/getting text content of non-form elements, if the values should be set as default, you can use defaultValue property:

var a = document.getElementById("first"),
    b = document.getElementById("second");
a.value = a.defaultValue;
b.value = b.defaultValue;

If you want to reset all the form elements, you can use .reset() method of DOM HTMLFormElement object:

document.forms["myForm"].reset();

edited May 26, 2013 at 23:39

answered May 26, 2013 at 23:27

Ram

145k16 gold badges174 silver badges201 bronze badges

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

Comments

Shahin Hsynzde · Accepted Answer · 2021-03-17 09:55:08Z

2

location.reload(); // reloads the page
history.go(0); // deletes the history
But if you need to preserve some values inside of the page then reassign the values in the function again. To reassign, write the variable (declare in let to change later) again in the function and change the textContent again.

edited Mar 17, 2021 at 9:55

answered Mar 17, 2021 at 9:04

Shahin Hsynzde

1411 silver badge5 bronze badges

Comments

WhyMe · Accepted Answer · 2013-05-26 23:30:18Z

0

Replace,

document.getElementById("first").innerText

With,

document.getElementById("first").value

Example:

<input id="txtBox" type="text" value="lama">
<input type="button" value="reset lama" onclick='document.getElementById("txtBox").value="lama2";'>

edited May 26, 2013 at 23:30

answered May 26, 2013 at 23:22

WhyMe

5352 silver badges13 bronze badges

1 Comment

WhyMe Over a year ago

add to the button the event. <button id="resetBtn" onclick='buttonResetHandler();'>Reset</button>

Kevin Nacios · Accepted Answer · 2013-05-26 23:22:22Z

-1

create an init function that sets the default values for each input, then you can call that:

function initializeInputs() {
    document.getElementById("first").value = '';
    document.getElementById("second").value= '';
}

function buttonResetHandler(e) {
    initializeInputs();
}

answered May 26, 2013 at 23:22

Kevin Nacios

2,85321 silver badges32 bronze badges

2 Comments

WhyMe Over a year ago

document.getElementById("first").innerText gives an error. And I think thats not what he asked.

kalpetros Over a year ago

The above just replaces the user's input with something else. What I want is to remove the user's input and restore the default value (First Number/Second Number).

Collectives™ on Stack Overflow

Restore textfield's default value when user clicks the reset button JavaScript

4 Answers 4

Comments

Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related