SitePoint Sponsor |
|
User Tag List
Results 1 to 11 of 11
-
Dec 4, 2003, 03:04 #1
- Join Date
- Nov 2003
- Location
- Thessaloniki, Greece
- Posts
- 79
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Radio buttons, checkboxes and labels
Hi.
I have the following HTML:
HTML Code:<form> <fieldset id="assistant"> <legend>Βοηθός καταχώρησης</legend> <table id="features"> <tr> <td id="general"> <label for="brand">Μάρκα:</label> <input class="field" type="text" name="brand" id="brand" size="20" maxlength="55" /><br /> <label for="model">Μοντέλο:</label> <input class="field" type="text" name="model" id="model" size="15" maxlength="15" /><br /> <label for="version">Version:</label> <input class="field" type="text" name="version" id="version" size="10" maxlength="10" /><br /> <label for="cc">Κυβικά:</label> <input class="field" type="text" name="cc" id="cc" size="10" maxlength="10" /><br /> <label for="year">Έτος:</label> <input class="field" type="text" name="year" id="year" size="4" maxlength="4" /><br /> <label for="km">Χιλιόμετρα:</label> <input class="field" type="text" name="km" id="km" size="10" maxlength="10" /><br /> <label for="color">Χρώμα:</label> <input class="field" type="text" name="color" id="color" size="20" maxlength="20" /><br /> </td> <td id="radio"> <div class="radio"> <input type="radio" name="cartype1" id="pro" /><label for="pro">Επαγγελματικό</label><br /> <input type="radio" name="cartype1" id="disabled" /><label for="disabled">Αναπηρικό</label><br /> <input type="radio" name="cartype1" id="racing" /><label for="racing">Αγωνιστικό</label><br /> </div> <div class="radio"> <input type="radio" name="cartype2" id="auto" /><label for="auto">Αυτόματο</label><br /> <input type="radio" name="cartype2" id="cabrio" /><label for="cabrio">Cabrio</label><br /> <input type="radio" name="cartype2" id="station" /><label for="station">Στέισον</label><br /> </div> <div class="radio"> <input type="radio" name="fuel" id="nolead" /><label for="nolead">Αμόλυβδη</label><br /> <input type="radio" name="fuel" id="oil" /><label for="oil">Πετρέλαιο</label><br /> <input type="radio" name="fuel" id="gas" /><label for="gas">Υγραέριο</label><br /> </div> <div class="radio"> <input type="radio" name="cartype" id="odd" /><label for="odd">Μονό</label><br /> <input type="radio" name="cartype" id="even" /><label for="even">Ζυγό</label><br /> </div> </td> </tr> <tr> <td> <input type="checkbox" name="abs" id="abs" value="1" /><label for="abs">ABS</label><br /> <input type="checkbox" name="aerodriver" id="aerodriver" value="1" /><label for="aerodriver">Αερόσακος Οδηγού</label><br /> <input type="checkbox" name="aerocodriver" id="aerocodriver" value="1" /><label for="aerocodriver">Αερόσακος Συνοδηγού</label><br /> <input type="checkbox" name="aeroside" id="aeroside" value="1" /><label for="aeroside">Πλευρικοί αερόσακοι</label><br /> <input type="checkbox" name="foglights" id="foglights" value="1" /><label for="foglights">Προβολείς ομίχλης</label><br /> <input type="checkbox" name="ac" id="ac" value="1" /><label for="ac">A/C</label><br /> <input type="checkbox" name="aircond" id="aircond" value="1" /><label for="aircond">Κλιματισμός</label><br /> <input type="checkbox" name="hydsteer" id="hydsteer" value="1" /><label for="hydsteer">Υδραυλικό τιμόνι</label><br /> <input type="checkbox" name="elwindows" id="elwindows" value="1" /><label for="elwindows">Ηλεκτρικά παράθυρα</label><br /> <input type="checkbox" name="elmirrors" id="elmirrors" value="1" /><label for="elmirrors">Ηλεκτρικοί καθρέπτες</label><br /> </td> <td> <input type="checkbox" name="centrallock" id="centrallock" value="1" /><label for="centrallock">Κεντρικό κλείδωμα</label><br /> <input type="checkbox" name="alarm" id="alarm" value="1" /><label for="alarm">Συναγερμός</label><br /> <input type="checkbox" name="immobilizer" id="immobilizer" value="1" /><label for="immobilizer">Immobilizer</label><br /> <input type="checkbox" name="soundsystem" id="soundsystem" value="1" /><label for="soundsystem">Ηχοσύστημα</label><br /> <input type="checkbox" name="cd" id="cd" value="1" /><label for="cd">CD</label><br /> <input type="checkbox" name="rims" id="rims" value="1" /><label for="rims">Ζάντες αλουμινίου</label><br /> <input type="checkbox" name="metalcolor" id="metalcolor" value="1" /><label for="metalcolor">Μεταλλικό χρώμα</label><br /> <input type="checkbox" name="leatherseats" id="leatherseats" value="1" /><label for="leatherseats">Δερμάτινα καθίσματα</label><br /> <input type="checkbox" name="sunroof" id="sunroof" value="1" /><label for="sunroof">Ηλιοροφή</label><br /> <input type="checkbox" name="hitch" id="hitch" value="1" /><label for="hitch">Κοτσαδόρος</label><br /> </td> </tr> </table> <div id="button"><input class="button" type="button" value="Generate Description" onclick="GenerateDesc();" /></div> </fieldset> <label for="shortdesc">Σύντομη περιγραφή οχήματος:</label> <input class="field" type="text" name="shortdesc" id="shortdesc" size="58" maxlength="55" tabindex="1" /> <label for="longdesc">Εκτενής περιγραφή οχήματος:</label> <textarea class="field" name="longdesc" id="longdesc" rows="6" cols="57" tabindex="2"></textarea> </form>
What I'd like to do, is when the user clicks the Generate Description button, the GenerateDesc() JS function to create a comma delimited list of the selected charecteristics.
The difficult part is getting the labels of the checked radio buttons and checkboxes. I looked around Google and found a ready-made function that's supposed to do that, but I couldn't make it work.
Here's how my script looks like so far:
Code:function findLabelFor (elOrId) { var el = typeof elOrId == 'string' ? document.getElementById(elOrId) : elOrId; var labels = document.getElementsByTagName('LABEL'); var found = false; for (var l = 0; l < labels.length; l++) { if (found = el.id == labels[l].htmlFor) break; if (found) return labels[l]; else return null; } } function findLabelTextFor (elOrId) { return findLabelFor(elOrId).firstChild.nodeValue; } function GenerateDesc() { var shortdesc = xGetElementById('shortdesc'); var longdesc = xGetElementById('longdesc'); var assist = xGetElementById('assistant'); var brand = xGetElementById('brand'); var model = xGetElementById('model'); var version = xGetElementById('version'); var inputs = assist.getElementsByTagName('input'); shortdesc.value = brand.value + ' ' + model.value + ' ' + version.value; longdesc.value = shortdesc.value; for (var i = 0; i < inputs.length; i++) { if ((inputs[i] != brand) || (inputs[i] != model) || (inputs[i] != version)) { if ((inputs[i].value != '') && (inputs[i].value != '1') && (inputs[i].value != 'on')) longdesc.value = ', ' + longdesc.value + inputs[i].value; if ((inputs[i].value = '1') || (inputs[i].value = 'on')) longdesc.value = ', ' + longdesc.value + findLabelTextFor(inputs[i]); } } }
- find all text inputs and get their value
- find all checked radio buttons and get their labels
- find all checked checkboxes and get their labels
Thanks in advance.
-
Dec 4, 2003, 06:02 #2
- Join Date
- Sep 2002
- Location
- Grand Rapids, MI
- Posts
- 1,168
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Just a thought:
You appear to be referencing xGetElementById which is presumably the function within the widely-used x.js script.
However I don't see any reference to x.js within your script. It could simply be that you've omitted it from the code you posted here, or it could be that you hadn't realised that you needed it.
Check out the x-ref and then go to "downloads" if you don't already have x.js.
AndyFrom the English nation to a US location.
-
Dec 4, 2003, 06:03 #3
- Join Date
- Jul 2002
- Location
- Dallas, TX
- Posts
- 2,900
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I both wrote and use this. It's great.
Code:function addLabelProperties( f ) { // Collect all label elements in form, init vars if ( typeof f.getElementsByTagName == 'undefined' ) return; var labels = f.getElementsByTagName( "label" ), label, elem, i = j = 0; // Loop through labels retrieved while ( label = labels[i++] ) { // For Opera 6 if ( typeof label.htmlFor == 'undefined' ) return; // Retrieve element elem = document.getElementById( label.htmlFor ); if ( typeof elem == 'undefined' ) { // No element found for label alert( "No element found for label: " + label.htmlFor ); } else if ( typeof elem.label != 'undefined' ) { // label property already added continue; } else if ( typeof elem.length != 'undefined' && elem.length > 1 && elem.nodeName != 'SELECT' ) { // For checkbox arrays and radio-button groups for ( j = 0; j < elem.length; j++ ) { elem.item( j ).label = label; } } // Regular label elem.label = label; } }
-
Dec 4, 2003, 06:11 #4
- Join Date
- Nov 2003
- Location
- Thessaloniki, Greece
- Posts
- 79
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Thank you both for answering me.
I already have x.js, Andy, but I tried to post only what was needed (you really don't want to see my full html page)
Beetle, I'll look into your script and tell you if it works for me (I'm a bit confused though of what it does exactly).
Thanks a lot.
-
Dec 4, 2003, 06:14 #5
- Join Date
- Jul 2002
- Location
- Dallas, TX
- Posts
- 2,900
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Oh, sorry, I guess I should have explained a bit.
After running this function (by passing a reference to the form in) every element that has an associated label now has a label property that points at that label element.
So, grabbing the label of any element in the form becomes as easy as elem.label
-
Dec 4, 2003, 06:17 #6
- Join Date
- Nov 2003
- Location
- Thessaloniki, Greece
- Posts
- 79
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
You probably just made my day!
Now I'm anxious to try it immediately!
Thanks, beetle.
-
Dec 4, 2003, 07:20 #7
- Join Date
- Nov 2003
- Location
- Thessaloniki, Greece
- Posts
- 79
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I'm back with some input (or output if you want to be precise).
I set up a quick test script that goes:
Code:window.onload = function() { addLabelProperties(document.forms[0]); } var longdesc = xGetElementById('longdesc'); alert(longdesc.label);
Any ideas?
-
Dec 4, 2003, 07:26 #8
- Join Date
- Jul 2002
- Location
- Dallas, TX
- Posts
- 2,900
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
No, that's accurate per how the function is written. Remember, elem.label is a reference to the label element, not the text it contains.
Try
Code:alert( longdesc.label.innerHTML ); // or alert( longdesc.label.firstChild.nodeValue );
Code:elem.label = label;
Code:elem.label = label.innerHTML; // or elem.label = label.firstChild.nodeValue;
-
Dec 4, 2003, 07:29 #9
- Join Date
- Nov 2003
- Location
- Thessaloniki, Greece
- Posts
- 79
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Thanks a lot, beetle.
I was looking for a property to extract the label title, but I wasn't aware of the innerHTML one.
-
Dec 4, 2003, 08:27 #10
- Join Date
- Nov 2003
- Location
- Thessaloniki, Greece
- Posts
- 79
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
It works! Thanks again, beetle!
For anyone interested, here's the code that finds all labels from the checkboxes and radio buttons that are checked:
Code:var inputs = assist.getElementsByTagName('input'); var longdesc = xGetElementById('longdesc'); for (var i = 0; i < inputs.length; i++) { if (((inputs[i].type == 'radio') && (inputs[i].checked)) || ((inputs[i].type == 'checkbox') && (inputs[i].checked))) { longdesc.value = longdesc.value + ', ' + inputs[i].label.innerHTML; } }
-
Dec 4, 2003, 08:35 #11
Bookmarks