JavaScript - Onchange To Switch Span Font Color.
I have a form that loops through several classes from the database. Each is wrapped by a span with an id that matches its 'workshop_id'. When somebody chooses a number of students (greater than 0) from the dropdown for each, I want to change the font color. I've tried what seems like a simple script to do that, but it's not working. It's calling the function, but doesn't change any font colors.
Code: <script> function highlighter(nameit) { elementtochange = document.getElementById(nameit); elementtochange.style.color = orange; } </script> <!-- a PHP loop generates each workshop here, like this.... --> <span id="selectedclass<?= $c_row['workshop_id'] ?>" style="color:green;" > <?= $c_row['workshop_title'] ?> <!-- several other php results echoed --> </span> <select style="width:70px;" name="participantqty[<?= $c_row['workshop_id'] ?>]" id="participantqty" onfocus="this.className='reg_live';" onblur="this.className='reg_off';" onChange="highlighter('selectedclass<?= $c_row['workshop_id'] ?>')"> <option value="">select </option> <option value="1" <?php if(($numberyouthpassed === '1') && ($unique_idpassed === $c_row['workshop_id'])) { echo 'selected="selected"'; } ?> width=45>1 </option> <option value="2" <?php if(($numberyouthpassed === '2') && ($unique_idpassed === $c_row['workshop_id'])) { echo 'selected="selected"'; } ?> width=45>2 </option> </select> Similar TutorialsI'm trying to highlight the row color when the input field is changed but get an error. Can someone please help. TRACY Code: <script type="text/javascript"> function toggle(trid){ var edited_row_bgcolor = '#FAEBD7'; var elm = document.getElementById(trid); document.elm.style.background = edited_row_bgcolor; } </script> <table border="0" cellpadding="0" cellspacing="0" width="100%"> <tr id="Child1"> <td width="50%"> <input onchange="toggle('Child1');" type="text" name="T1" size="20"> </td> <td width="50%"></td> </tr> <tr> <td width="50%"><input type="text" name="T1" size="20"></td> <td width="50%"></td> </tr> <tr> <td width="50%"><input type="text" name="T1" size="20"></td> <td width="50%"></td> </tr> <tr> <td width="50%"><input type="text" name="T1" size="20"></td> <td width="50%"></td> </tr> <tr> <td width="50%"><input type="text" name="T1" size="20"></td> <td width="50%"></td> </tr> </table> I want the font color in the div to change color onclick and change back when clicked again. Tjis works only in IE but other browsers like FF and safari it changes color on click but does not change color back. I need it to work across. Please advise! <div onclick="if(this.style.color=='#666666') this.style.color='#005dab'; else this.style.color='#666666';" class="question">Your question goes here..</div> I am trying to figure out how to change certain text's font color, in the text area. I have been looking everywhere, but I haven't found a solution. Any help would be great, thanks, mazzzzz Hi sorry if this is a very simple question but how do I change the font color for certain elements of this javascript code that the client sees on their brower? This is a count down script and I have made the code red that I am trying to change - any idea how to do this? Thanks v much!!!! <script type="text/javascript"> var today=new Date() //Enter the occasion's MONTH (1-12) and DAY (1-31): var theoccasion=new Date(today.getFullYear(), 03, 21) //Customize text to show before and on occasion. Follow grammer below: var beforeOccasionText="until this event" var onOccasiontext="Event is Today!" var monthtext=new Array("Jan","Feb","Mar","April","May","June","July","Aug","Sep","Oct","Nov","Dec") theoccasion.setMonth(theoccasion.getMonth()-1) //change to 0-11 month format var showdate="("+monthtext[theoccasion.getMonth()]+" "+theoccasion.getDate()+")" //show date of occasion var one_day=1000*60*60*24 var calculatediff="" calculatediff=Math.ceil((theoccasion.getTime()-today.getTime())/(one_day)) if (calculatediff<0){ //if bday already passed var nextyeartoday=new Date() nextyeartoday.setFullYear(today.getFullYear()+1) calculatediff=Math.ceil((nextyeartoday.getTime()-today.getTime())/(one_day)+calculatediff) } //Display message accordingly var pluraldayornot=(calculatediff==1)? "day" : "days" if (calculatediff>0) document.write("<b>"+calculatediff+" "+pluraldayornot+" "+beforeOccasionText+" "+showdate+"</b>") else if (calculatediff==0) document.write("<b>"+onOccasiontext+" "+showdate+"!</b>") </script> Hello all, Can anyone help me with a script for changing font color of a number within a table when there is a match? Table A contains numbers and table B contains numbers. When table B numbers matches some of the numbers in table A, the numbers in table A need to change color. I hope you understand what I mean. I'm using javascript to change the color of certain words in an html document. Right now it uses <font> to make the change. I would like to use a CSS class named "alert" from an external style sheet to make the change. I've tried multiple things but no luck (className="alert", setClassName="alert" ) What is the correct way to replace the font part with a CSS class? Here is the working script: Code: <script type = "text/javascript"> window.onload = function (){ var text = document.getElementsByTagName('body')[0].innerHTML; text = text.replace(/disabled/gi, "<font color=red>Disabled</font>" ); text = text.replace(/\blocked/gi, "<font color=red>Locked</font>" ); document.getElementsByTagName('body')[0].innerHTML = text; } </script> I am building an online survey using a survey creation tool which allows me to incorporate javascript for additional functionality. However, I am new to javascript so would appreciate any help that you could provide me with. I have question types like agreement scales, where the respondent sees a list of statements and has to rate each one by clicking on a radio button. The source code of the matrix table looks like this: Code: <thead><tr class="Answers"> <th class='c1 BorderColor' width="25%" class='c1'> </th> <th class='c2 BorderColor' class='c2 yAxisBorder' > </th> <th class='c3 BorderColor' class='c3 yAxisBorder' > </th> <th width="25%" class='Selection BorderColor c4 ' id='header~QID19~1~4' > <label>Disagree</label> </th> <th width="25%" class='Selection BorderColor c5 ' id='header~QID19~2~5' > <label>Neither agree nor disagree</label> </th> <th width="25%" class='Selection BorderColor c6 last ' id='header~QID19~3~6' > <label>Agree</label> </th> </tr></thead><tr class='ChoiceRow '><th class='c1' id='header~QID19~1'><span class='LabelWrapper'><label for='QR~QID19~1'>Statement 1</label></span> </th><td class='c2 BorderColor' class='c2 yAxisBorder' headers='header~QID19~1' > </td><td class='c3 BorderColor' class='c3 yAxisBorder' headers='header~QID19~1' > </td><td class='c4 ' headers='header~QID19~1~4 header~QID19~1'><input type='radio' name='QR~QID19~1' value='QR~QID19~1~1' ></td><td class='c5 ' headers='header~QID19~2~5 header~QID19~1'><input type='radio' name='QR~QID19~1' value='QR~QID19~1~2' ></td><td class='c6 last ' headers='header~QID19~3~6 header~QID19~1'><input type='radio' name='QR~QID19~1' value='QR~QID19~1~3' ></td></tr><tr class='ChoiceRow ReadableAlt '><th class='c1' id='header~QID19~2'><span class='LabelWrapper'><label for='QR~QID19~2'>Statement 2</label></span> </th><td class='c2 BorderColor' class='c2 yAxisBorder' headers='header~QID19~2' > </td><td class='c3 BorderColor' class='c3 yAxisBorder' headers='header~QID19~2' > </td><td class='c4 ' headers='header~QID19~1~4 header~QID19~2'><input type='radio' name='QR~QID19~2' value='QR~QID19~2~1' ></td><td class='c5 ' headers='header~QID19~2~5 header~QID19~2'><input type='radio' name='QR~QID19~2' value='QR~QID19~2~2' ></td><td class='c6 last ' headers='header~QID19~3~6 header~QID19~2'><input type='radio' name='QR~QID19~2' value='QR~QID19~2~3' ></td></tr><tr class='ChoiceRow bottom '><th class='c1' id='header~QID19~3'><span class='LabelWrapper'><label for='QR~QID19~3'>Statement 3</label></span> </th><td class='c2 BorderColor' class='c2 yAxisBorder' headers='header~QID19~3' > </td><td class='c3 BorderColor' class='c3 yAxisBorder' headers='header~QID19~3' > </td><td class='c4 ' headers='header~QID19~1~4 header~QID19~3'><input type='radio' name='QR~QID19~3' value='QR~QID19~3~1' ></td><td class='c5 ' headers='header~QID19~2~5 header~QID19~3'><input type='radio' name='QR~QID19~3' value='QR~QID19~3~2' ></td><td class='c6 last ' headers='header~QID19~3~6 header~QID19~3'><input type='radio' name='QR~QID19~3' value='QR~QID19~3~3' ></td></tr><input type=hidden name='Transformation~QID19~1' value='YToxOntzOjEwOiJRUn5RSUQxOX4xIjtzOjE2OiJ7dmFsdWV9PVNlbGVjdGVkIjt9' id=''><input type=hidden name='Transformation~QID19~2' value='YToxOntzOjEwOiJRUn5RSUQxOX4yIjtzOjE2OiJ7dmFsdWV9PVNlbGVjdGVkIjt9' id=''><input type=hidden name='Transformation~QID19~3' value='YToxOntzOjEwOiJRUn5RSUQxOX4zIjtzOjE2OiJ7dmFsdWV9PVNlbGVjdGVkIjt9' id=''></table></div> I don't have any control over the HTML as this is generated by the survey tool. However, the survey tool has a "JavaScript Editor" for each question, where I can put in javascript functions, and it executes them when the page loads. What I want to do is to have the label for each row (i.e for each statement) to change color when a corresponding radio button has been selected. This way, it is easier for respondents to see which rows they have answered. I used the following JS code: Code: var radioname = []; var radiolist = []; var labelspans = []; var labels = []; var radios = []; var count; var spans = document.getElementsByTagName('span'); function getLabels() { for (x=0; x<spans.length; x++) { if (spans[x].className == "LabelWrapper") { labelspans.push(spans[x]); } } for (y=0; y<labelspans.length; y++) { labels.push(labelspans[y].firstChild); radioname.push(labelspans[y].firstChild.htmlFor); } } function getRadios() { //will put all radio groups into the "radiolist" array for (z=0; z<radioname.length; z++) { radiolist.push(document.getElementsByName(radioname[z])); //will add Event Listener to each radio button, and add each one to the "radios" array for (i=0; i<radiolist[z].length; i++) { chkradio = radiolist[z][i]; chkradio.setAttribute("count",Number(z)); chkradio.addEventListener("click", function(){changeLabel()}, false); radios.push(chkradio); } } } function changeLabel() //loops through all the radios to check if they are selected, and changes label color accordingly { for (w=0; w<radios.length; w++) { if (radios[w].checked) { a = radios[w].getAttribute("count"); labels[a].innerHTML = labels[a].innerHTML.fontcolor("green"); } } } getLabels(); getRadios(); This code works as intended; however, as you can see, it loops through all the radio buttons when one is clicked. Is there a way to accomplish this without looping through all the radios, and thus make the script run faster? Also, I have read that the addEventListener function does not work for older versions of IE. Is there a simpler alternative? Why fail? --> <span onclick="document.bgColor = 'grey';">Grey</span> <span onclick="document.bgColor = 'grey';">Grey</span> does not change the page grey on this page: u s e r s (dot) r c n (dot) c o m / r o b e r t (dot) a c k e r t / g r e y . h t m any ideas why? I think something is blocking it. Hi! New to JS... have been trying to rework this to call additional, independent sets of colors to cycle through (so it would loop thru a set of grays, a set of primary colors, etc). I would use perhaps a different function name in the HTML to call different sets of colors. If this is more complex than I think it is, I think 3 sets would be plenty. Would be hugely grateful for any help, thanks so much in advance. (demo link of script in current state at bottom) Code: <html><head><title></title> <script language=javascript> colors = ["#cacdca", "#b2b4b2", "#969896", "#7d7f7d", "#ffff00"]; cRGB = []; function toRGB(color){ var rgb = "rgb(" + parseInt(color.substring(1,3), 16) + ", " + parseInt(color.substring(3,5), 16) + ", " + parseInt(color.substring(5,7), 16) + ")"; return rgb; } for(var i=0; i<colors.length; i++){ cRGB[i] = toRGB(colors[i]); } function changeColor(target){ var swapper = navigator.appVersion.indexOf("MSIE")!=-1 ? toRGB(document.getElementById(target).style.backgroundColor) : document.getElementById(target).style.backgroundColor; var set = false; var xx; for(var i=0; i<cRGB.length; i++){ if(swapper == cRGB[i]){ if(((i+1)) >= cRGB.length){ xx = 0; }else{ xx = i+1; } document.getElementById(target).style.backgroundColor = colors[xx]; document.getElementById(target).style.backgroundImage.show; set = true; i=cRGB.length; } } set ? null : document.getElementById(target).style.backgroundColor = colors[1]; } </SCRIPT> </head> <body bgcolor="#333333"> <div> <div id="a1" onmouseover=changeColor(this.id); style="left: 120px; background-image: url(background1.png); width: 180px; background-repeat: no-repeat; position: relative; height: 80px; background-color: none"></div> <div id=a2 onmouseover=changeColor(this.id); style="left: 120px; background-image: url(background2.gif); width: 180px; background-repeat: no-repeat; position: relative; height: 80px; background-color: #666633"></div> <div id=a3 onmouseover=changeColor(this.id); style="left: 120px; background-image: url(background3.png); width: 180px; background-repeat: no-repeat; position: relative; height: 80px; background-color: #666633"></div></div> </body> </html> Demo: http://theclutch.com/rollover_color_..._bgndimage.htm Hi, I'm faced with a problem trying to set background color under IE7. I have the following Javascript: Code: function showLayer793BKColor(id) { var txtObj = document.all(id); if (txtObj.style.display == 'none') { txtObj.style.display = '' txtObj.style.backgroundColor = 'grey'; } } function hideLayer793BKColor(id) { var txtObj = document.all(id); if ( txtObj.style.backgroundColor == 'grey' ) txtObj.style.display = 'none'; } These functions are used to show or hide div blocks. These blocks are, for example, specified in the following way: Code: <div id="l_gct5tekst" style="display:none"> <b>GCT 5. Eerste verkenning problematiek</b> and, for example, Code: <div id="l_Keuze" style="display:none"> <br/> <b>GCT 5</b> <br/> </div> The whole configuration works smoothly when using IE8. However, when using IE7 I get an error msg like "Invalid value for property". When I use the Color propert iso the BackgroundColor property I get no error anymore but of course I don't have a background color anymore then. In what way can I specify the use of a background color under IE7 ? Or is just not possible in one way or the other. Furthermore, what more differences between JS under IE7 and IE8 do I have to take into account ? Do I also have to rewrite my div block in some way (using some attribs ?) to cope with IE7 ? Thanks in advance, Diederick van Elst Hi folks. I'm working on a calculator and need to use the 'onchange' function. Basically, the user selects the year (id=taxYear) and once the year is select (default is 2008) this year will appear in 2 different lines of the page under 2 seperate ID's(ageYear & totalYear). I've looked at a few example of the function but I'm still not sure how to approach it. At the moment the year changes once I hit the 'calculate' button but the onChange would obviously offer a better alternative with the date changing once 'taxYear' is changed. here is the script; Code: //check the year var taxYear = document.getElementById('taxYear').options[document.getElementById('taxYear').selectedIndex].value; document.getElementById('ageYear').innerHTML = taxYear; document.getElementById('totalYear').innerHTML = taxYear; Here is the jsp; Code: <tr> <td align="left" width="203" colspan=""><p> Your Tax Year: </p></td> <td align="left" > <s:select name="taxYear" id="taxYear" list="#{'2008':'2008', '2009':'2009'}" theme="simple" />* </td> </tr> <tr> <td align="left" width="203"><p> Age at December 31st <span id="ageYear"></span></p></td> <td align="left" colspan="1"> <s:textfield name="age" id="age" theme="simple" cssClass="text" value="30" /> * <div id="errorage" class="warningmessage" style="display:none"> Please enter your Age to proceed. </div> </td> </tr> <tr> <td colspan="2" class="basicboldtext"> <br/> The total pension contribution you can make for year <span id="totalYear"></span> is €<span id="totalTax2"></span> <br/> </td> </tr> Appreciate any help on this! Code: <input type = "text" style ='display:none;' onchange="display_data_from_server(this.value)"/> Value inside that input is cahanged from js. Is there any reason that onchange would not happen ? i mean, it does not. I have a onChange value
Code: var people = [ ["Timothy Conner", "1999-Present", "Age: 12", "Male", ""], ["Andrew Conner", "1992-Present", "Age: 19", "Male", ""] ]; var how = "Brothers"; function find() { if(document.getElementById("name").value == people [0] [0]) { document.getElementById("desc").value = people [0] [1] + " " + people [0] [2] + " " + people [0] [3]; } if(document.getElementById("name").value == people [1] [0]) { document.getElementById("desc").value = people [1] [1] + " " + people [1] [2] + " " + people [1] [3]; } document.getElementById("relateb").value = document.getElementById("name").value; } Code: Name: <input type="text" id="name" value="" onChange="find()"/> So for it to proses a name you must click out of a box is ther a way to make it instead of when you click out of it, it would immidiatly change? Hello all, I have a translation script that I want to modify to use select boxes instead of divs, but I have a little problem with what I have. Bascially, the user selects an option and it changes the text in between the ' ' (VALUE) to whatever the value of the option is: Code: <select onchange="updateLangTo('VALUE')"> <option value="en">English</option> <option value="ar">Arabic</option> </select> So how would JavaScript be able to accomplish this? Evening all. I have a little bit of code, thus: Code: var data = document.createElement("td"); box = document.createElement("input"); box.id = headercategories[i]; box.type = text; box.value = "Ten"; box.onChange = alter("11"); data.appendChild(box); in which I insert a text input box into a table data element. When the value of the input is changed, I would like to call the function alter(). However, what's happening in practice is that the function alter is getting called straight away, without waiting for any changes. Is there any way I can stop this? It doesn't seem to happen if you actually write the onchange bit into the HTML by hand rather than doing it dynamically. Thanks, Chris I'm trying to figure out how to call multiple functions within the same onchange attribute, associated in the same select object. I have a drop-down menu in which I can select MN, WI, and Other. I've worked it now so that when I select MN, a new drop-down menu appears in which I can select one of MN's Counties. I want to be able to do the same with WI and Other, but my code is only calling MN. Here it is: Code: <html> <head> <script="text/javascript"> function showMN(select) { select.form.MN.value=""; // reset the text box value document.getElementById("MNBox").style.display = select.value == "MN" ? "inline" : "none"; } function showWI(select) { select.form.WI.value=""; // reset the text box value document.getElementById("WIBox").style.display = select.value == "WI" ? "inline" : "none"; } function showOther(select) { select.form.otherState.value = ""; // reset the text box value document.getElementById("otherBox").style.display = select.value == "Other" ? "inline" : "none"; </script> </head> <body> <select name="state" onchange="showMN(this);showWI(this);showOther(this)"> <option value="" selected="selected">Choose...</option> <option value="MN">MN</option> <option value="WI">WI</option> <option value="Other">Other</option> </select><font color="red">*</font> <span id="MNBox" style="display:none"> County: <select name="MN"> <option value="" selected="selected">Choose...</option> <option value="List of MN Counties">List of MN Counties</option> </select><font color="red">*</font> <span id="WIBox" style="display:none"> County: <select name="WI"> <option value="" selected="selected">Choose...</option> <option value="List of WI Counties">List of WI Counties</option> </select><font color="red">*</font> <span id="otherBox" style="display:none"> <input type="text" name="otherState" placeholder="Enter state here"/><font color="red">*</font> <input type="text" name="otherCounty" placeholder="Enter County here"</span> </body> </html> Am I even close? I have an onchange event JS working fine in IE, but not in FF. It's intended to reset an input field to zero when an adjacent drop-down menu value is changed. I've spent a half-hour looking for answers, and nothing has worked. Decided to post here in the hope there is a quick solution I've overlooked. TIA. Code: function resetInput() { y = document.getElementById("baseInput"); y.setAttribute("value","0"); } And the HTML... Code: <select id="baseMethod" onchange="resetInput()"> <option value="baseGrowth" selected="selected">Annual Growth Rate (%)</option> <option value="baseTarget">Target Year Projection</option> </select> <input type="text" name="baseInput" id="baseInput" value="0" size="14" maxlength="14" /><br /> How can i change this code to do not duplicate the boxes when one option is selected in the same box as before? http://www.plpgolfandturf.com.au/rr/rrboxes_test.php Code: <script type="text/javascript"> function SetHTML2(type) { //document.getElementById("1").style.display = "none" //document.getElementById("2").style.display = "none" //document.getElementById("3").style.display = "none" //document.getElementById("4").style.display = "none" //document.getElementById("1.1").style.display = "none" //document.getElementById("1.2").style.display = "none" //document.getElementById("1.3").style.display = "none" //document.getElementById("1.4").style.display = "none" document.getElementById("2.1").style.display = "none" document.getElementById("2.2").style.display = "none" document.getElementById("2.3").style.display = "none" document.getElementById("2.4").style.display = "none" document.getElementById("3.1").style.display = "none" document.getElementById("3.2").style.display = "none" document.getElementById("3.3").style.display = "none" document.getElementById("3.4").style.display = "none" document.getElementById("4.1").style.display = "none" document.getElementById("4.2").style.display = "none" document.getElementById("4.3").style.display = "none" document.getElementById("4.4").style.display = "none" document.getElementById("1.1.1").style.display = "none" document.getElementById("1.1.2").style.display = "none" document.getElementById("1.1.3").style.display = "none" document.getElementById("1.1.4").style.display = "none" document.getElementById("1.2.1").style.display = "none" document.getElementById("1.2.2").style.display = "none" document.getElementById("1.2.3").style.display = "none" document.getElementById("1.2.4").style.display = "none" document.getElementById("1.3.1").style.display = "none" document.getElementById("1.3.2").style.display = "none" document.getElementById("1.3.3").style.display = "none" document.getElementById("1.3.4").style.display = "none" document.getElementById("1.4.1").style.display = "none" document.getElementById("1.4.2").style.display = "none" document.getElementById("1.4.3").style.display = "none" document.getElementById("1.4.4").style.display = "none" document.getElementById(type).style.display = "" } </script> <!--Display box --> <font face="Verdana, Geneva, sans-serif" size="4" color="#FF0000"><br /> Search Parts</font><br /> <br /> <select onchange="SetHTML2(this.value)"> <option selected="selected">Choose your option</option> <option value="1">Beck</option> <option value="2">BobCat</option> <option value="3">Briggs</option> <option value="4">Yazoo</option> </select> <span id="1" style="display:none" ><br /><select onchange="SetHTML2(this.value)"> <option selected="selected">Choose your option</option> <option value="1.1">Beck 1</option> <option value="1.2">Beck 2</option> <option value="1.3">Beck 3</option> <option value="1.4">Beck 4</option> </select></span> <span id="2" style="display:none"><br /><select onchange="SetHTML2(this.value)"> <option selected="selected">Choose your option</option> <option value="2.1">BobCat 1</option> <option value="2.2">BobCat 2</option> <option value="2.3">BobCat 3</option> <option value="2.4">BobCat 4</option> </select></span> <span id="3" style="display:none"><br /><select onchange="SetHTML2(this.value)"> <option selected="selected">Choose your option</option> <option value="3.1">Briggs 1</option> <option value="3.2">Briggs 2</option> <option value="3.3">Briggs 3</option> <option value="3.4">Briggs 4</option> </select></span> <span id="4" style="display:none"><br /><select onchange="SetHTML2(this.value)"> <option selected="selected">Choose your option</option> <option value="4.1">Yazoo 1</option> <option value="4.2">Yazoo 2</option> <option value="4.3">Yazoo 3</option> <option value="4.4">Yazoo 4</option> </select></span> <span id="1.1" style="display:none"><br /><select onchange="SetHTML2(this.value)"> <option selected="selected">Choose your option</option> <option value="1.1.1">Beck 1.1</option> <option value="1.1.2">Beck 1.2</option> <option value="1.1.3">Beck 1.3</option> <option value="1.1.4">Beck 1.4</option> </select></span> <span id="1.2" style="display:none"><br /><select onchange="SetHTML2(this.value)"> <option selected="selected">Choose your option</option> <option value="1.2.1">Beck 2.1</option> <option value="1.2.2">Beck 2.2</option> <option value="1.2.3">Beck 2.3</option> <option value="1.2.4">Beck 2.4</option> </select></span> <span id="1.3" style="display:none"><br /><select onchange="SetHTML2(this.value)"> <option selected="selected">Choose your option</option> <option value="1.3.1">Beck 3.1</option> <option value="1.3.2">Beck 3.2</option> <option value="1.3.3">Beck 3.3</option> <option value="1.3.4">Beck 3.4</option> </select></span> <span id="1.4" style="display:none"><br /><select onchange="SetHTML2(this.value)"> <option selected="selected">Choose your option</option> <option value="1.4.1">Beck 4.1</option> <option value="1.4.2">Beck 4.2</option> <option value="1.4.3">Beck 4.3</option> <option value="1.4.4">Beck 4.4</option> </select></span> <span id="2.1" style="display:none"> text </span> <span id="2.2" style="display:none"> text </span> <span id="2.3" style="display:none"> text </span> <span id="2.4" style="display:none"> text </span> <span id="3.1" style="display:none"> text </span> <span id="3.2" style="display:none"> text </span> <span id="3.3" style="display:none"> text </span> <span id="3.4" style="display:none"> text </span> <span id="4.1" style="display:none"> text </span> <span id="4.2" style="display:none"> text </span> <span id="4.3" style="display:none"> text </span> <span id="4.4" style="display:none"> text </span> <span id="1.1.1" style="display:none"> text </span> <span id="1.1.2" style="display:none"> text </span> <span id="1.1.3" style="display:none"> text </span> <span id="1.1.4" style="display:none"> text </span> <span id="1.2.1" style="display:none"> text </span> <span id="1.2.2" style="display:none"> text </span> <span id="1.2.3" style="display:none"> text </span> <span id="1.2.4" style="display:none"> text </span> <span id="1.3.1" style="display:none"> text </span> <span id="1.3.2" style="display:none"> text </span> <span id="1.3.3" style="display:none"> text </span> <span id="1.3.4" style="display:none"> text </span> <span id="1.4.1" style="display:none"> text </span> <span id="1.4.2" style="display:none"> text </span> <span id="1.4.3" style="display:none"> text </span> <span id="1.4.4" style="display:none"> text </span> <br /> <br /><a href="http://www.plpgolfandturf.com.au/rr/rrboxes_test.php"><img src="http://www.plpgolfandturf.com.au/rr/bt2.png" border="0" /></a> All, If I have the following code: Code: <form name="datatoshow" id="datatoshow"> Want to learn more about the sie? Use the drop down menu:<br /> <select name="thingtoshow" onchange="javascript:showvalues(this.datatoshow);"> <option value="home">Home</option> <option value="help">Help!</option> <option value="refer">Refer a Friend</option> </select> </form> This doesn't do anything on the onchange. The code it's supposed to send to is: Code: function showvalues(selObj){ alert("it gets here"); var valuetoshow; valuetoshow = "valuetoshow="+selObj.options[selObj.selectedIndex].value; alert(valuetoshow); makePOSTRequest('showhome.php', valuetoshow); } This is in external js file. For some reason it doesn't send it and the alert never gets triggered. Thanks. i keep getting the following error: - there is no attribute "onChange" Code: <select name="type" id="type" onChange="gettype('type');"> <option selected="selected">--Car type--</option> <option value="1">Bmw</option> <option value="2">Merc Blinds</option> <option value="3">Ford</option> <option value="4">Saab</option> </select> |