I'm Unable to Clear the Form

Question

<!DOCTYPE html>
<html>
<head>
    <title>Onreset-3</title>
</head>
<body>
    <form>
        Username: <input type="text" class="abc"><br><br>
        Password: <input type="password" class="abc"><br><br>
    </form>
    <input type="button" onclick="reset()" value="Clear">
    <script>
        function reset()
        {
            var a = document.getElementsByClassName('abc');
            a.value = "";
        }
    </script>
</body>
</html>

I am unable to clear the username and password in the above form. I have been trying using id's but no use

My task is to do using functions in j.s instead of reset in html.. — Manoj Karthik, Nov 03 '15 at 14:48
@DannyFardyJhonstonBermúdez `getElementsByClassName` doesn't return an array. It returns a `nodeList`. you have to loop over it the same but not all array functions are available for nodeLists. — Joseph Marikle, Nov 03 '15 at 14:48
ofcourse it's my own task..i must be skilled in j.s..i m seeking for help — Manoj Karthik, Nov 03 '15 at 14:49

score 3 · Answer 1 · answered Nov 03 '15 at 14:51

3

native reset is better and perfectly works

    <form>
        Username: <input type="text" class="abc"><br><br>
        Password: <input type="password" class="abc"><br><br>
    </form>
    <input type="button" onclick="reset()" value="Clear">
    <script>
        function reset()
        {
            document.getElementsByTagName("form")[0].reset();
        }
    </script>

answered Nov 03 '15 at 14:51

Marcos Pérez Gude

21,869
4
38
69

Just to add: One of the reasons this is better is that it restores the initial value of each input element, which might not be an empty string. – Tim Seguine Nov 03 '15 at 15:00
Yes @TimSeguine , if a `` when you reset, it appears again `Initial value`. That's as a reset should work. Workarounds are very slow and lot of lines of code, when reset makes it automatically – Marcos Pérez Gude Nov 03 '15 at 15:06

Danny Fardy Jhonston Bermúdez · Accepted Answer · 2015-11-04T15:43:54.580

1

In your code:

document.getElementsByClassName('abc');

Returns an array-like object of all child elements which have all of the given class names.

MDN: getElementsByClassName

The result value is a HTMLCollection.

In this scenario we can iterate over the collection.

With Javascript by Using HTMLCollection:

<!DOCTYPE html>
<html>

<head>
  <title>Onreset-3</title>
</head>

<body>
  <form>
    Username:
    <input type="text" class="abc">
    <br>
    <br>Password:
    <input type="password" class="abc">
    <br>
    <br>
  </form>
  <input type="button" onclick="reset()" value="Clear">
  <script>
    function reset() {
      var a = document.getElementsByClassName('abc');
      // a = HTMLCollection
      console.log(a);
      // You can iterate over HTMLCollection.
      for (var i = 0; i < a.length; i++) {
        // You can set the value in every item in the HTMLCollection.
        a[i].value = "";
      }
    }
  </script>
</body>

</html>

Without Javascript

However, your form can perfectly works with a reset button. The <input type="reset" value="Clear"> must be inside the form tag.

Something like this:

<!DOCTYPE html>
<html>

<head>
  <title>Onreset-3</title>
</head>

<body>
  <form>
    Username:
    <input type="text" class="abc">
    <br>
    <br>Password:
    <input type="password" class="abc">
    <br>
    <br>
    <input type="reset" value="Clear">
  </form>

</body>

</html>

Additional Information:

HTMLFormElement.reset(): The HTMLFormElement.reset() method restores a form element's default values. This method does the same thing as clicking the form's reset button.

If a form control (such as a reset button) has a name or id of reset it will mask the form's reset method. It does not reset other attributes in the input, such as disabled.

Usage:
document.getElementById("myform").reset();

HTMLFormElement.reset()

edited Nov 04 '15 at 15:43

answered Nov 03 '15 at 14:48

Danny Fardy Jhonston Bermúdez

5,500
5
25
37

It's not an **array**. There's a significant difference between a `nodeList` and and `array` – Joseph Marikle Nov 03 '15 at 14:52
Sir! What for loop does here sir..i request you to explain please – Manoj Karthik Nov 03 '15 at 14:55
@JosephMarikle, yes, you're right. In this scenario, it's a nodeList. – Danny Fardy Jhonston Bermúdez Nov 03 '15 at 14:55
@ManojKarthik Updating my answer with explanation. – Danny Fardy Jhonston Bermúdez Nov 03 '15 at 14:56
@DannyFardyJhonstonBermúdez Actually, I was also wrong. Apparently old browsers return nodeLists. Modern browsers now return [HTMLCollections](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection). I only just found this out myself from [this question](http://stackoverflow.com/questions/3871547/js-iterating-over-result-of-getelementsbyclassname-using-array-foreach) – Joseph Marikle Nov 03 '15 at 14:57
@JosephMarikle..Sure Sir...Feeling Privileged with you – Manoj Karthik Nov 03 '15 at 14:58
@DannyFardyJhonstonBermúdez..Thanks alot For The Information Sir – Manoj Karthik Nov 03 '15 at 14:58
Thanks for the update. Also, Sorry for the initially bad information of it being a nodeList. – Joseph Marikle Nov 03 '15 at 15:04
@ManojKarthik I've updated my answer with an alternative solution by using reset button. Without javascript. Hope this helps. – Danny Fardy Jhonston Bermúdez Nov 03 '15 at 15:09
I think OP is confused. He said `My task is to do using functions in j.s instead of reset in html.`. So this answer: first solution is not a reset, it removes all values independently of the initial value. And second solution is without javascript, so OP don't need this. However, OP gives you the correct answer. So OP is very confused... – Marcos Pérez Gude Nov 04 '15 at 14:28
I fully understand your point of view, however, my intention is to show, through an «**alternative solution**», the possibility of restoring the fields of a form with the correct use of the `
` and `` tags. My intention is to help to the OP with any other possible solution. It's good to help others with all knowledge that you have. Anyways, in this answer I'm showing two solutions to help in this question. Thanks. :)
– Danny Fardy Jhonston Bermúdez Nov 04 '15 at 15:31

I'm Unable to Clear the Form

2 Answers2