I have a form generated by a website that I've put inside a series of nested divisions on my webpage. Now I have to name the email element to make it respond to a Javascript. I can't seem to get the name right because of all the divisions in which it's nested. Any help? Here is the code. So when I want to make my fields required, how do I name them in Javascript. Sorry that this is such a newbie question. <body> <div class="clear"></div> <div id="wrapper1"> <div id="header"> <div id="logo"> <h1><img src="images/bpt.png"></h1> </div> <!-- end div#logo --> </div> <!-- end div#header --> <div id="page"> <div id="page-bgtop1"> <div id="content1"> <div class="post"> <h2 class="titles"><a href="#">Become a Promeneur Today!</a></h2> </div> <form method="post" id="FSForm" enctype="application/x-www-form-urlencoded" onsubmit="return emailcheck(this);"> <!-- BEGIN_ITEMS --> <div class="outside_container form_shadow_top"> <div class="form_shadow_top_left"><div class="form_shadow_top_right"><div class="form_shadow_top_middle"></div></div></div> </div> <div class="form_table"> <div class="clear"></div> <div id="q0" class="q full_width"> <a class="item_anchor" name="ItemAnchor0"></a> <div class="segment_header" style="width:auto;text-align:Center;"><h1 style="font-size:36px; color:white; font-weight:bold;">Send Me the Information!</h1></div> </div> <div class="clear"></div> <div id="q1" class="q required"> <a class="item_anchor" name="ItemAnchor1"></a> <label class="question top_question" for="RESULT_TextField-1"><b>*</b> <span style="font-family: georgia,palatino;">First Name</span></label> <input type="text" name="RESULT_TextField-1" class="text_field" id="RESULT_TextField-1" size="18" maxlength="255" value="" /> </div> <div id="q2" class="q required"> <a class="item_anchor" name="ItemAnchor2"></a> <label class="question top_question" for="RESULT_TextField-2"><b>*</b> <span style="font-family: georgia,palatino;">Last Name</span></label> <input type="text" name="RESULT_TextField-2" class="text_field" id="RESULT_TextField-2" size="30" maxlength="255" value="" /> </div> <div class="clear"></div> <div id="q3" class="q required"> <a class="item_anchor" name="ItemAnchor3"></a> <label class="question top_question" for="RESULT_TextField-3"><b>*</b> Address</label> <input type="text" name="RESULT_TextField-3" class="text_field" id="RESULT_TextField-3" size="56" maxlength="255" value="" /> </div> <div class="clear"></div> <div id="q4" class="q required"> <a class="item_anchor" name="ItemAnchor4"></a> <label class="question top_question" for="RESULT_TextField-4"><b>*</b> City</label> <input type="text" name="RESULT_TextField-4" class="text_field" id="RESULT_TextField-4" size="28" maxlength="255" value="" /> </div> <div id="q5" class="q required"> <a class="item_anchor" name="ItemAnchor5"></a> <label class="question top_question" for="RESULT_TextField-5"><b>*</b> ST</label> <input type="text" name="RESULT_TextField-5" class="text_field" id="RESULT_TextField-5" size="2" maxlength="2" value="" /> </div> <div id="q6" class="q required"> <a class="item_anchor" name="ItemAnchor6"></a> <label class="question top_question" for="RESULT_TextField-6"><b>*</b> ZIP</label> <input type="text" name="RESULT_TextField-6" class="text_field" id="RESULT_TextField-6" size="10" maxlength="255" value="" /> </div> <div class="clear"></div> <div id="q7" class="q"> <a class="item_anchor" name="ItemAnchor7"></a> <label class="question top_question" for="RESULT_TextField-7">Cell Phone</label> <input type="text" name="RESULT_TextField-7" class="text_field" id="RESULT_TextField-7" size="13" maxlength="255" value="" /> </div> <div id="q8" class="q"> <a class="item_anchor" name="ItemAnchor8"></a> <label class="question top_question" for="RESULT_TextField-8">Home Phone</label> <input type="text" name="RESULT_TextField-8" class="text_field" id="RESULT_TextField-8" size="13" maxlength="255" value="" /> </div> <div id="q9" class="q"> <a class="item_anchor" name="ItemAnchor9"></a> <label class="question top_question" for="RESULT_TextField-9">Work Phone (one required)</label> <input type="text" name="RESULT_TextField-9" class="text_field" id="RESULT_TextField-9" size="12" maxlength="255" value="" /> </div> <div class="clear"></div> <div id="q10" class="q required"> <a class="item_anchor" name="ItemAnchor10"></a> <label class="question top_question" for="RESULT_TextField-10"><span style="color: white;"><b>*</b> E-Mail Address</span></label> <input type="text" name="RESULT_TextField-10" class="text_field" id="RESULT_TextField-10" size="56" maxlength="255" value="" /> </div> <div class="clear"></div> <div class="q required"><span style="color: white; font-size: 120%; font-weight:bold;"><b>*</b> Indicates Required Response</span> </div> <div class="clear"></div> </div> <div class="outside_container form_shadow_bottom"> <div class="form_shadow_bottom_left"><div class="form_shadow_bottom_right"><div class="form_shadow_bottom_middle"></div></div></div> </div > <!-- END_ITEMS --> <div class="outside_container"><input type="submit" name="Submit" value="Submit" class="submit_button" id="FSsubmit" /></div> </form> <div class="post"> <h2 class="titles"><a1 href="#">Smörgåsbord isn't French!</a1></h2> </div> <div class="post"> <h2 class="titles"><a href="#">When You Say "Wisconsin" ...</a></h2> </div> </div> <!-- end div#content --> <div> <!-- end div#sidebar --> <div style="clear: both; height: 1px"></div> </div> </div> <!-- end div#page --> <!-- end div#footer --> </div> <!-- end div#wrapper --> </div> </body>
you can target any part of it by using document.getElementById look at your code - i changed it slightly - i took out the styling from the tags and put it inside styling tags in the head through the use of a class called 'bold'. i also gave the span tag a unique ID of 'bolden', and gave the label tag an id of 'emailLabel'. so now the label has an id of 'emailLabel', the span tag has an id of 'bolden' and the input field has an id of 'RESULT_TextField-10. it is unclear as to which you are trying to target, or how you are targeting it, so i made a separate input button that onclick will target all three IDs and change something about them. hope this makes sense: <head> <script type="text/javascript"> function emailBlack(){ document.getElementById("RESULT_TextField-10").style.color="red"; document.getElementById("bolden").style.color="#000"; document.getElementById("emailLabel").style.fontSize="30px"; } </script> <style type="text/css"> .bold {color:#FFF; font-weight:bold; } </style> </head> <body> ........<div id="q10" class="q required"> <a class="item_anchor" name="ItemAnchor10"></a> <label class="question top_question" for="RESULT_TextField-10" id="emailLabel"><span class="bold" id="bolden">* E-Mail Address</span></label> <input type="text" name="RESULT_TextField-10" class="text_field" id="RESULT_TextField-10" size="56" maxlength="255" value="" /> </div>..... ....<div class="outside_container"><input type="submit" name="Submit" value="Submit" class="submit_button" id="FSsubmit" /> <input type="button" onclick="emailBlack()" value="Make Email Black"/></div> Code (markup):
Hey! Thanks! I tried your code and it works great if I plug it into a blank html page. But if I put the code into my series of nested divisions, it doesn't seem to find element by ID any more. I'm wondering if I have to write it as document.wrapper.... etc. By the time I get to the division where I have my form, nothing seems to work. Oh, and I was trying to target the text area to make it required. Thanks
i tested the code in your entire page, and it works fine. here is the code for the entire page. note that now i changed the email textbox's ID and name to 'email' i left the extra button that targets the different parts of the email ( the label, the span class, and the input text box ) if you don't want that, and the dummy functions i wrote to illustrate it, just remove those lines. i added the classic functions to validate if the email field is filled in ( reference this for more info: http://www.w3schools.com/js/js_form_validation.asp ) ps: i'm sure you realize that your form has no action on it. hope this helps. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Untitled Document</title> <script type="text/javascript"> function emailBlack(){ document.getElementById("email").style.color="red"; document.getElementById("bolden").style.color="#000"; document.getElementById("emailLabel").style.fontSize="30px"; } function validate_required(field,alerttxt) { with (field) { if (value==null||value=="") { alert(alerttxt);return false; } else { return true; } } } function return_emailcheck(thisform) { with (thisform) { if (validate_required(email,"Email must be filled out!")==false) {email.focus();return false;} } } </script> <style type="text/css"> .bold {color:#FFF; font-weight:bold; } </style> </head> <body> <div class="clear"></div> <div id="wrapper1"> <div id="header"> <div id="logo"> <h1><img src="images/bpt.png"></h1> </div> <!-- end div#logo --> </div> <!-- end div#header --> <div id="page"> <div id="page-bgtop1"> <div id="content1"> <div class="post"> <h2 class="titles"><a href="#">Become a Promeneur Today!</a></h2> </div> <form method="post" id="FSForm" enctype="application/x-www-form-urlencoded" onsubmit="return_emailcheck(this);"> <!-- BEGIN_ITEMS --> <div class="outside_container form_shadow_top"> <div class="form_shadow_top_left"><div class="form_shadow_top_right"><div class="form_shadow_top_middle"></div></div></div> </div> <div class="form_table"> <div class="clear"></div> <div id="q0" class="q full_width"> <a class="item_anchor" name="ItemAnchor0"></a> <div class="segment_header" style="width:auto;text-align:Center;"><h1 style="font-size:36px; color:white; font-weight:bold;">Send Me the Information!</h1></div> </div> <div class="clear"></div> <div id="q1" class="q required"> <a class="item_anchor" name="ItemAnchor1"></a> <label class="question top_question" for="RESULT_TextField-1"><b>*</b> <span style="font-family: georgia,palatino;">First Name</span></label> <input type="text" name="RESULT_TextField-1" class="text_field" id="RESULT_TextField-1" size="18" maxlength="255" value="" /> </div> <div id="q2" class="q required"> <a class="item_anchor" name="ItemAnchor2"></a> <label class="question top_question" for="RESULT_TextField-2"><b>*</b> <span style="font-family: georgia,palatino;">Last Name</span></label> <input type="text" name="RESULT_TextField-2" class="text_field" id="RESULT_TextField-2" size="30" maxlength="255" value="" /> </div> <div class="clear"></div> <div id="q3" class="q required"> <a class="item_anchor" name="ItemAnchor3"></a> <label class="question top_question" for="RESULT_TextField-3"><b>*</b> Address</label> <input type="text" name="RESULT_TextField-3" class="text_field" id="RESULT_TextField-3" size="56" maxlength="255" value="" /> </div> <div class="clear"></div> <div id="q4" class="q required"> <a class="item_anchor" name="ItemAnchor4"></a> <label class="question top_question" for="RESULT_TextField-4"><b>*</b> City</label> <input type="text" name="RESULT_TextField-4" class="text_field" id="RESULT_TextField-4" size="28" maxlength="255" value="" /> </div> <div id="q5" class="q required"> <a class="item_anchor" name="ItemAnchor5"></a> <label class="question top_question" for="RESULT_TextField-5"><b>*</b> ST</label> <input type="text" name="RESULT_TextField-5" class="text_field" id="RESULT_TextField-5" size="2" maxlength="2" value="" /> </div> <div id="q6" class="q required"> <a class="item_anchor" name="ItemAnchor6"></a> <label class="question top_question" for="RESULT_TextField-6"><b>*</b> ZIP</label> <input type="text" name="RESULT_TextField-6" class="text_field" id="RESULT_TextField-6" size="10" maxlength="255" value="" /> </div> <div class="clear"></div> <div id="q7" class="q"> <a class="item_anchor" name="ItemAnchor7"></a> <label class="question top_question" for="RESULT_TextField-7">Cell Phone</label> <input type="text" name="RESULT_TextField-7" class="text_field" id="RESULT_TextField-7" size="13" maxlength="255" value="" /> </div> <div id="q8" class="q"> <a class="item_anchor" name="ItemAnchor8"></a> <label class="question top_question" for="RESULT_TextField-8">Home Phone</label> <input type="text" name="RESULT_TextField-8" class="text_field" id="RESULT_TextField-8" size="13" maxlength="255" value="" /> </div> <div id="q9" class="q"> <a class="item_anchor" name="ItemAnchor9"></a> <label class="question top_question" for="RESULT_TextField-9">Work Phone (one required)</label> <input type="text" name="RESULT_TextField-9" class="text_field" id="RESULT_TextField-9" size="12" maxlength="255" value="" /> </div> <div class="clear"></div> <div id="q10" class="q required"> <a class="item_anchor" name="ItemAnchor10"></a> <label class="question top_question" for="RESULT_TextField-10" id="emailLabel"><span class="bold" id="bolden">* E-Mail Address</span></label> <input type="text" name="email" class="text_field" id="email" size="56" maxlength="255" value="" /> </div> <div class="clear"></div> <div class="q required"><span style="color: white; font-size: 120%; font-weight:bold;"><b>*</b> Inddfgdficates Required Response</span> </div> <div class="clear"></div> </div> <div class="outside_container form_shadow_bottom"> <div class="form_shadow_bottom_left"><div class="form_shadow_bottom_right"><div class="form_shadow_bottom_middle"></div></div></div> </div > <!-- END_ITEMS --> <div class="outside_container"><input type="submit" name="Submit" value="Submit" class="submit_button" id="FSsubmit" /> <input type="button" onclick="emailBlack()" value="Make Email Black"/></div> </form> <div class="post"> <h2 class="titles"><a1 href="#">Smörgåsbord isn't French!</a1></h2> </div> <div class="post"> <h2 class="titles"><a href="#">When You Say "Wisconsin" ...</a></h2> </div> </div> <!-- end div#content --> <div> <!-- end div#sidebar --> <div style="clear: both; height: 1px"></div> </div> </div> <!-- end div#page --> <!-- end div#footer --> </div> <!-- end div#wrapper --> </div> </body> </html> Code (markup):