JavaScript Show Div

[Hunter]

I have a form, as shown below. The fields are named "name", "email" ect..


<form name="form1" method="post">
<p class="g2">Name:</p>
<input type="text" class="contact-feild" name="name" size="20" id="name" onBlur="validate(name)"/>
<br />
<p class="g2">Email:</p>
<input type="text" class="contact-feild" name="email" size="20" />
<br />
<p class="g2">Message:</p>
<textarea name="message" class="contact-feild" style="width:300px; height:150px; overflow:scroll; overflow-x:hidden;">
</textarea>
<br />
<input type="submit" value="Submit" class="button" name="submit"/>
</form>


I was wondering if I could make a div named "namediv", "emaildiv" ect.. as the id.

This saves the script confusing the div with the form field. But I don't want to have loads of javascript to show the divs seperatly.

This is hard to explain, but is there a way I can use the document.getElementById() statment, and make it pull in the id, from the field which the javascript is already using. But add it infront of some text, eg:

document.getElementById(id+div).

Or

document.getElementById(id||div).

So it would basically look like this when run through the script:
document.getElementById(namediv)
And
document.getElementById(emaildiv)

Here is my javascript:


// VALIDATION ------------------------------------------------------------------------------------------
function validate(id) {
if (document.form1.name.value == "")
{
document.getElementById(id).style.backgroundColor= '#3f2222';
}
else {
document.getElementById(id).style.backgroundColor= '#2c482b';

return(true);
}
}
// VALIDATION END -------------------------------------------------------------------------------------

[Rob Oplawar]

Not quite sure what you're asking... it seems like you've already answered your own question, but it's not exactly clear where you're having trouble.

Not completely irrelevant: look into using Prototype (http://prototypejs.org). Also, if you happen to have a PHP backend, I wrote a full server-PHP/client-javascript validation library that's quite extensible. I can link you a download if you like.

[Hunter]

I will try and make it more clear to what I want tomorrow, I don't know how to explain it Lol, and cheers.

[legionaire45]

If I'm understanding this right, you want to pass a string variable with "div" concatenated to the end into getElementById? So you just pass in something like "name" or "email" and you get 'getElementById("namediv")'?

I'm pretty sure that getElementById will take any string as an argument, including variables - you might need to do something like:


divName = (grab the name you want to use)
divName.concat('div') // I think you can do this
document.getElementById( divName ).whatever


I'd recommend searching around on google or using w3schools or a similar website to figure out JS stuff in the future; there are perhaps a handful of people experienced with JS on this site and other places may be more beneficial.

[Rob Oplawar]

Ah, yeah, getElementById takes a string as an argument. You don't even need to bother with the concat method; on strings the + operator functions as the concatenation operator.

function doStuff(id) {
var divElement = document.getElementById(id + "div");
divElement.style.color = "#FF0000";
}
etc

[Hunter]

Awesome, cheers :)