|
JavaScript - Using Javascript To Check Drop-down Lists
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.
Similar TutorialsHi On my web page I have 3 seperate catorgories with 2 drop down lists in each, the first dropdown list in each catergory is for "county" here is a snippet of the code Code: function fillCategory(){
addOption(document.drop_list.Category, "bedfordshire", "Bedfordshire", "");
addOption(document.drop_list.Category, "berkshire", "Berkshire", "");
addOption(document.drop_list.Category, "buckinghamshire", "Buckinghamshire", "");
addOption(document.drop_list.Category, "cambridgeshire", "Cambridgeshire", "");
I wanted to know if it is possible to use "list.js" to populate all 3 county dropdown lists or would I need "list.js" "list1.js" etc etc Thanks for all the help Old Pedant. You're nice enough to lend people a hand when you don't have to, and this makes the second or third time you've helped me solve a problem I've had with my website. Thanks so much. So I'm making a page where when someone clicks on the second drop list, then it carrys out a function first, and it calculates it based on what the first droplist is picked. Here's the code I have: Code: <html>
<head>
<title></title>
<script type="text/javascript">
function first()
{
var gold = 4;
var green = 6;
var red = 30;
var blue = 0;
var total = 100;
if (calculate.color.GetElementById('gold').select)
{
var depends = gold/total
};
if (calculate.color.GetElementById('green').select)
{
var depends = green/total
};
if (calculate.color.GetElementById('red').select)
{
var depends = red/total
};
if (calculate.color.GetElementById('blue').select)
{
var depends = blue/total
};
if (calculate.choice1.GetElementById('first').select)
{
calculate.results.value = 1 * calculate.howmany.value * depends;
}
}
</script>
</head>
<body>
<form name="calculate">
<table>
<td>
I need: <input type="text" name="howmany" />
<br />
My choice is:
</td>
<td>
<select name="color">
<option selected id="gold">Gold</option>
<option id="green">Green</option>
<option id="red">Red</option>
<option id="blue">Blue Charms</option>
</select>
<br />
<select name="choice1">
<option id="first" onClick="first()">
First
</option>
</select>
</td>
</tr>
<tr>
<td colspan="2" align="center" valign="top">
You will need <input type="text" name="results" />
</td>
</tr>
</table>
</form>
</body>
</html>
Any help is well appreciated. Thanks. Hi to everyone, I'm kind of new to html/php/javascript but still I manage to create a nice looking form in wich the users have to fill some text fields and select items from drop list. But I now have a small problem. I need one of those text fields to be automaticly filled by the informations selected in 2 drop lists. This is how it would looks like : Machine-Name : __________ (empty text field) Drop-List1 : abc (the user selected the string "abc" from the list.) Machine-Name : abc- Drop-List 2 : zxy(the user selected the string "zxy" from the list.) Machine-Name : abc-zxy- I hope you understand what I mean. If needed, I can past those fields and list code, but I don't think that would be very useful since it is kind of trivial. So, in words, how would you guys proceed to achieve this goal? Hi Guys, I am after populating a HTML box (or another language if html wont do) with a number of different files pdfs, exe's etc for customer to download. The content of this box will depend on the choices from two drop down lists. I have got two drop down lists setup filtering off each other... I have thought about tagging each document and then pulling up a file off the choices selected? Not sure the best way to go about this. Regards Heres the code so far.... Code: <HTML>
<HEAD><TITLE>prototype CP</Title>
<style type="text/css">
.style1 {
text-align: center;
}
.style2 {
font-size: small;
color: #FFFFFF;
}
.style3 {
font-size: small;
}
</style>
</Head>
<BODY OnLoad="BuildContacts(0);" style="background-color: #336699; background-image: url('back.jpeg')">
<FORM Name="myForm">
<div class="style1">
<span class="style2">I have a
</span>
<font color="#000000">
<SELECT Name="SalesNames" OnChange="BuildContacts(this.selectedIndex);" class="style3">
<OPTION Value="">
<OPTION Value="nexgen">nexgen
<OPTION Value="zimbra">zimbraCS
<OPTION Value="exchange">exchange
</Select></font><span class="style2">
mailbox and I want to set it up on:
</span>
<font color="#000000">
<SELECT Name="SalesContacts" class="style3">
<OPTION Value="">--------
</Select>
</font>
</div>
</Form>
</Body>
</Html>
<SCRIPT Language="JavaScript"><!--
//Build arrays for each mailbox type
Contacts=new Array(4);
Contacts[0]=new Array(3);
Contacts[1]=new Array(2);
Contacts[2]=new Array(5);
Contacts[3]=new Array(4);
//Nexgen
Contacts[0][0]="";
Contacts[0][1]="Outlook";
Contacts[0][2]="mac mail";
Contacts[0][3]="entourage";
Contacts[0][4]="iPhone";
Contacts[0][5]="Blackberry";
Contacts[0][6]="other mobile phone";
//Zimbra
Contacts[1][0]="Outlook";
Contacts[1][1]="mac mail";
Contacts[1][2]="entourage";
Contacts[1][3]="iPhone";
Contacts[1][4]="Blackberry";
Contacts[1][5]="other mobile phone";
//Exchange
Contacts[2][0]="Outlook";
Contacts[2][1]="mac mail";
Contacts[2][2]="entourage";
Contacts[2][3]="iPhone";
Contacts[2][4]="Blackberry";
Contacts[2][5]="other mobile phone";
//Call this to build the Contact list for the specified Salesperson
function BuildContacts(num)
{
//Select the first Contact
document.myForm.SalesContacts.selectedIndex=0;
//For every contact in the array for this person, add a new option
for(ctr=0;ctr<Contacts[num].length;ctr++)
{
document.myForm.SalesContacts.options[ctr]=new Option(Contacts[num][ctr],Contacts[num][ctr]);
}
//Set the length of the select list
document.myForm.SalesContacts.length=Contacts[num].length;
}
//--></Script>
I'm a newbie...please! html lists making javascript array I need help with a HTML UL I have ul inside ul but all I want to get when I select a certain list is the children of that list but remove the ul inside that list so they dont show at all http://pastebin.com/m98deaff any help would be great , current selecting code is http://pastebin.com/m6f4b886f Code: <div class="demo" id="demo_1"> <ul> <li id="1" class="open"><a id="1" href="#"><ins> </ins>Root node 1</a> <ul> <li id="2"><a id="2" href="#"><ins> </ins>Child node 1</a></li> <li id="3"><a id="3" href="#"><ins> </ins>Child node 2</a></li> <li id="4"><a id="4" href="#"><ins> </ins>Some other child node with longer text</a></li> <li id="6"><a id="6" href="#"><ins> </ins>Root node 222</a> //SHOUL NOT BE IN MY ARRAY <ul> <li id="7"><a id="7" href="#"><ins> </ins>Child node 222a</a></li> <li id="8"><a id="8" href="#"><ins> </ins>Child node 222b</a></li> <li id="9"><a id="9" href="#"><ins> </ins>Some other child node with longer text 222</a></li> </ul> //END OF UL ELEMENT N OT NEEDED THERE COULD BE more than 1 </li> </ul> </li> <li id="5"><a id="5" href="#"><ins> </ins>Root node 2</a></li> </ul> Hello everyone, I am trying to figure a solution to this CSS/JavaScript navigation menu. I have a couple of different classes set out for each level of the menu, which there are 4 levels max. The first level has a class for it called 'pMenuMain'. The second and third have names 'pMenu2' and 'pMenu3'. The 4th level is found by its <a> tags, because all of those are links. This is the JavaScript I need to change somehow: Code: <script src="http://code.jquery.com/jquery-1.6.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
var timeout = 1000;
var closetimer = 0;
var ddmenuitem = 0;
function jsddm_open()
{ jsddm_canceltimer();
jsddm_close();
ddmenuitem = $(this).find('ul').css('visibility', 'visible');}
function jsddm_close()
{ if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}
function jsddm_timer()
{ closetimer = window.setTimeout(jsddm_close, timeout);}
function jsddm_canceltimer()
{ if(closetimer)
{ window.clearTimeout(closetimer);
closetimer = null;}}
$(document).ready(function()
{ $('.pMenu2').hover(jsddm_open, jsddm_timer)
$('.pMenu > li > ul').hover(jsddm_open, jsddm_timer)});
document.onclick = jsddm_close;
</script>
Now this is the CSS style sheet: Code: /********************/
/*PERSONAL NAV MENU**/
/********************/
.pWrapper {
padding-bottom:53%;
padding-left:21%;
}
.pMenu {
margin:0;
padding:0;
list-style:none;
}
/*IE 6 & 7 need inline block feature*/
ul.pMenu ul li{
width:100%;
display:inline-block;
}
ul.pMenu ul ul li{
width:100%;
display:inline-block;
}
ul.pMenu ul ul ul li{
width:100%;
display:inline-block;
}
/*begin main list attributes*/
ul.pMenu > li:hover{
background:#F00;
border:.33em ridge #C90;
color:#FF0;
}
ul.pMenu > li{
float:left;
list-style:none;
margin-right:1%;
display:block;
color:#FFF;
background:#900;
border:.33em ridge #C30;
text-decoration:none;
}
.pMenuMain{
text-shadow:1px 1px 1px #000;
white-space:nowrap;
padding-top:.7em;
padding-bottom:.7em;
text-align:center;
}
/*first sub-list*/
ul.pMenu li li{
margin-right:0;
}
ul.pMenu ul {
margin:0;
padding:0;
position:absolute;
visibility:hidden;
}
.pMenu2{
background:#CCC;
border:.25em outset #999;
width:10em;
font-size:12px;
padding-top:.5em;
padding-bottom:.5em;
padding-right:2em;
padding-left:.5em;
text-decoration:none;
text-shadow:1px 1px 1px #000;
color:#000;
position:relative;
text-align:left;
top:.33em;
visibility:hidden;
}
.pMenu2:hover{
background:#999;
border:.25em inset #666;
text-decoration:blink;
}
/*second sub-list*/
ul.pMenu ul ul{
margin:0;
padding:0;
position:absolute;
visibility:hidden;
display:none;
}
.pMenu3{
background:#999;
border:.25em outset #666;
width:13em;
font-size:11px;
padding-top:.35em;
padding-bottom:.35em;
padding-right:2em;
padding-left:.5em;
text-decoration:none;
text-shadow:1px 1px 1px #000;
color:#000;
position:relative;
text-align:left;
top:.33em;
visibility:hidden;
}
ul.pMenu ul ul li {
float:none;
display:inline;
}
ul.pMenu ul ul li a {
width:auto;
background:#999;
border:.15em outset #666;
text-shadow:1px 1px 1px #000;
color:#FFF;
}
ul.pMenu ul ul a:hover {
background:#999;
border:.15em inset #666;
text-decoration:blink;
}
/*third sub-list*/
ul.pMenu ul ul ul {
margin:0;
padding:0;
position:absolute;
visibility:hidden;
}
ul.pMenu ul ul ul li {
float:none;
display:inline;
}
ul.pMenu ul ul li a {
width:auto;
background:#999;
border:1% outset #666;
text-shadow:1px 1px 1px #000;
color:#FFF;
}
ul.pMenu ul ul li a:hover {
background:#999;
border:1% inset #666;
text-decoration:blink;
}
/******************/
/*End Personal Nav*/
/*****************/
This is how it's set up in HTML: Code: <!-- begin Personal navigation menu -->
<div class="pWrapper">
<ul class="pMenu">
<li style="width:10%;"><div class="pMenuMain">health</div>
<ul style="left:18em;">
<li><div class="pMenu2">weight loss</div>
<ul>
<li><div class="pMenu3">fitness</div>
<ul>
<li><a href="#">under construction</a></li>
</ul>
</li>
<li><div class="pMenu3">dieting</div>
<ul>
<li><a href="#">under construction</a></li>
</ul>
</li>
</ul>
</li>
<li><div class="pMenu2">skin care</div>
<ul>
<li><a href="#">under construction</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<ul class="pMenu">
<li style="width:14%;"><div class="pMenuMain">insurance</div>
<ul>
<li><div class="pMenu2">property insurance</div>
<ul>
<li><a href="#">under construction</a></li>
</ul>
</li>
<li><div class="pMenu2">auto insurance</div>
<ul>
<li><a href="#">under construction</a></li>
</ul>
</li>
<li><div class="pMenu2">health insurance</div>
<ul>
<li><a href="#">under construction</a></li>
</ul>
</li>
<li><div class="pMenu2">annuities</div>
<ul>
<li><a href="#">under construction</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<ul class="pMenu">
<li style="width:11.3%;"><div class="pMenuMain">general</div>
<ul>
<li><div class="pMenu2">electronics</div>
<ul>
<li><a href="#">under construction</a></li>
</ul>
</li>
<li><div class="pMenu2">style & fashion</div>
<ul>
<li><a href="#">under construction</a></li>
</ul>
</li>
<li><div class="pMenu2">food/dining</div>
<ul>
<li><a href="#">under construction</a></li>
</ul>
</li>
<li><div class="pMenu2">cars/auto</div>
<ul>
<li><a href="#">under construction</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<ul class="pMenu">
<li style="width:10%;"><div class="pMenuMain">dating</div>
<ul>
<li><a href="#">RealMatureSingles</a></li>
<li><a href="#">SeniorPeopleMeet</a></li>
</ul>
</li>
</ul>
<ul class="pMenu">
<li style="width:13.8%;"><div class="pMenuMain">education</div>
<ul>
<li><div class="pMenu2"><a href="#">under construction</a></div></li>
</ul>
</li>
</ul>
</div>
<!-- end Personal navigation menu-->
I know that I will receive critique for the HTML I created for this. The reason I am going this route is that a drop down menu with a list full of <a href="#"> can be clicked, resetting the menu. This is a flaw in functionality. 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]); Hello, 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. 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 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. 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 ... string check in javascript do suggest me something ....... if you have any two words like , "me" and "you". 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";
}
}
}
}
}
}}
}
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!! 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.. 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;
|
|||||||