Trying to clear some fields with JS by selecting elements with the same id, perl hangup

Question

I am trying to clear some (10 of 50) fields by selecting elements by their shared id. The problem is that I can only select one at a time with getElementById()

Here is the jsFiddle demonstrating the single element grab. jsFiddle

function toggleBankCount() {
    secBankFields = document.getElementById('2ndBankFields');
    secBankFields.value = '';
}

I am fairly certain I can do what I want with getElementsByName() which returns an array of elements. However, I am using Perl and the name of the elements must be different in order for %fdat to work properly on submit. Can you help me?

I assume you're talking about clearing all of the HTML `` elements in a form, is that right? — ThisSuitIsBlackNot, Oct 24 '14 at 15:27
Can't you use classes? http://stackoverflow.com/questions/5338716/get-multiple-elements-by-id — user2075886, Oct 24 '14 at 15:29
possible duplicate of [How to reset (clear) form through JavaScript?](http://stackoverflow.com/questions/3786694/how-to-reset-clear-form-through-javascript) (Note that although the question asks about jQuery, the accepted answer shows how to do this using vanilla JavaScript as well.) — ThisSuitIsBlackNot, Oct 24 '14 at 15:32
Also see [jQuery/Javascript function to clear all the fields of a form](http://stackoverflow.com/q/6653556). — ThisSuitIsBlackNot, Oct 24 '14 at 15:33
If you don't hardcode the values in the form html, you can use a `reset` input: http://www.html5-tutorials.org/forms/submit-reset-buttons/ If you have hardcoded the values, any existing values will reset to the original hardcoded values. — i alarmed alien, Oct 24 '14 at 15:41

score 3 · Accepted Answer · answered Oct 24 '14 at 15:40

3

Here's how you can do it:

toggleBankCount = function () {
    secBankFields = document.getElementsByTagName('input');
    for (var i = 0; i < secBankFields.length; ++i) {
        if(secBankFields[i].id === '2ndBankFields')
            secBankFields[i].value = '';
    }
}

though ids should be unique, consider using classes instead. Also, classes and ids shouldn't begin with a digit.

Check it out: JSFiddle

answered Oct 24 '14 at 15:40

Johan Karlsson

6,419
1
19
28

This is good advice but I am only clearing about 10 of 50 fields. This would wipe out all of them. – Iluvatar14 Oct 24 '14 at 16:36
@physicsRiot check my if statement, it only clears inputs with `id === '2ndBankFields'` – Johan Karlsson Oct 24 '14 at 16:48
3

@physicsRiot you'd be better off giving all the fields you want to be cleared a certain class, and then getting all elements with that class. Using the same ID on multiple elements produces invalid HTML. – i alarmed alien Oct 24 '14 at 16:53
@caeth oh! yeah this works great. Sorry, I saw what I wanted to see apparently. – Iluvatar14 Oct 24 '14 at 19:09

score -1 · Answer 2 · answered Oct 24 '14 at 15:45

There are some Javascript functions which should help you.

Get element by ID attribute

Id should be unique.

var elm = document.getElementById("some_id");

Get elements by Tag name

// get all div elements
var elms = document.getElementsByTagName("div");

Get element by Class attribute

// get all elements with class .some_class
var elms = document.getElementsByClassName("some_class");

Get element by Name attribute

// get all elements with attribute name some_name
var elms = document.getElementsByName("some_name");

Get element by CSS selector

var elms = document.querySelectorAll("div.box, span.title");
for (var i = 0; i < elms.length; i++) {
   var elm = elms[i];
   console.log(elm);
}

This is great, but it doesn't answer the question. – i alarmed alien Oct 24 '14 at 15:47 — i alarmed alien, Oct 24 '14 at 15:47