JavaScript - Apply Selected Class To One <li> When Another <li> Is Clicked On
Hi,
I currently have a script that dynamically adds a css class called "on" to a menu item once it is selected, turning that link red to show that it's active. Here is the web page: www.talmagecooley.com/films.html As you can see, if you click on "Dimmer" or "Pol Pot's Birthday", or one of the three Patriotville scene links (1, 2, or 3), those links stay red. But what I need to happen is that when the user hovers over OR clicks on "1", "2", or "3", the word "Patriotville" also turns red along with those links. Here is the current code: <script language="JavaScript" type="text/javascript"> /*<![CDATA[*/ var Lst; function CngClass(obj){ if (Lst) Lst.className=''; obj.className='on'; Lst=obj; } /*]]>*/ </script> <li class="rss-popup" id="patriotville"><a id="three" href="#" onclick="" class="feed-link" style="color:#fff;">PATRIOTVILLE</a></li> <div id="clips"> <li class="rss-popup"><a id="four" href="#" onclick="changeIt('film3_1');CngClass(this);">1</a></li> <li class="rss-popup"><a id="five" href="#" onclick="changeIt('film3_2');CngClass(this);">2</a>|</li> <li class="rss-popup"><a id="six" href="#" onclick="changeIt('film3_3');CngClass(this);">3</a></li> </div> ********** Any help would be greatly appreciated! Thanks!! Similar TutorialsHiya! I'm a total JS beginner, so any help is appreciated. I've created the simple select box below that will "onchange" when an item is selected. I'm trying to apply the "selected" or "selected="selected" attribute to items that are chosen from the menu. Example: The goal is to show " <option value="/1" selected="selected"> " when page "/1" is chosen and to show <option value="/1"> when /1 is not the current page. I've follow a few simple tutorials with no luck and even tried php conditionals to trigger the "selected" attribute with no luck. Any feedback is GREATLY appreciated, thank you! Code: <form name="guideform" method="get"> <select class="wptdb_jumpbar_select" name="mymenu" onChange="window.location=document.guideform.mymenu.options[document.guideform.mymenu.selectedIndex].value"> <option value="/1">Home Page #1</option> <option value="/2">Home Page #2</option> <option value="/3">Home Page #3</option> <option value="/4">Home Page #4</option> </select> </form> -------------------------------------------------------------------------------- Can some1 help me at this, i am very new to javsciprt and HTML things, so as the title says, a simple bold to the selected text in a div is what i need. below is the div area i have, so how do it?? Code: <TD colspan="25" width="525px" style="text-overflow: ellipsis; overflow: hidden;"> <input type="hidden" $acmForms.bindText("casecomments") /> <div #if (!$acmForms.getFormAttributes().isReadOnly()) CONTENTEDITABLE #end onKeyUp="dairy_limitTextArea(this, 4000)" onKeyDown="dairy_limitTextArea(this, 4000)" id="spell_casecomments" style="width:800px; height:220px; overflow: auto; border: 1px solid #bdcee5;"> </TD> Hi guys. I have a lot of information on my site that is in multiple categories. I have a list of categories, each with its own checkbox. By default, all the information is displayed (therefore all the checkbox's are checked by default). When someone unchecks the box I want to hide the divs with that class, and when someone rechecks the box, they should reappear. Here is my code so far. It is hiding the div's fine, but they are not reappearing when user tics the checkbox again. Code: <script type="text/javascript"> function toggledisplay(category){ if(document.getElementById(category).checked){ $("."+category).removeClass(category+"-hidden").addClass(category); } else{ $("."+category).addClass(category+"-hidden").removeClass(category); } } </script> <input type="checkbox" checked="checked" name="fitness" id="fitness" onclick="toggledisplay('fitness')" /> Hey all, Hoping someone could help me out with some javascript coding as I am a complete novice to this! I am currently building a website using 1 static page and all the content will be pulled in through different iframes by clicking on a navigation on the page. I found a very handy piece of javascript coding that lets me remove a class from one link and move it to the link that was clicked on (the code will be below). The issue I am facing with this is that if I have Home set to class="On" to begin with and then click on Location, the background image will be added to the Location section but won't get removed from Home until it is physically clicked on. Can anyone help me out with how I can get this to work correctly? javascript: Code: <script language="JavaScript" type="text/javascript"> var Lst; function CngClass(obj){ if (typeof(obj)=='string') obj=document.getElementById(obj); if (Lst) Lst.className=''; obj.className='On'; Lst=obj; } </script> HTML: Code: <div id="navWrapper"> <div id="globalNav"> <ul> <li onclick="CngClass(this);" class="On"><a href="iframes/home.html" target="content_iframe">Home</a></li> <li onclick="CngClass(this);" class=""><a href="iframes/location.html" target="content_iframe">Location</a></li> <li onclick="CngClass(this);" class=""><a href="iframes/speakers.html" target="content_iframe">Speakers</a></li> <li onclick="CngClass(this);" class=""><a href="iframes/agenda.html" target="content_iframe">Agenda</a></li> <li onclick="CngClass(this);" class=""><a href="iframes/useful_material.html" target="content_iframe">Useful Material</a></li> <li onclick="CngClass(this);" class=""><a href="iframes/event_presentations.html" target="content_iframe">Event Presentations</a></li> <li onclick="CngClass(this);" class=""><a href="iframes/gallery.html" target="content_iframe">Gallery</a></li> </ul> </div> <div id="localNav"></div> </div> <script language="JavaScript"> function changeColor(cell_id){var state1="#dde6ed"; var state2="#ffc20e"; var cellid = new Array ("id1", "id2", "id3", "id4", "id5", "id6"); for(var i = 0; i < cellid.length; i++){var nav = document.getElementById(cellid[i]); if(cellid == nav.id){nav.style.backgroundColor=state2;} else {nav.style.backgroundColor=state1;}}} </script> Can anyone tell me what is wrong with this script. I put an onClick= changeColor(this);" in my <td> tag to call the script but still not working. like for example i have text areas named upload1 and upload2 when I click or add input on upload1 a drop down list below upload2 will not change, but when I add input on upload2 the dropdown will select "parts" This might be a really stupid question. I'm new to javascript, and I'm wondering if it is possible to add a css class to a for Loop? Just so that I get this result without having to write every paragraph: <code> example { text-align:center; height:100cm; } </style> </head> <body> <p>0m</p> <p>1m</p> <p>2m</p> <p>3m</p> </body> </code> Hi, I'm just trying to use a JavaScript form element handler to apply a CSS gradient background dynamically. It doesn't work in IE, but does in the other browsers I've tried. Thaks for any help with it! Jennifer Here's my function Code: function swapGradButton() { g1 = document.getElementById('ButtonGrad1Color'); g2 = document.getElementById('ButtonGrad2Color'); txt = document.getElementById('ButtonTextColor'); document.getElementById('GradButton').style.color = txt.value; if (document.getElementById('GradButton').filters && document.getElementById('GradButton').filters.length>0) { document.getElementById('GradButton').filter = "progid:DXImageTransform.Microsoft.gradient(startColorstr='"+g1.value+"', endColorstr='"+g2.value+"')"; } else { document.getElementById('GradButton').style.background = "-webkit-gradient(linear, left top, left bottom, from("+g1.value+"), to("+g2.value+"))"; document.getElementById('GradButton').style.background = "-moz-linear-gradient(top, "+g1.value+", "+g2.value+")"; } } Hello, Using Javascript, How would I go about apply the following code below as a style class (Error) to a single textbox? Here's what I have so far: Code: document.getElementById('T1').style.backgroundColor = 'FEF6F4' document.getElementById('T1').style.border = '1px solid #CD0A0A' Thanks. J Hi guys i am newbie here. I would really appreciate some help. Here is the issue. I would like to implement jqtransform http://www.dfc-e.com/metiers/multime...e/jqtransform/ I cant seem to get it working. Here are my searchform files (searchform.tpl) and (searchform.php) SEARCHFORM.TPL Code: <style type="text/css"> <!-- #searchform .form-container form table tr td div table tr td .note span strong { font-family: Tahoma, Geneva, sans-serif; font-size: 12px; } .findbutton { } --> </style> <link href="../css.css" rel="stylesheet" type="text/css" /> <title>Oztradesman.com.au</title><div id="searchform"> <div class="form-container"> <form action="<?php echo BASE_URL; ?>/search_results.php" method="get"> <table width="946" height="290" align="center" cellspacing="5"> <tr> <td width="932" height="278" valign="top" style="padding-bottom: 15px; font-family: Tahoma, Geneva, sans-serif; font-size: 11px; font-weight: bold;"><div align="center"> <table width="694" height="262" align="left" cellspacing="2"> <tr> <td width="10"> </td> <td width="171"><img src="../../../Background.gif" alt="the best Tradesman in Australia" width="12" height="22" /><img src="../../../Background.gif" alt="the bestTradesman in Australia" width="12" height="2" /><img src="../../../Background.gif" alt="the best Tradesman in Australia" width="12" height="2" /><img src="../../../Background.gif" alt="the best Tradesman in Australia" width="12" height="2" /><img src="../../../Background.gif" alt="the best Tradesman in Australia" width="12" height="2" /><img src="../../../Background.gif" alt="the best Tradesman in Australia" width="12" height="2" /><img src="../../../Background.gif" alt="the best Tradesman in Australia" width="12" height="2" /><img src="../../../Background.gif" alt="the best Tradesman in Australia" width="12" height="2" /></td> <td width="40"><p align="left"><img src="../../../Background.gif" alt="Builder Builder Builder Builder Builder Builder Builder Builder Builder Builder Builder Builder Builder Builder Builder Builder Builder Builder Builder Builder Builder Builder Builder Builder Builder Builder Builder Builder Builder Builder Builder Builder Builder Builder Builder Builder Builder" width="1" height="1" /></p> <p align="left"><img src="../../../Background.gif" alt="Tradesman Tradesman Tradesman Tradesman Tradesman Tradesman Tradesman Tradesman Tradesman Tradesman Tradesman Tradesman Tradesman Tradesman Tradesman Tradesman Tradesman Tradesman" width="1" height="1" /></p></td> <td width="20"></td> </tr> <tr> <td> </td> <td height="58"><img src="../../../Background.gif" alt="the bestTradesman in Australia" width="1" height="1" /></td> <td> </td> <td> </td> <td colspan="2"> </td> <td width="92"> </td> <td width="68"> </td> <td width="71"> </td> <td width="87"><p class="note"> </p> <p class="note"> </p></td> <td width="11"> </td> </tr> <tr> <td valign="top" nowrap="nowrap" style="padding-bottom: 15px; font-size: 15px;"> </td> <td height="47" valign="top" nowrap="nowrap" style="padding-bottom: 15px; font-size: 16px;"><p align="left" class="note"> </p> <p align="left" class="note"> </p> <p align="left" class="note"> </p> <p align="left" class="note"><strong>Select Trade</strong></p> <p align="left" class="note"><strong><strong><?php echo $form->getFieldHTML('category'); ?></strong></strong></p> <p align="left" class="note"> </p></td> <th valign="top" style="padding-bottom: 15px"><p align="left" class="note"><span style="padding-bottom: 15px; cursor: text;"> <p align="left" class="note"> <p align="left" class="note"> <p align="left" class="note"> <!-- <?php echo $form->getFieldHTML('location_id'); ?> --> <td valign="top" style="padding-bottom: 15px"><p align="left" class="note"> </p></td> <td width="65" height="47" valign="top" style="padding-bottom: 15px; font-size: 16px;"><p align="left" class="note"> </p> <p align="left" class="note"> </p> <p align="left" class="note"> </p> <p align="left" class="note"><strong>Location</strong></p><p align="left" class="note"><?php echo $form->getFieldHTML('zip'); ?></p> <p align="left" class="note"> </p></td> <td width="1" valign="top" nowrap="nowrap" style="padding-bottom: 15px; font-size: 15px;"> </td> <td height="47"><p> </p> <p align="left"> </p> <p align="left"> </p> <p align="left"> </p> <p align="left"> </p> <p align="left"> </p> <p align="right"><span class="note"><span style="padding-bottom: 15px;"><?php echo $form->getFieldHTML('zip_miles'); ?></span></span></p> <p align="center"><strong>Surrounding Areas</strong></p> <td valign="top" style="padding-bottom: 15px"><p class="note"> </p> <p class="note"> </p> <p class="note"> </p> <p class="note"> </p> <p class="note"><span style="padding-bottom: 15px;"> </span></p> </p></td> <td valign="top" style="padding-bottom: 15px"><p class="note"> </p> <p class="note"> </p> <p class="note"> </p> <p class="note"> </p> <p class="note"> </p> <p class="note"> </p> <p class="note"><span style="padding-bottom: 15px;"> <input name="input" type="image" class="button" title="Find Tradesman" value="Search" src="../../../The-Find-Search-button.png" alt="Find Tradesman builder plumber electrician painter" align="left" width="98" height="32" hspace="0" vspace="0" /> </span></p></td> <td valign="top" style="padding-bottom: 15px"><p class="note"> </p> <p class="note"> </p> <p class="note"> </p> <p class="note"> </p> <p class="note"> </p></td> <td> </td> <td width="6"> </td> </tr> <tr> <td valign="top" style="padding-bottom: 15px"> </td> <td valign="top" style="padding-bottom: 15px"> </td> <td valign="top" style="padding-bottom: 15px"> </td> <td valign="top" style="padding-bottom: 15px"> </td> <td colspan="2" valign="top" style="padding-bottom: 15px"> </td> <td valign="top" style="padding-bottom: 15px"> </td> <td valign="top" style="padding-bottom: 15px"> </td> <td valign="top" style="padding-bottom: 15px"> </td> <td></td> <td></td> </tr> <tr> <td valign="top" style="padding-bottom: 15px"> </td> <td height="48" valign="top" style="padding-bottom: 15px"><div align="left"></div></td> <td valign="top" style="padding-bottom: 15px; cursor: text;"> </td> <td valign="top" style="padding-bottom: 15px"> </td> <td colspan="2" valign="top" style="padding-bottom: 15px"> </td> <td valign="top" style="padding-bottom: 15px"> </td> <td valign="top" style="padding-bottom: 15px"> </td> <td valign="top" style="padding-bottom: 15px"> </td> <td> </td> <td></td> </tr> </table> </div></td> </tr> </table> </form> </div> </div> <script type="text/javascript"><!-- document.getElementById('keyword').focus(); //--></script> SEARCHFORM.PHP Code: <?php if(!defined('IN_PMD')) exit(); $searchform = $PMDR->getNew('Template',PMDROOT.TEMPLATE_PATH.'blocks/search_form.tpl'); $search_form_object = $PMDR->getNew('Form'); $search_form_object->addField('keyword','text',array('label'=>$PMDR->getLanguage('public_general_search_find'),'fieldset'=>'search','value'=>$_GET['keyword'],'style'=>'width: 220px; height: 28px;','id'=>'searchfield')); $search_form_object->addField('category','select',array('label'=>$PMDR->getLanguage('public_general_search_category'),'fieldset'=>'search','value'=>$_GET['category'],'style'=>'width: 220px; height: 28px;','first_option'=>'','options'=>$db->GetAssoc("SELECT id, title FROM ".T_CATEGORIES." WHERE hidden=0 AND level=1 ORDER BY left_"),'class'=>'input_small')); $search_form_object->addField('location_id','select',array('label'=>$PMDR->getLanguage('public_general_search_location'),'fieldset'=>'search','value'=>$_GET['location_id'],'first_option'=>'','options'=>$db->GetAssoc("SELECT id, title FROM ".T_LOCATIONS." WHERE hidden=0 AND level=1 ORDER BY left_"),'class'=>'input_small')); $search_form_object->addField('location','text',array('label'=>$PMDR->getLanguage('public_general_search_location'),'fieldset'=>'search','value'=>$_GET['location'],'style'=>'width: 215px; border:#000 1px solid;','id'=>'searchfield')); $search_form_object->addField('zip','text',array('label'=>$PMDR->getLanguage('public_search_zip'),'fieldset'=>'search','style'=>'width: 215px; border:#000 1px solid;','id'=>'searchfield')); $search_form_object->addField('zip_miles','radio',array('label'=>$PMDR->getLanguage('public_general_search_within'),'fieldset'=>'search','value'=>$_GET['zip_miles'],'style'=>'width: 2cm;','id'=>'radiosearchbutton','options'=>array('25'=>''))); $search_form_object->addField('submit','submit',array('label'=>$PMDR->getLanguage('public_general_search_search'),'fieldset'=>'button')); $searchform->set('form',$search_form_object); unset($search_form_object); ?> Now i load the JQUERY.JS and JQTRANSFORM.JS files through the HEADER.PHP file. This is how it looks; HEADER.PHP Code: <?php $timing_start = explode(' ', microtime()); if($PMDR->get('header_file')) { $header = $PMDR->getNew('Template',PMDROOT.TEMPLATE_PATH.'/'.$PMDR->get('header_file')); } else { $header = $PMDR->getNew('Template',PMDROOT.TEMPLATE_PATH.'/header.tpl'); } // Check for maintenance option and show header message bar if necesarry if($PMDR->getConfig('maintenance') AND in_array('admin_login',$_SESSION['admin_permissions'])) { $header->set('maintenance',true); } if($PMDR->getConfig('usershare') == 'FacebookConnect') { $header->set('facebook',true); } if($PMDR->get('meta_description')) { $header->set('meta_description',strip_tags($PMDR->get('meta_description'))); } else { $header->set('meta_description',$PMDR->getConfig('meta_description_default')); } if($PMDR->get('meta_keywords')) { $header->set('meta_keywords',$PMDR->get('meta_keywords')); } else { $header->set('meta_keywords',$PMDR->getConfig('meta_keywords_default')); } if($PMDR->getConfig('search_display_all') OR on_page('index.php')) { $header->set('searchform',$searchform); $header->set('search_display_all',($PMDR->getConfig('search_display_all') OR on_page('index.php'))); } $PMDR->loadJavascript($PMDR->getConfig('head_javascript')); $PMDR->loadJavascript('<script type="text/javascript" src="'.BASE_URL.'/includes/javascript_global.js"></script>'); $PMDR->loadJavascript('<script type="text/javascript" src="'.BASE_URL.TEMPLATE_PATH.'javascript.js"></script>'); $PMDR->loadJavascript('<script type="text/javascript" src="'.BASE_URL.TEMPLATE_PATH.'jquery.js"></script>'); $PMDR->loadJavascript('<script type="text/javascript" src="'.BASE_URL.TEMPLATE_PATH.'jquery.jqtransform.js"></script>'); //if(is_object($xajax)) $javascript .= $xajax->getJavascript(BASE_URL.'/includes/xajax/'); $PMDR->setAdd('javascript_onload',' var headID = document.getElementsByTagName("head")[0]; if(headID) { var newScript = document.createElement(\'script\'); newScript.type = \'text/javascript\'; newScript.src = \''.BASE_URL.'/cron.php?type=javascript\'; headID.appendChild(newScript); } '); if($PMDR->get('javascript_onload')) { $onLoad = '<script language="javascript" type="text/javascript" charset="'.CHARSET.'">'; $onLoad .= "function onLoad() {\n"; $onLoad .= implode("\n",$PMDR->get('javascript_onload')); $onLoad .= "\n}"; $onLoad .= 'window.onload=onLoad;'."\n"; $onLoad .= '</script>'."\n"; $PMDR->loadJavascript($onLoad); unset($onLoad); } $javascript .= implode("\n",(array) $PMDR->get('load_javascript')); $header->set('load_javascript',$javascript); $header->set('load_css',implode("\n",(array) $PMDR->get('load_css'))); $header->set('css_file_path',BASE_URL.TEMPLATE_PATH.'css.css'); // Add title from configuration to end of array and display, seperated by a dash - //$PMDR->set('page_title',array_merge(array_reverse($PMDR->get('page_title')),array($PMDR->getConfig('title')))); $header->set('page_title',implode(' - ',array_merge(array_reverse($PMDR->get('page_title')),array($PMDR->getConfig('title'))))); if($PMDR->get('breadcrumb')) { $header->set('breadcrumb',$PMDR->get('breadcrumb')); } ?> This is all i have done other than the basic css which i didn't include so i don't make things more complicated. I would really appreciate some help on this. Regards, George Hello, I am new with Javascript and running into this problem that I don't understand. I define a base class that only contains an array "elements", and a derived class that contains nothing more (for simplicity): Code: function baseClass() { this.elements = new Array; } function derivedClass() { } derivedClass.prototype = new baseClass; Then I create two instances of the derived class, and add two elements in each: Code: a = new derivedClass(); a.elements.push("A"); a.elements.push("B"); b = new derivedClass(); b.elements.push("C"); b.elements.push("D"); When I examine the contents of these arrays, I see that both a.elements and b.elements contain {"A","B","C","D"} ! I.e. as if the two arrays are in fact the same array! But these are two separate instances of the class, I expect two separate arrays. Note that if instead I use the base class: Code: a = new baseClass(); a.elements.push("A"); a.elements.push("B"); b = new baseClass(); b.elements.push("C"); b.elements.push("D"); then I get a.elements = {"A","B"} and b.elements = {"C","D"}, as I would expect. Could someone explain to me the problem with using the derived class? Thank you, Stephanos var myDoc = app.documents[0] var mySel = app.selection[0] var myStory = mySel.parentStory; // Now we are pointing to the entire story var myHolidayStyle1 = "Holiday-Day_of_the_week" // Header 'day of the week' var myHolidayStyle2 = "Holiday-Month_and_date" // Header 'month and day' var myHolidayStyle3 = "Lead Paragraph" // Lead Paragraph 'default paragraph style' myStory.paragraphs[0].appliedParagraphStyle = myHolidayStyle1; //Header 'day of the week' and Month and day. myStory.paragraphs[1].appliedParagraphStyle = myHolidayStyle2; // Header 'month of the day' myStory.paragraphs[2].appliedParagraphStyle = myHolidayStyle3; // Lead Paragraph 'default paragraph style' //.appliedParagraphStyle = myDoc.paragraphStyles.item (myHolidayStyle1); //mySel.paragraphs[-1].insertionPoints[-1].paragraphs[0]; //Loops to change all the paragraphs to Paragraph body to ever paragraph (only problem is its limited to the entire page.) for (loop=0; loop<myStory.paragraphs.length; loop++) myStory.paragraphs[loop].appliedParagraphStyle = myHolidayStyle3; // Something simple to check if text 'drops out' of a certain text frame. currTextFrame = app.selection[0].parentTextFrames[0]; currPar = currTextFrame.paragraphs[0]; while (currPar && currPar.parentTextFrames[0] == currTextFrame) { currPar.appliedParagraphStyle = someStyle; currPar = currTextFrame.paragraphs.nextItem(currPar); } // Script for starting Spell Check var WshShell = app.menus.item(0); var WshShell2 = WshShell.submenus.item(1); var WshShell3 = WshShell2.submenus.item(1); var WshShell4 = WshShell3.menuItems.item(0); WshShell4.associatedMenuAction.invoke(); Would this work, do I got a pretty generalized idea of how it should be written. I want this script to apply data that comes in from a export that is imported into Indesign. Basically Holidaystyle1 and 2 are already preset in data from a program called Linear. But the day, month, and date, will change. So I hoping there is a way from the script above to make 1 and 2 be at the top of the page, and style 3 be the paragraph style that leads in the text until the next articles are reach that start with like say 'Friday' and 'November 12', and the routine repeats itself again, until there is no-more data. (**edit** Is there a way to tell the script to put a line break or empty line between Style 0 and style 1?) I hope this make sense. I would love for the script to do all the data at once, and at the end, I put a spell check function that checks to make sure the spelling and grammar are correct, before the script finally ends. Hi coders, I have a form where customers can register thierselves by entering the relevant fields. There is a control() javascript which ckecks if everything on the form is ok before submitting it. Althugh IE applies the script for its every check, Firefox only applies the first check (first if statement) of the script. The rest is ignored. Here is the javascript code: Code: function control() { if (document.member.FirstName.value == ""){ document.member.FirstName.focus(); alert("Please fill the name field"); return false; } if (document.member.FirstName.value.length<2) { alert("Name field cannot be shorter than 2 characters."); document.member.FirstName.focus(); return false; } if (/[\d]/.test(document.getElementById("FirstName").value)) { alert("Entered numbers into the Name field"); return false; } if (document.member.LastName.value == ""){ document.member.LastName.focus(); alert("Please fill the Lastname field"); return false; } if (document.member.LastName.value.length<2) { alert("Lastname field cannot be shorter than 2 charcters. Please check again."); document.member.LastName.focus(); return false; } if (/[\d]/.test(document.getElementById("LastName").value)) { alert("Entered numbers into the Lastname field"); return false; } if (document.member.Address1.value.length<10) { alert("Address field contains less than 2 characters."); document.member.Address1.focus(); return false; } if (document.member.Username.value == ""){ document.member.Username.focus(); alert("Username field cannot be blank"); return false; } if (document.member.Address1.value == ""){ document.member.Address1.focus(); alert("Address field cannot be blank "); return false; } if (document.member.City.value == ""){ document.member.City.focus(); alert("City field cannot be blank"); return false; } if (document.member.Email.value == ""){ document.member.Email.focus(); alert("E-Mail field cannot be blank."); return false; } if (echeck(document.member.Email.value)==false){ document.member.Email.focus(); return false; } if (document.member.PhoneNumber.value == ""){ document.member.PhoneNumber.focus(); alert("Phone number field cannot be blank"); return false; } if (!/^\d*$/.test(document.getElementById("PhoneNumber").value)) { alert("Entered characters into the Phone Number field"); return false; } if (document.member.Pass.value == ""){ document.member.Pass.focus(); alert("Password field cannot be blank."); return false; } if (document.member.Pass2.value == ""){ document.member.Pass2.focus(); alert("Password confirmation field cannot be blank."); return false; } if (document.forms[0].Pass.value.length<6) { alert("Password field cannot contain less than 6 characters. Please check"); document.member.Pass.focus(); return false; } if (document.member.Pass.value != document.member.Pass2.value) { alert("Password and password confirmation fields are not identical. Please check "); document.member.Pass.focus(); return false; } if (!isTelNum(document.forms[0].PhoneNumber,'Telefon ')) return false; if (!isNum(document.forms[0].InternalPhoneNumber,'Internal Phone number')) return false; //if (!isValidEmail(document.forms[0].Email)) return false; return true; } Well its interesting that only the first check is taken into consideration. if (document.member.FirstName.value == ""){ The rest is not even seen. Even if you do not fill the rest of the form, the submit button tries to submit the form regardless what more needs to be checked. Here is the submit button: Code: <input type="submit" name="member" value="Register Me" id="member" onclick="return control()";> Any observations and comments are appreciated. Hey, I'm new to javascript and was wondering if there is something where you can tell if something is clicked. All I need is to know something where you click something and it appears, and click again it disappears. How can I do this? Thanks! Hey, I'm not to good at javascript and need help. When someone clicks an option in a <select> box, I want a field to appear with a normal text box. For example: Code: <!--Option box--> <select name="method"> <option>Post 2 Host</option> <option>Paid</option> <!--I want it when they click Paid, a box shows up below. Such as--> <input type="text" name="paid" /> Can you show me how I can do this? Thanks. On custom button images, how do you give them the effect that they're "pushed" when the user clicks them and "unpushed" when the user lets his finger off the mouse button? I'm guessing it's some type of rollover effect, but I'm not sure how it's done.
I have a simple problem that I can't solve. I know that you guys might know how to solve it. I'm using an extension of dreamweaver called Coursebuilder. I'm making an online-examination to improve education especially in a far region of Asia where there's poor quality of education in there. Now, I'm making a multiplication choice type of exam with radio buttons in it and when the "check answer" was clicked, the answer will be explained. It is already done, but the problem is the feedback score. I can't make a feedback score... example the examination is 40/100 score it must appear on the screen at once after a click of a certain button. That's my only problem for now. It will be used in CD format and online. what should i do? All I need is to know how will I put a button that once it was clicked the score in the examination will appear. I'm an amateur web designer, I need your help. Thanks please help me. Hi everyone - I was wondering how it would be possible for me to create a FAQ with drop-down answers when the question is clicked? For example: https://www.facebook.com/help/?page=1145 Facebook has something like that available. Any ideas? Hi, I am currently working on a website with a custom livesearch. The livesearch is a simple <ul> under the input box. I am trying to make it so that if the user click anywhere other than the input box(id=searchInput) or the list(id=searchResults). I tried an onblur on the input box, but when the user clicks on the list it vanishes, which defeats the object! Any help would be much appreciated Hey all, I would like to get the id of a html check box when the client clicks it. I want to do this on the client side so i need to use java script. I want to be able to do this in both fire fox and ie window.event.srcElement works great for ie but not for firefox please do not tell me to use Event.target for firefox because that does not work. At least it is not working for me anyway. Thanks |