Javascript needed for form reset button

Question

I have a form with a text area as well as javascript counter that counts how many characters you type into the text area. I need a button that resets both whats typed into the text area AND the counter.

This is my form code:

<script type="text/javascript">
function change (el) {
    var max_len = el.name == 'left' ? 60 : 320;
    if (el.value.length > max_len) {
        el.value = el.value.substr(0, max_len);
    }
    document.getElementById(el.name + '_char_cnt').innerHTML = el.value.length;
    document.getElementById(el.name + '_chars_left').innerHTML = max_len - 
    el.value.length;
    return true;
}
</script>

<h2 style="background-color: #eee; padding: 10px 20px 10px 20px; margin-
bottom: 20px;">Enter meta title tag</h2>

<form id="title">
<textarea style="border: 1px solid #eb008b;" cols="100" name="left" 
rows="2" maxLength="60" onkeyup="change(this);"></textarea>You've typed <span id="left_char_cnt"><b>0</b></span> 
character(s) out of a possible 60. You are allowed <span 
id="left_chars_left"><b>lots</b></span> more

<input class="btn btn-primary" type="button" value="reset title" />

</form>

The javascript below resets the text entered into the textarea but it does not reset the counter within the span "left_char_cnt"

<script>
function myFunction() {
    document.getElementById("title").reset();
}
</script>

What javascript is needed to reset both?

This question shows no research effort, you already have a line using document.getElementById and didn't try anything with document.getElementById("left_char_cnt") - A simple search on How to reset a span using JavaScript shows several results with the required answer - Please see the marked duplicate, several answers are in there including a JavaScript solution using innerHTML — Nope
– Nope, Commented Dec 21, 2017 at 11:38

Sébastien · Accepted Answer · 2017-12-21 11:35:28Z

3

You cannot "reset" the text / HTML of an element if you haven't saved it somehow. reset() only works for form inputs.

So what you have to do is rewrite the HTML content of your element.

<script>
function myFunction() {
    document.getElementById("title").reset();
    document.getElementById("left_char_cnt").innerHTML = '<b>0</b>';
}
</script>

answered Dec 21, 2017 at 11:35

Sébastien

12.1k12 gold badges60 silver badges83 bronze badges

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

1 Comment

Sébastien Over a year ago

Please explain downvote, is there something incorrect in my answer? I don't see it...

jasinth premkumar · Accepted Answer · 2017-12-21 11:50:31Z

your script to count words in text is not working but, i made a script to clear textarea & count

function myfun(){
document.getElementById('txtarea').value=' ';
document.getElementById('count').innerHTML='0';

}

<form id="title">
<textarea id="txtarea" style="border: 1px solid #eb008b;" cols="100" name="left" 
rows="2"></textarea>You've typed <span id="left_char_cnt"><b id=count>123</b></span> 
character(s) out of a possible 60. You are allowed <span 
id="left_chars_left"><b >lots</b></span> more

<input class="btn btn-primary" type="button" onclick="myfun()" value="reset title" />

</form>
<script type="text/javascript">
function change (el) {
    var max_len = el.name == 'left' ? 60 : 320;
    if (el.value.length > max_len) {
        el.value = el.value.substr(0, max_len);
    }
    document.getElementById(el.name + '_char_cnt').innerHTML = el.value.length;
    document.getElementById(el.name + '_chars_left').innerHTML = max_len - 
    el.value.length;
    return true;
}
</script>

Reinstate Monica Cellio · Accepted Answer · 2017-12-21 12:00:40Z

The simplest way is to reuse the code you already have, and allow the change event handler to set the values correctly. That way, if you ever change the behavior of that function then the reset will also change to match it.

I also modified your code slightly to make it update as the text is changing, rather than when you leave the textarea.

Try this...

function change (el) {
    var max_len = el.name == 'left' ? 60 : 320;
    if (el.value.length > max_len) {
        el.value = el.value.substr(0, max_len);
    }
    document.getElementById(el.name + '_char_cnt').innerHTML = el.value.length;
    document.getElementById(el.name + '_chars_left').innerHTML = max_len - el.value.length;
    return true;
}

var textarea = document.querySelector("#title textarea");

textarea.addEventListener("keyup", function() { change(this); });

document.querySelector("#reset-button").addEventListener("click", function() {
  textarea.value = "";
  change(textarea);
});

<h2 style="background-color: #eee; padding: 10px 20px 10px 20px; margin-
bottom: 20px;">Enter meta title tag</h2>

<form id="title">
<textarea style="border: 1px solid #eb008b;" cols="100" name="left" 
rows="2"></textarea>You've typed <span id="left_char_cnt"><b>0</b></span> 
character(s) out of a possible 60. You are allowed <span 
id="left_chars_left"><b>lots</b></span> more

<input class="btn btn-primary" type="button" id="reset-button" value="reset title" />

</form>

vicky patel · Accepted Answer · 2017-12-21 13:45:34Z

var t = document.getElementsByTagName('textarea')[0];
var a = document.getElementById('left_char_cnt');
var b = document.getElementById('left_chars_left')
t.addEventListener('keyup',function(){
var value = t.value.length;
var maxval = 60;
a.innerHTML = value
b.innerHTML = (maxval- value)
if(value == 60){ a.maxLength = maxval}
})
 function resetVal(){
 t.value = null;
a.innerHTML = '<b>0</b>'
b.innerHTML = '<b>lots</b>'
}

<h2 style="background-color: #eee; padding: 10px 20px 10px 20px; margin-
bottom: 20px;">Enter meta title tag</h2>

<form id="title">
<textarea style="border: 1px solid #eb008b;" cols="100" name="left" 
rows="2" maxlength="60"></textarea>You've typed <span id="left_char_cnt"><b>0</b></span> 
character(s) out of a possible 60. You are allowed <span 
id="left_chars_left"><b>lots</b></span> more

<input class="btn btn-primary" type="button" onclick='resetVal()' value="reset title"/>

</form>

Sanjay Kumar Singh · Accepted Answer · 2017-12-21 12:05:58Z

0

Use this function, by replacing your 'myFunction()'

<script>
function myFunction() {
    document.getElementById("title").reset(); // reset your form
    document.getElementById("left_char_cnt").innerHTML = '<b>0</b>'; //reset your span counter
} 
</script>

answered Dec 21, 2017 at 12:05

Sanjay Kumar Singh

9474 silver badges9 bronze badges

Collectives™ on Stack Overflow

Javascript needed for form reset button

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related