JavaScript - Javascript Check/unckeck Based On Value
I have a list of checkboxes, "group1","group2",etc. That have values of comma separated strings. such as 1,2,3,4,5. when a group is checked, I want all "individual" checkboxes to check if their value is found in that group.
Group1 value="1,2,3" Group2 value="4,5,6" Group3 value="7,8,9" itemarray[] value="1" itemarray[] value="2" itemarray[] value="3" itemarray[] value="4" itemarray[] value="5" itemarray[] value="6" itemarray[] value="7" itemarray[] value="8" Found a thread that partially addressed this issue, but not for the comma separated string. See http://www.codingforums.com/showthread.php?t=115705 I know php, but have a hard time with javascript....I appreciate the help Thanks in Advance!! Similar TutorialsHello, I have never used javascript before, so this might be a very basic question. I have a script on my blog which places a stumbleupon button on the page. This is the code that calls the script: Code: <script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script> Today I went to my blog and it was taking a long time to load, it turns out because stumbleupons site is down so the script can't be accessed. A whole lot of other stuff on the page just doesn't load until it times out though, so it takes like 3 minutes for the page to load. What I want to know is can I test if the script is reachable and only call it if it is, so that if there is a 403 or 404 error it just won't even try to load it and continue loading the rest of the page?? Any help is greatly apprectiated! Thanks. I got a page that gets created dynamically. sometimes I get images output with NO source like this Code: <img src="" id="md_1"> <img src="" id="md_2"> etc. etc. the image id are created dynamically also and always start with "0" and count up in order. I need to check everyone of those image links and when they are blank like above change the src to a default image. I have spent 8 hours on this one simple function and cannot seem to get it to work. I will call the function at the end of the page. I have NO knowledge of Javascript at all but borrowed and attempted to adapt one I found. It is a Firefox bookmarklet designed to highlight in different colours both certain words or the ending "ing" on a word in a text document that has been saved as html. Basically it is a device for helping novel writers rid their manuscripts of redundant words and overuse of the 'ing" words. In works in part but doesn't pick up all "ing" endings. For someone who know what their doing I imagine it would take more than a few minutes to read and correct. Many thanks to anyone who can help. Here is the Javscript: javascript:var%20verbsRE=/(\b)(about|actually|almost|already|appear|approximately|basically|close to|even|eventually|exactly|finally|here|just|kind of|nearly|now|practically|really|seem|simply|somehow|somewhat|sort of|suddenly|then|there|truly|utterly|while|as|appear|felt|gaped|gawked|gazed|glanced|hear|heard|knew |looked|noticed|observed|peered|peeped|regarded|saw|scanned|see|seeing|seemed|smelled|stared|studied |surveyed|tasted|viewed|watched)(\b)/gi;var%20ingRE=/(\w)(ing)(\b)/gim;function%20HL(node){if(node.hasChildNodes){var%20hi_cn;for(hi_cn=0;hi_cn<node.childNodes.length; hi_cn++){HL(node.childNodes[hi_cn]);}}if(node.nodeType==3){var%20tempNodeVal=node.nodeValue;if(verbsRE.test(tempNodeVal)){tempNodeVal= tempNodeVal.replace(verbsRE,"$1<span%20style='background-color:yellow;color:black;border:1px%20solid%20black;'>$2</span>$3");tempNodeVal=tempNodeVal.replace(ingRE,"$1<span%20style='background-color:#0ff;color:black;border:1px%20solid%20black;'>$2</span>$3");newNode=document.createElement('span');newNode.innerHTML=tempNodeVal;pn=node.parentNode;pn .replaceChild(newNode,node);}}}HL(window.document.getElementsByTagName('body')[0]); I am looking for a bit of Javascript that can hide a sentence in my website if the URL contains certain words, most specifically INFO or CERT. Any idea how I can do this? Your help is appreciated. Thank You, Kevin Brown string check in javascript do suggest me something ....... if you have any two words like , "me" and "you". hi, can anyone help me with spell check code.. i want to implement spell check inside a text-area and i want an inline code, i cannot call .js files .. if anyone can give me a solution for this i'd be very grateful.. i did find a code but im not sure how to use it in my html page can anyone help me with a javascript spellchecker ...... i have a text-area and i want a javascript code tht can check spellings when i write , like we see in gmail, or similar ... Okay this is part of an ajax driven shopping cart. the problem is i need to check for 2 different selections that would be for the same payment method. here is the code as it sits now Code: if ( typeof document.checkout.payment[3] != 'undefined'){ if (document.checkout.payment[3].checked == true) { if (document.checkout.cc_owner.value == "" ) {errMsg += 'Please complete or verify the information in the Name on the card field in the \'Payment Method\' section.' + "\n"; } else { if(document.checkout.cc_number.value == "") { errMsg += 'Please complete or verify the information in the Card Number field in the \'Payment Method\' section.' + "\n"; } else { if(document.checkout.cc_cvv2.value == "") { errMsg += 'Please complete or verify the information in the CVC/CVV code field in the \'Payment Method\' section.' + "\n"; } else { if(document.checkout.cc_phone.value == "") { errMsg += 'Please complete or verify the information in the Card company\'s telephone number field in the \'Payment Method\' section.' + "\n"; } else { myCardNo = document.checkout.cc_number.value; myCardType = document.checkout.surcharge.value; if (!checkCreditCard (myCardNo,myCardType)) { errMsg += 'Please complete or verify the information in the Card Number field in the \'Payment Method\' section.' + "\n"; } } } } } }} } the problem is in the first 2 lines i basically need it to do this, but when i do it like how i need it to be it will not work. it looks like i am doing it incorrectly maybe. firebug gives me an undefined error on the first checked value because it does not exist when i need it to check for the 2 value. Code: if ( typeof document.checkout.payment[3] != 'undefined' || typeof document.checkout.payment[2] != 'undefined'){ if (document.checkout.payment[3].checked == true || document.checkout.payment[2].checked == true) { if (document.checkout.cc_owner.value == "" ) {errMsg += 'Please complete or verify the information in the Name on the card field in the \'Payment Method\' section.' + "\n"; } else { if(document.checkout.cc_number.value == "") { errMsg += 'Please complete or verify the information in the Card Number field in the \'Payment Method\' section.' + "\n"; } else { if(document.checkout.cc_cvv2.value == "") { errMsg += 'Please complete or verify the information in the CVC/CVV code field in the \'Payment Method\' section.' + "\n"; } else { if(document.checkout.cc_phone.value == "") { errMsg += 'Please complete or verify the information in the Card company\'s telephone number field in the \'Payment Method\' section.' + "\n"; } else { myCardNo = document.checkout.cc_number.value; myCardType = document.checkout.surcharge.value; if (!checkCreditCard (myCardNo,myCardType)) { errMsg += 'Please complete or verify the information in the Card Number field in the \'Payment Method\' section.' + "\n"; } } } } } }} } hi all, am doing a check on my fields, so that they only contain certain characters and numbers. i have this. var validEntry = /^[a-zA-Z0-9@$&"]+/; but this also captures a space in between words as an error. can somebody please tell me on how to avoid this. thanks. How do I get the following phrases to output along with their corresponding scores for my algorithm below? Here are the phrases I'd like to see along side the outputted score Scores: 90-100 --- Legendary</td></tr> 80-90 --- All-Star Performance 70-80 --- D1 College Level 60-70 --- Very Good 50-60 --- Great Effort 40-50 --- Almost there! 30-40 --- Nice try 20-30 --- Try harder 10-20< --- Don't give up. 0-10 --- A ways to go... Below 0 --- Poor Performance Above 100 --- Yeah Right! And here's my formula that asks for 4 values then spits out a number. Code: <br> <center><img src="http://i40.photobucket.com/albums/e250/jonsan32/easy.png"></center> <br><script language="javascript"> function addNumbers() { var val1 = parseInt(document.getElementById("value1").value); var val2 = parseInt(document.getElementById("value2").value); var val3 = parseInt(document.getElementById("value3").value); var val4 = parseInt(document.getElementById("value4").value); var ansD = document.getElementById("answer"); ansD.value = Math.round(((100-(25-val1)*5)/4 + (100-6.66667*(23-val2))/4 + (100-7.51*(15-val3))/4 + (100-4*(32-(val4)))/4)*100)/100 ; } </SCRIPT> <table width=700><tr><td>XDrill = <input type="text" id="value1" name="value1" value="" SIZE=2 /> <br><br></td><td> 2ptrs = <input type="text" id="value2" name="value2" value="" SIZE=2/><br><br> </td><td> 3ptrs = <input type="text" id="value3" name="value3" value="" SIZE=2/><br><br> </td><td> Nash = <input type="text" id="value4" name="value4" value="" SIZE=2/><br><br></td><td> <input type="button" name="Submit" value="Click here" onclick="javascript:addNumbers()"/><br><br> </td></tr><tr><td colspan=2 bgcolor="#000000"><center> <font color="#ffffff">Your Score = <input type="text" id="answer" name="answer" value=""/ SIZE=4> </center></td></tr></table> <br><br> I'm new to coding and recently undertook the position as my school district's webmaster. We use a six day schedule where the days are labeled A-F. I want to be able to display the Today is...A graphic based on the date. I tried some scripts from other forums, but it does not appear to be working. Any suggestions? TY <code> <script language="javascript"> <!-- var picture=''; mytime=new Date(); mymonth=mytime.getMonth()+1; mydate=mytime.getDate(); if (mymonth==9 && mydate==13){picture="<img src=/images/d.gif>"; } if (mymonth==9 && mydate==14){picture="<img src=/images/e.gif width=150 height=150 alt=E>"; } if (mymonth==9 && mydate==15){picture="<img src=/images/f.gif width=150 height=150 alt=F>"; } if (mymonth==9 && mydate==16){picture="<img src=/images/A.gif width=150 height=150 alt=A>"; } if (mymonth==9 && mydate==19){picture="<img src=/images/B.gif width=150 height=150 alt=B>"; } if (mymonth==9 && mydate==20){picture="<img src=/images/c.gif width=150 height=150 alt=C>"; } //--> </script></code> Inside of here if you save as a .html and open it it will pull up the game a series of 5 boxes and 5 answers underneath, Currently those 5 answers correctly correlate with each box so you know what they are considering you don't have the .jpgs to display them. The one in bold is the "question" when you click on the one that correlates with the bold it should tell you Correct! 100. 100 being your score and if you get it wrong it will say sorry! and then take your score down to a 50 since you got 1 out of 2 wrong. The problem is when you get it wrong it also immediatly says Congrats! after you get it wrong So it will prompt a Sorry! alert and a Congrats! alert on the wrong answer. The second problem is after the user gets it right or wrong, I need it to re random the list of answers and images. Whilst keeping the score intact for up to 20 questions. Please help! Code: <body> <script type="text/javascript"> var counter = 0; var correct = 0; function show_alert0() { {counter++;} if (randomname0 != final) {alert("Sorry." + (( correct / counter ) * 100 ));} else {correct++;} {alert("Congrats!" + (( correct / counter ) * 100 ));} } function show_alert1() { {counter++;} if (randomname1 != final) {alert("Sorry." + (( correct / counter ) * 100 ));} else {correct++;} {alert("Congrats!" + (( correct / counter ) * 100 ));} } function show_alert2() { {counter++;} if (randomname2 != final) {alert("Sorry." + (( correct / counter ) * 100 ));} else {correct++;} {alert("Congrats!" + (( correct / counter ) * 100 ));} } function show_alert3() { {counter++;} if (randomname3 != final) {alert("Sorry." + (( correct / counter ) * 100 ));} else {correct++;} {alert("Congrats!" + (( correct / counter ) * 100 ));} } function show_alert4() { {counter++;} if (randomname4 != final) {alert("Sorry." + (( correct / counter ) * 100 ));} else {correct++;} {alert("Congrats!" + (( correct / counter ) * 100 ));} } </script> <script type="text/javascript"> var randomnumber0=Math.floor(Math.random()*66) var randomnumber1=Math.floor(Math.random()*66) var randomnumber2=Math.floor(Math.random()*66) var randomnumber3=Math.floor(Math.random()*66) var randomnumber4=Math.floor(Math.random()*66) while (randomnumber0==randomnumber1 || randomnumber0==randomnumber2 || randomnumber0==randomnumber3 || randomnumber0==randomnumber4) {randomnumber0=Math.floor(Math.random()*66)} while (randomnumber1==randomnumber0 || randomnumber1==randomnumber2 || randomnumber1==randomnumber3 || randomnumber1==randomnumber4) {randomnumber1=Math.floor(Math.random()*66)} while (randomnumber2==randomnumber0 || randomnumber2==randomnumber1 || randomnumber2==randomnumber3 || randomnumber2==randomnumber4) {randomnumber2=Math.floor(Math.random()*66)} while (randomnumber3==randomnumber0 || randomnumber3==randomnumber1 || randomnumber3==randomnumber2 || randomnumber3==randomnumber4) {randomnumber3=Math.floor(Math.random()*66)} while (randomnumber4==randomnumber0 || randomnumber4==randomnumber1 || randomnumber4==randomnumber2 || randomnumber4==randomnumber3) {randomnumber4=Math.floor(Math.random()*66)} document.write('<p style="text-align:center">') document.write('<em>Click on the ribbon that matches the name below.</em><br/><br/>') document.write('<button type="button" height="300" width="300" onclick="show_alert0()"><img src="https://www.intelink.gov/sites/afpaa/Shared%20Documents/rank'+randomnumber0+'.jpg" height="300px" width="200px"></button>') document.write('<button type="button" height="300" width="300" onclick="show_alert1()"><img src="https://www.intelink.gov/sites/afpaa/Shared%20Documents/rank'+randomnumber1+'.jpg" height="300px" width="200px"></button>') document.write('<button type="button" height="300" width="300" onclick="show_alert2()"><img src="https://www.intelink.gov/sites/afpaa/Shared%20Documents/rank'+randomnumber2+'.jpg" height="300px" width="200px"></button>') document.write('<button type="button" height="300" width="300" onclick="show_alert3()"><img src="https://www.intelink.gov/sites/afpaa/Shared%20Documents/rank'+randomnumber3+'.jpg" height="300px" width="200px"></button>') document.write('<button type="button" height="300" width="300" onclick="show_alert4()"><img src="https://www.intelink.gov/sites/afpaa/Shared%20Documents/rank'+randomnumber4+'.jpg" height="300px" width="200px"></button><br/>') document.write('</style>') var name = new Array(); name[0] = "Airman"; name[1] = "Airman 1st Class"; name[2] = "Senior Airman"; name[3] = "Staff Sergeant"; name[4] = "Technical Sergeant "; name[5] = "Master Sergeant"; name[6] = "First Master Sergeant"; name[7] = "Senior Master Sergeant"; name[8] = "First Senior Master Sergeant"; name[9] = "Chief Master Sergeant"; name[10] = "First Chief Master Sergeant"; name[11] = "Command Chief Master Sergeant"; name[12] = "Chief Master Sergeant of the Air Force"; name[13] = "2nd Lieutenant"; name[14] = "1st Lieutenant"; name[15] = "Captain"; name[16] = "Major"; name[17] = "Lieutenant Colonel"; name[18] = "Colonel"; name[19] = "Brigadier General"; name[20] = "Major General"; name[21] = "Lieutenant General"; name[22] = "General"; name[23] = "General of the ..."; name[24] = "Private"; name[25] = "Private 1st Class"; name[26] = "Specialist"; name[27] = "Corporal"; name[28] = "Sergeant"; name[29] = "Staff Sergeant"; name[30] = "Sergeant First Class"; name[31] = "Master Sergeant"; name[32] = "First Sergeant"; name[33] = "Sergeant Major"; name[34] = "Command Sergeant Major"; name[35] = "Sergeant Major of the Army"; name[36] = "Warrant Officer (W01)"; name[37] = "Chief Warrant Officer (CW2) "; name[38] = "Chief Warrant Officer (CW3)"; name[39] = "Chief Warrant Officer (CW4)"; name[40] = "Chief Warrant Officer (CW5)"; name[41] = "Private First Class"; name[42] = "Lance Corporal"; name[43] = "Corporal"; name[44] = "Sergeant"; name[45] = "Staff Sergeant"; name[46] = "First Sergeant"; name[47] = "Sergeant Major"; name[48] = "Master Gunnery Sergeant"; name[49] = "Warrant Officer (W0)"; name[50] = "Chief Warrant Officer (CW02)"; name[51] = "Chief Warrant Officer (CW03)"; name[52] = "Chief Warrant Officer (CW04)"; name[53] = "Chief Warrant Officer (CW05)"; name[54] = "Seaman Apprentice"; name[55] = "Seaman"; name[56] = "Petty Officer Third Class"; name[57] = "Petty Officer Second Class"; name[58] = "Petty Officer First Class"; name[59] = "Chief Petty Officer"; name[60] = "Second Chief Petty Officer"; name[61] = "Master Chief Petty Officer"; name[62] = "Fleet / Command Master Chief Petty Officer"; name[63] = "Master Chief Petty Officer of the Navy"; name[64] = "Chief Warrant Officer (CW02)"; name[65] = "Chief Warrant Officer (CW03)"; name[66] = "Chief Warrant Officer (CW04)"; var randomname0 = name[randomnumber0]; var randomname1 = name[randomnumber1]; var randomname2 = name[randomnumber2]; var randomname3 = name[randomnumber3]; var randomname4 = name[randomnumber4]; document.write(randomname0+'<br/>'+randomname1+'<br/>'+randomname2+'<br/>'+randomname3+'<br/>'+randomname4+'<br/>') var randomname = new Array(5); randomname[0] = name[randomnumber0]; randomname[1] = name[randomnumber1]; randomname[2] = name[randomnumber2]; randomname[3] = name[randomnumber3]; randomname[4] = name[randomnumber4]; var randomnamenum=Math.floor(Math.random()*4); var final=randomname[randomnamenum]; document.write('<br/><br/><pstyle="text-align:center"><strong>'+final+'</strong></style><br>') </script> </body> Hi to every one. I'w created a mini javascript game for my site where you click on red button as fastest as you can for 10 seonds to achieve as best as you can click numbers per second. And the end score is a variable which I send to a function which reads the array that contains ten best scores and write your score in same array if it's among 10 best. Now I want to make somehow to save that array on server so I could read it on page load to show a high score list, but I'm having trouble to write that array in any kind of data on server that I could read it again from same data. I would be very grateful if someone can help me! Hi Guys, i am wondering if there is a way to have an auto Complete form field from a db table data ? thanks I have been researching like crazy, and I can't find any information that seems to fit what I need! I am looking for a solution for the following problem: We have products that have multiple parts that can be colored separately from each other. In other words, if it was a shirt, the sleeves, graphic, front panel, pocket, and back panel could all be a different color. We have a range of color options available that can be up to 50. So, if I made a single image for each combination, we're looking at thousands of images here. How can I use scripts to build a page that can pick all of these options and combine them together in a product image for the customer? Is it even possible? I have tried layering 4 0r 5 images with relative and absolute positioning, and doing an image swap...but that is not something I can see us using on a regular basis. I must be missing something here. We've been looking around at other sites like Victorias Secret and Old Navy, and like their color changes....but theirs seem to only involve the single color layer. Thanks for any advice! Hey, I've tried w3schools, tizag, and google, but haven't found exactly what I need. I need some way of easily figuring out which option in a drop down menu is checked, through the use of javascript, like how you can use document.formname.elementname[i].checked to find out which checkbox/radio button is checked. Anything that would return something that allows me to figure out which option has been chosen. I will need to have a function with 3 if statements, one for each option.
I need to check the whether an external url like http://www.somesite.com exists or not using javascript. I have a ajax method for it, Code: function checkUrl(url) { var xmlhttp=false; if (!xmlhttp && typeof XMLHttpRequest!='undefined') { try { xmlhttp = new XMLHttpRequest(); } catch (e) { xmlhttp=false; } } if (!xmlhttp && window.createRequest) { try { xmlhttp = window.createRequest(); } catch (e) { xmlhttp=false; } } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4) { if (xmlhttp.status==200) { alert("URL Exists!"); } else if (xmlhttp.status==404) { alert("URL doesn't exist!"); } else { alert("Status is "+xmlhttp.status); } } } xmlhttp.open("HEAD", url ,true); xmlhttp.send(); } But is not successful for finding existence of external urls. Any help... Thanks in advance.. Hi all, I am new to CodingForums.com as well as new to javascript. I am currently trying to create a small calculator for a friend which is to do with calculating a dose. The calculator itself works but I am now fine tweaking the text that appears with the calculated values. This is my code: Code: <script type="text/javascript"> function calculate() { var IBW = 1; var IBW2 = 1; var dose2 = 1; var CrCl = 1; var hgtft = document.getElementById("height_feet").value - 0; var hgtinches = document.getElementById("height_inches").value - 0; var weight = document.getElementById("weight").value - 0; var sex = document.getElementById("sex").value; var age = document.getElementById("age").value - 0; var creatinine = document.getElementById("creatinine").value - 0; if (age < 16) { alert("This tool is only for use in adult patients i.e. 16 years or older"); return; //process no further } if (sex == "M") { if (hgtft < 5) { IBW = 50; IBW2 = 50; } else { IBW = 50 + (2.3 * ((hgtft - 5) * 12 + hgtinches)); IBW2 = 50 + (2.3 * ((hgtft - 5) * 12 + hgtinches)); } if (IBW > weight) { IBW = weight } CrCl = ((140 - age) * IBW * 1.23) / creatinine; } else { if (hgtft < 5) { IBW = 45; IBW2 = 45; } else { IBW = 45 + (2.3 * ((hgtft - 5) * 12 + hgtinches)); IBW2 = 45 + (2.3 * ((hgtft - 5) * 12 + hgtinches)); } if (IBW > weight) { IBW = weight } CrCl = ((140 - age) * IBW * 1.04) / creatinine; } var dose = Math.round((5 * IBW) / 40.0) * 40.0 var IBW = Math.round(IBW, 1) var IBW2 = Math.round(IBW2,1) var CrCl = Math.round(CrCl, 0) if (CrCl < 40) { dose2 = "As GFR < 40mL/min Extended Interval Gentamicin is not indicated. Contact microbiology for an alternative agent"; } else { dose2 = dose "mg - Note: This dose has been calculated using a weight of " IBW "kg and rounded to the nearest 40mg to aid administration"; } document.getElementById('IBW2').innerHTML = IBW2 + "kg"; document.getElementById('CrCl').innerHTML = CrCl + "mL/min"; document.getElementById('dose2').innerHTML = dose2; } </script> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <table> <tr> <td>Height</td><td class="style17"><input id='height_feet' value=""/> feet</td><td><input id='height_inches' value=""/> inches</td> </tr> <tr> <td>Weight</td><td class="style17"><input id='weight' value=""/> kg</td> </tr> <tr> <td>Age</td><td class="style17"><input id='age'value=""/> years</td> </tr> <tr> <td>Creatinine</td><td class="style17"><input id='creatinine'/> mmol/L</td> </tr> <tr> <td>Sex</td><td class="style1"><select id='sex'> <option value="M">Male</option><option value="F">Female</option></select></td> </tr> </table><br /> <input type="button" onclick="calculate()" value="Calculate!"/><input id="Reset" type="reset" value="Reset" /> <br /> <br /> <br /> <br /> <table> <tr><td class="style16">Ideal Body Weight: </td><td id='IBW2' /></td></tr> <tr><td class="style16">Calculated GFR: </td><td id='CrCl' /></td></tr> <tr><td class="style16">Calculated Gentamicin Dose: </td><td id='dose2' /></td></tr> </table> What I am trying to do is have the dose displayed as: xxdose mg - Note: This dose has been calculated using a weight of IBWkg and rounded to the nearest 40mg to aid administration but if the CrCl is less than 40 then the dose message should be: As GFR < 40mL/min Extended Interval Gentamicin is not indicated. Contact microbiology for an alternative agent can anyone help me with this please? Hello, I'd like to write some javascript code which will check to see if the contents of a textbox are equal to some value after the user leaves the textbox. they should get a message saying Correct or Incorrect . As an example: Code: <td>-2</td> <td><input name="ans1" type="text" size="3" maxlength="3" /></td> </tr> < The correct answer here would be 5 > <tr> <td>-1</td> <td><input name="ans1" type="text" size="3" maxlength="3" /></td> < The correct answer here would be 4> And, I don't wish to abuse the forum, but as I'm learning javascript and jquery, I'd like to see solutions to both (I learn by example), so I'm posting the same question in the jquery forum with a request for a jquery solution; I hope that this isn't bad form! Thank you..... I have the following page www.crownvalleywinery.com/kiosk/default.html and I would like to add a button or checkbox to check/uncheck all. Note we are already using some javascript for custom checkboxes so it needs to integrate with that. Any help is appreciated. Here is the current javascript... Code: /* CUSTOM FORM ELEMENTS Created by Ryan Fait www.ryanfait.com The only thing you need to change in this file is the following variables: checkboxHeight, radioHeight and selectWidth. Replace the first two numbers with the height of the checkbox and radio button. The actual height of both the checkbox and radio images should be 4 times the height of these two variables. The selectWidth value should be the width of your select list image. You may need to adjust your images a bit if there is a slight vertical movement during the different stages of the button activation. Visit http://ryanfait.com/ for more information. */ var checkboxHeight = "47"; var radioHeight = "25"; var selectWidth = "190"; /* No need to change anything after this */ document.write('<style type="text/css">input.styled { display: none; } select.styled { position: relative; width: ' + selectWidth + 'px; opacity: 0; filter: alpha(opacity=0); z-index: 5; }</style>'); var Custom = { init: function() { var inputs = document.getElementsByTagName("input"), span = Array(), textnode, option, active; for(a = 0; a < inputs.length; a++) { if((inputs[a].type == "checkbox" || inputs[a].type == "radio") && inputs[a].className == "styled") { span[a] = document.createElement("span"); span[a].className = inputs[a].type; if(inputs[a].checked == true) { if(inputs[a].type == "checkbox") { position = "0 -" + (checkboxHeight*2) + "px"; span[a].style.backgroundPosition = position; } else { position = "0 -" + (radioHeight*2) + "px"; span[a].style.backgroundPosition = position; } } inputs[a].parentNode.insertBefore(span[a], inputs[a]); inputs[a].onchange = Custom.clear; span[a].onmousedown = Custom.pushed; span[a].onmouseup = Custom.check; document.onmouseup = Custom.clear; } } inputs = document.getElementsByTagName("select"); for(a = 0; a < inputs.length; a++) { if(inputs[a].className == "styled") { option = inputs[a].getElementsByTagName("option"); active = option[0].childNodes[0].nodeValue; textnode = document.createTextNode(active); for(b = 0; b < option.length; b++) { if(option[b].selected == true) { textnode = document.createTextNode(option[b].childNodes[0].nodeValue); } } span[a] = document.createElement("span"); span[a].className = "select"; span[a].id = "select" + inputs[a].name; span[a].appendChild(textnode); inputs[a].parentNode.insertBefore(span[a], inputs[a]); inputs[a].onchange = Custom.choose; } } }, pushed: function() { element = this.nextSibling; if(element.checked == true && element.type == "checkbox") { this.style.backgroundPosition = "0 -" + checkboxHeight*3 + "px"; } else if(element.checked == true && element.type == "radio") { this.style.backgroundPosition = "0 -" + radioHeight*3 + "px"; } else if(element.checked != true && element.type == "checkbox") { this.style.backgroundPosition = "0 -" + checkboxHeight + "px"; } else { this.style.backgroundPosition = "0 -" + radioHeight + "px"; } }, check: function() { element = this.nextSibling; if(element.checked == true && element.type == "checkbox") { this.style.backgroundPosition = "0 0"; element.checked = false; } else { if(element.type == "checkbox") { this.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px"; } else { this.style.backgroundPosition = "0 -" + radioHeight*2 + "px"; group = this.nextSibling.name; inputs = document.getElementsByTagName("input"); for(a = 0; a < inputs.length; a++) { if(inputs[a].name == group && inputs[a] != this.nextSibling) { inputs[a].previousSibling.style.backgroundPosition = "0 0"; } } } element.checked = true; } }, clear: function() { inputs = document.getElementsByTagName("input"); for(var b = 0; b < inputs.length; b++) { if(inputs[b].type == "checkbox" && inputs[b].checked == true && inputs[b].className == "styled") { inputs[b].previousSibling.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px"; } else if(inputs[b].type == "checkbox" && inputs[b].className == "styled") { inputs[b].previousSibling.style.backgroundPosition = "0 0"; } else if(inputs[b].type == "radio" && inputs[b].checked == true && inputs[b].className == "styled") { inputs[b].previousSibling.style.backgroundPosition = "0 -" + radioHeight*2 + "px"; } else if(inputs[b].type == "radio" && inputs[b].className == "styled") { inputs[b].previousSibling.style.backgroundPosition = "0 0"; } } }, choose: function() { option = this.getElementsByTagName("option"); for(d = 0; d < option.length; d++) { if(option[d].selected == true) { document.getElementById("select" + this.name).childNodes[0].nodeValue = option[d].childNodes[0].nodeValue; } } } } window.onload = Custom.init; |