Radio buttons, checkboxes and labels

[-saturn-]

Hi.

I have the following HTML:

<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>

which is basically a fieldset with lots of checkboxes, some radio buttons and text inputs.

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:

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]);
}
}
}

The procedure I have thought of and tried to implement is like:

1. find all text inputs and get their value
2. find all checked radio buttons and get their labels
3. find all checked checkboxes and get their labels

If anyone could lead me to the proper path, I'd really appreciate it.

Thanks in advance.

[awestmoreland]

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.


Andy

[beetle]

I both wrote and use this. It's great.

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;			
	}
}

[-saturn-]

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.

[beetle]

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

[-saturn-]

You probably just made my day!

Now I'm anxious to try it immediately!

Thanks, beetle.

[-saturn-]

I'm back with some input (or output if you want to be precise).

I set up a quick test script that goes:

window.onload = function() {
 addLabelProperties(document.forms[0]);
}
 
 var longdesc = xGetElementById('longdesc');
 alert(longdesc.label);

Alert prints "[object]" although it should be a string.

Any ideas?

[beetle]

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

 
alert( longdesc.label.innerHTML );
 
// or
 
alert( longdesc.label.firstChild.nodeValue );

If you want the label properties as a strings from the get-go, you can just change the last line of my function from

elem.label = label;

to

elem.label = label.innerHTML;
 
// or
 
elem.label = label.firstChild.nodeValue;

[-saturn-]

Thanks a lot, beetle.

I was looking for a property to extract the label title, but I wasn't aware of the innerHTML one.

[-saturn-]

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:

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;
	}
}

[beetle]

You're quite welcome. That function has been super-handy to me, good to know it can be of use to someone else