xfn-xoxo-blogroll.html

<div style="padding:3ex;">

   <script type="text/javascript">
    //<![CDATA[
		function GetElementsWithClassName(elementName, className) {
		   var allElements = document.getElementsByTagName(elementName);
		   var elemColl = new Array();
		   for (i = 0; i < allElements.length; i++) {
		       if (allElements[i].className == className) {
		           elemColl[elemColl.length] = allElements[i];
		       }
		   }
		   return elemColl;
		}
		
		function meChecked()
		{
		  var undefined;
		  var eMe = document.getElementById('me');
		  if (eMe == undefined) return false;
		  else return eMe.checked;
		}
		
		function upit() {
		   var isMe = meChecked(); //document.getElementById('me').checked;
		   var inputColl = GetElementsWithClassName('input', 'valinp');
		   var results = document.getElementById('xfnResult');
		   var linkText, linkUrl, inputs = '';
		   linkText = document.getElementById('linkText').value;
		   linkUrl = document.getElementById('linkUrl').value;
		   for (i = 0; i < inputColl.length; i++) {
		       inputColl[i].disabled = isMe;
		       inputColl[i].parentNode.className = isMe ? 'disabled' : '';
		       if (!isMe && inputColl[i].checked && inputColl[i].value != '') {
					inputs += inputColl[i].value + ' ';
		            }
		       }
		   inputs = inputs.substr(0,inputs.length - 1);
		   if (isMe) inputs='me';
		   results.childNodes[0].nodeValue = '<a class="fn url" href="' + linkUrl + '" rel="' + inputs + '">' + linkText + '<\/a>';
		   }
		
		function blurry() {
		   if (!document.getElementById) return;
		
		   var aInputs = document.getElementsByTagName('input');
		
		   for (var i = 0; i < aInputs.length; i++) {		
		       aInputs[i].onclick = aInputs[i].onkeyup = upit;
		   }
		}
		
		function resetstuff() {
		 if (meChecked()) document.getElementById('me').checked=''; 
		 upit();
		 document.getElementById('xfnResult').childNodes[0].nodeValue = '<a href="" rel=""><\/a>';
		}
		
		window.onload = blurry;

                var xoxoList = [];
                function addLink() {
                   upit();
                   xoxoList.push(document.getElementById('xfnResult').innerHTML);
                   buildXOXO();
                }//end function addLink

                function removeLink(idx) {
                   delete xoxoList[idx];
                   buildXOXO();
                }//end function removeLink

                function buildXOXO(final) {
                   var txt = '&lt;ul class="xoxo blogroll"&gt;<br \/>\n';
                   for(var i in xoxoList) {
                      txt += '&nbsp;&nbsp;&nbsp;&lt;li class="vcard"&gt;' + xoxoList[i];
                      if(!final) txt += ' <a href="javascript:removeLink(&quot;' + i + '&quot;);" style="font-family:sans-serif;text-decoration:none;" title="Remove from list">X</a> ';
                      txt += '&lt;\/li&gt;<br \/>\n';
                   }//end for i in xoxoList
                   txt += '&lt;\/ul&gt;<br \/>\n';
                   if(!final) {txt = txt.replace(/<br \/>/g, '').replace(/&lt;/g,'<').replace(/&gt;/g,'>').replace(/&nbsp;/g,' ');}
                   var block = document.getElementById('xoxoResult');
                   block.innerHTML = txt;
                }//end function buildXOXO
    //]]>
    </script>

   <h2><abbr title="XHTML Friends Network">XFN</abbr> <abbr title="Extensible Open XHTML Outlines">XOXO</abbr> Blogroll Creator (with hCards)</h2>

    <form action="" onreset="resetstuff();">
      <table cellspacing="0">

        <tr>
          <th scope="row">
            Name
          </th>
          <td>
            <input type="text" id="linkText" />
          </td>
        </tr>
        <tr>

          <th scope="row">
            URL
          </th>
          <td>
            <input type="text" id="linkUrl" /> <label for="me"><input type="checkbox" name="identity" value="me" id="me" />&nbsp;another web address of mine</label>
          </td>
        </tr>
        <tr>

          <th scope="row">
            friendship
          </th>
          <td>
            <label for="friendship-contact"><input class="valinp" type="radio" name="friendship" value="contact" id="friendship-contact" />&nbsp;contact </label><label for="friendship-aquaintance"><input class="valinp" type="radio" name="friendship" value="acquaintance" id="friendship-aquaintance" />&nbsp;acquaintance </label> <label for="friendship-friend"><input class="valinp" type="radio" name="friendship" value="friend" id="friendship-friend" />&nbsp;friend </label> <label for="friendship-none"><input class="valinp" type="radio" name="friendship" value="" id="friendship-none" />&nbsp;none</label>
          </td>

        </tr>
        <tr>
          <th scope="row">
            physical
          </th>
          <td>
            <label for="met"><input class="valinp" type="checkbox" name="physical" value="met" id="met" />&nbsp;met</label>
          </td>
        </tr>

        <tr>
          <th scope="row">
            professional
          </th>
          <td>
            <label for="co-worker"><input class="valinp" type="checkbox" name="professional" value="co-worker" id="co-worker" />&nbsp;co-worker </label> <label for="colleague"><input class="valinp" type="checkbox" name="professional" value="colleague" id="colleague" />&nbsp;colleague</label>
          </td>
        </tr>

        <tr>
          <th scope="row">
            geographical
          </th>
          <td>
            <label for="co-resident"><input class="valinp" type="radio" name="geographical" value="co-resident" id="co-resident" />&nbsp;co-resident </label> <label for="neighbor"><input class="valinp" type="radio" name="geographical" value="neighbor" id="neighbor" />&nbsp;neighbor </label> <label for="geographical-none"><input class="valinp" type="radio" name="geographical" value="" id="geographical-none" />&nbsp;none</label>
          </td>

        </tr>
        <tr>
          <th scope="row">
            family
          </th>
          <td>
            <label for="family-child"><input class="valinp" type="radio" name="family" value="child" id="family-child" />&nbsp;child </label> <label for="family-parent"><input class="valinp" type="radio" name="family" value="parent" id="family-parent" />&nbsp;parent </label> <label for="family-sibling"><input class="valinp" type="radio" name="family" value="sibling" id="family-sibling" />&nbsp;sibling </label> <label for="family-spouse"><input class="valinp" type="radio" name="family" value="spouse" id="family-spouse" />&nbsp;spouse </label> <label for="family-kin"><input class="valinp" type="radio" name="family" value="kin" id="family-kin" />&nbsp;kin </label>

            <label for="family-none"><input class="valinp" type="radio" name="family" value="" id="family-none" />&nbsp;none</label>
          </td>
        </tr>
        <tr>
          <th scope="row">
            romantic
          </th>
          <td>
            <label for="muse"><input class="valinp" type="checkbox" name="romantic" value="muse" id="muse" />&nbsp;muse </label> <label for="crush"><input class="valinp" type="checkbox" name="romantic" value="crush" id="crush" />&nbsp;crush </label> <label for="date"><input class="valinp" type="checkbox" name="romantic" value="date" id="date" />&nbsp;date </label> <label for="sweetheart"><input class="valinp" type="checkbox" name="romantic" value="sweetheart" id="sweetheart" />&nbsp;sweetheart</label>

          </td>
        </tr>
      </table>
      <p>
        <button onclick="addLink(); return false;">Add Link to List</button> <input type="reset" />
        <button onclick="buildXOXO(true); return false;">Generate Final List</button>
      </p>
    </form>
    <div id="xfnResult" style="display:none;">
      &lt;a href="" rel=""&gt;&lt;/a&gt;
    </div>

    <div id="xoxoResult">
    </div>

</div>