/    Sign up×
Community /Pin to ProfileBookmark

.getElementById (Multiple Elements?)

Copy linkTweet thisAlerts:
Jul 27.2010

Hi There,

I’m performing some validation functions on a form I’ve created.

For the phone number, I have 3 text boxes lined up next to one another. The first is for the country code, the second is for area code and the third is for the remainder of the phone number.

I have used the following in order to detect whether the input value isNaN.

[CODE]
input = document.getElementById(“phone1”);
if (isNaN(input.value)) {
errorText += “n – Your phone number cannot be text.”;
}

if (!valid)
alert(errorText);

return valid;
}[/CODE]

As I have three text boxes for the phone number, can I group them within this one statement? So, …getElementById(“phone1, phone2, phone3”); ?

If not, what would you recommend?

Thanks for your time and help!

to post a comment
JavaScript

8 Comments(s) ↴

Copy linkTweet thisAlerts:
@tirnaJul 27.2010 — Your options include:

1) giving the elements the same name and use getElementsByName()

2) give them all the same class name and use a getElementsByClassName() something like:

[CODE]
function getElementsByClassName(oElm, strTagName, strClassName)
{
var arrElements = (strTagName == "*" && oElm.all)? oElm.all : oElm.getElementsByTagName(strTagName);
var arrReturnElements = new Array();
strClassName = strClassName.replace(/-/g, "\-");
var oRegExp = new RegExp("(^|\s)" + strClassName + "(\s|$)");
var oElement;
for(var i=0; i<arrElements.length; i++)
{
oElement = arrElements[i];
if(oRegExp.test(oElement.className))
{
arrReturnElements.push(oElement);
}
}
return (arrReturnElements)
}

//example use

var phoneElems = getElementsByClassName(document, 'input', 'txtPhoneNums');

[/CODE]
Copy linkTweet thisAlerts:
@benopethauthorJul 27.2010 — Many thanks for your reply.

I failed to mention that I have created this form in ASP.NET 2.0 so I am unsure as to whether I can use the name attribute?

Your second solution which I both appreciate and admire, is also a bit advanced for me so I'm hoping for something along the lines of your first solution.

What would you recommend?
Copy linkTweet thisAlerts:
@tirnaJul 27.2010 — Both solutions are 'plain vanilla' html and javascript solutions and so it shouldn't matter if you are using ASP.NET. That would only matter after the form is actually submitted.

If you're not comfortable with option 2) then maybe click the link I posyed for getElementsByName() and it will take you to the w3schools tute on the function.

Basically it returns an array of element objects with a given name.

So if your 3 phone input boxes were named 'phoneNum'

[CODE]var phoneElems = document.getElementsByName('phoneNum');[/CODE]

phoneElems would be a 3 element array of your 3 phone input boxes and

phoneElems[0].value would contain the value entered by the user in the first box

phoneElems[1].value would contain the value entered by the user in the second box

phoneElems[2].value would contain the value entered by the user in the third box.

and you can validate each accordingly.
Copy linkTweet thisAlerts:
@benopethauthorJul 27.2010 — I like the look of the array based solution and will go for that and shall take a more detailed look at the W3Schools link.

Thanks for your help, much appreciated!
Copy linkTweet thisAlerts:
@tirnaJul 27.2010 — you're welcome ?

And if you need help processing the form data in ASP, maybe post a query in the ASP forum. I went to the 'PHP school' so I won't be able to help there.?

But I think yamaharuss or one of the other ASP gurus should be able to help.
Copy linkTweet thisAlerts:
@KorJul 27.2010 —  I went to the 'PHP school' so I won't be able to help there.?[/QUOTE]
So did I. ?

I wonder how could be sent, via ASP, the submitted data in case of elements with the same name, but which are not part of a radio group. In PHP, as you know, it would have been easy: name="phonenumber[COLOR="Blue"][][/COLOR]". But I am not sure if ASP is able to get it as an array within the same syntax. We'll try to find out in the ASP forum, yes, you are right.
Copy linkTweet thisAlerts:
@tirnaJul 27.2010 — That's why I referred the OP to the ASP forum. ?

I would be surprised if ASP can't handle an array variable being sent to a server side script - but I've seen stranger things happen ?

Assuming ASP can handle an array being sent to it, then the OP can talk to the ASP gurus regarding how to name html elements accordingly.

If in the unlikely event ASP can't handle an array coming over, then the OP can always use option 2) I suggested earlier.

It's out of my hands now.
Copy linkTweet thisAlerts:
@KorJul 27.2010 — Agree.
×

Success!

Help @benopeth spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 4.29,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...