SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Enthusiast -saturn-'s Avatar
    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>
    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:

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

  2. #2
    American't awestmoreland's Avatar
    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.


    Andy
    From the English nation to a US location.

  3. #3
    Web-coding NINJA! silver trophy beetle's Avatar
    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;			
    	}
    }
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  4. #4
    SitePoint Enthusiast -saturn-'s Avatar
    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.

  5. #5
    Web-coding NINJA! silver trophy beetle's Avatar
    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
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  6. #6
    SitePoint Enthusiast -saturn-'s Avatar
    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.

  7. #7
    SitePoint Enthusiast -saturn-'s Avatar
    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);
    Alert prints "[object]" although it should be a string.

    Any ideas?

  8. #8
    Web-coding NINJA! silver trophy beetle's Avatar
    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 );
    If you want the label properties as a strings from the get-go, you can just change the last line of my function from
    Code:
    elem.label = label;
    to
    Code:
    elem.label = label.innerHTML;
     
    // or
     
    elem.label = label.firstChild.nodeValue;
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  9. #9
    SitePoint Enthusiast -saturn-'s Avatar
    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.

  10. #10
    SitePoint Enthusiast -saturn-'s Avatar
    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;
    	}
    }

  11. #11
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're quite welcome. That function has been super-handy to me, good to know it can be of use to someone else
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev





Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •