Html radio buttons

ozi-rock · January 14, 2009

Hi

I would like to know how to create radio buttons on my weebly website: Amazing Men and their Magical Machines - Home. I want to use them as answers to the Einstein's puzzle section.

I would like to have the five radio buttons setup so that when one is chosen they disappear and a message saying correct or wrong appears.

Is this possible?

I got the button to appear before but i didnt know how to make them do anything:doh:

Thanks in advance,

alexander · January 15, 2009

cant do it with straight html... but you can with a little JS...

here's an example

<!-- This is in the head -->

function showHide (obj) {
if (obj.style.visibility == "hidden") {
obj.style.visibility = "visible";
} else {
obj.style.visibility = "hidden";
}
}

<!-- This is on the checkbox -->

<input type="checkbox" onPropertyChange="showHide(whatever);" />

<!-- This is on the table row I want to show/hide -->

<tr id="whatever" style="visibility: hidden;">
<td> </td>
<td align="right"><label for="64bitxref">64-bit Xref</label></td>
<td><input name="64bitxref" type="text" value="" id="64bitxref"
size="32" maxlength="32"> </td>
<td> </td>
</tr>

(wont claim responsibility for this, this is from a post on webmansterworld.com)

but it shows the point of what you need to do to make that work.

there is an easier way... you could always use a service like Wufoo - HTML Form Builder - Free Contact Forms & Online Surveys

ozi-rock · January 15, 2009

Thanks Alexander

But unfortunately the way the html is added in the weebly websites doesn't seem to recognize the java script and i don't think i can put a Wufoo form on my page either but thanks for the help, these must be the limitations of a free website :lightning

alexander · January 15, 2009

it does and will recognize the java script... you just need to tell the browser that it is JS

freeztar · January 15, 2009

it does and will recognize the java script... you just need to tell the browser that it is JS

Or use Flash. :valhappy_smile:

ozi-rock · January 15, 2009

I dont think i was made to do html :valhappy_smile:

I got radio buttons working but i linked them to a different page, I'm still pretty impressed with it :bounce:

Amazing Men and their Magical Machines - Einsteins Puzzle

alexander · January 15, 2009

screw flash, its such a blown out concept that it bewilders me how often and where it gets used.... i block flash personally, because whoever creates websites that are flash only, is a failed creator... not even developer...

ozi, here is an example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
<title>Hide Test</title>
</head>
<body>
<script type="text/javascript">
/*****************************************/
/** Usable Forms 2.0, November 2005     **/
/** Written by ppk, www.quirksmode.org  **/
/** Instructions for use on my site     **/
/**                                     **/
/** You may use or change this script   **/
/** only when this copyright notice     **/
/** is intact.                          **/
/**                                     **/
/** If you extend the script, please    **/
/** add a short description and your    **/
/** name below.                         **/
/*****************************************/

var containerTag = 'TR';

var compatible = (
document.getElementById && document.getElementsByTagName && document.createElement
&&
!(navigator.userAgent.indexOf('MSIE 5') != -1 && navigator.userAgent.indexOf('Mac') != -1)
);

if (compatible)
{
document.write('<style>.accessibility{display: none}</style>');
var waitingRoom = document.createElement('div');
}

var hiddenFormFieldsPointers = new Object();

function prepareForm()
{
if (!compatible) return;
var marker = document.createElement(containerTag);
marker.style.display = 'none';

var x = document.getElementsByTagName('select');
for (var i=0;i<x.length;i++)
	addEvent(x[i],'change',showHideFields)

var x = document.getElementsByTagName(containerTag);
var hiddenFields = new Array;
for (var i=0;i<x.length;i++)
{
	if (x[i].getAttribute('rel'))
	{
		var y = getAllFormFields(x[i]);
		x[i].nestedRels = new Array();
		for (var j=0;j<y.length;j++)
		{
			var rel = y[j].getAttribute('rel');
			if (!rel || rel == 'none') continue;
			x[i].nestedRels.push(rel);
		}
		if (!x[i].nestedRels.length) x[i].nestedRels = null;
		hiddenFields.push(x[i]);
	}
}

while (hiddenFields.length)
{
	var rel = hiddenFields[0].getAttribute('rel');
	if (!hiddenFormFieldsPointers[rel])
		hiddenFormFieldsPointers[rel] = new Array();
	var relIndex = hiddenFormFieldsPointers[rel].length;
	hiddenFormFieldsPointers[rel][relIndex] = hiddenFields[0];
	var newMarker = marker.cloneNode(true);
	newMarker.id = rel + relIndex;
	hiddenFields[0].parentNode.replaceChild(newMarker,hiddenFields[0]);
	waitingRoom.appendChild(hiddenFields.shift());
}

setDefaults();
addEvent(document,'click',showHideFields);
}

function setDefaults()
{
var y = document.getElementsByTagName('input');
for (var i=0;i<y.length;i++)
{
	if (y[i].checked && y[i].getAttribute('rel'))
		intoMainForm(y[i].getAttribute('rel'))
}

var z = document.getElementsByTagName('select');
for (var i=0;i<z.length;i++)
{
	if (z[i].options[z[i].selectedIndex].getAttribute('rel'))
		intoMainForm(z[i].options[z[i].selectedIndex].getAttribute('rel'))
}

}

function showHideFields(e)
{
if (!e) var e = window.event;
var tg = e.target || e.srcElement;

if (tg.nodeName == 'LABEL')
{
	var relatedFieldName = tg.getAttribute('for') || tg.getAttribute('htmlFor');
	tg = document.getElementById(relatedFieldName);
}
	
if (
	!(tg.nodeName == 'SELECT' && e.type == 'change')
	&&
	!(tg.nodeName == 'INPUT' && tg.getAttribute('rel'))
   ) return;

var fieldsToBeInserted = tg.getAttribute('rel');

if (tg.type == 'checkbox')
{
	if (tg.checked)
		intoMainForm(fieldsToBeInserted);
	else
		intoWaitingRoom(fieldsToBeInserted);
}
else if (tg.type == 'radio')
{
	removeOthers(tg.form[tg.name],fieldsToBeInserted)
	intoMainForm(fieldsToBeInserted);
}
else if (tg.type == 'select-one')
{
	fieldsToBeInserted = tg.options[tg.selectedIndex].getAttribute('rel');
	removeOthers(tg.options,fieldsToBeInserted);
	intoMainForm(fieldsToBeInserted);
}
}

function removeOthers(others,fieldsToBeInserted)
{
for (var i=0;i<others.length;i++)
{
	var show = others[i].getAttribute('rel');
	if (show == fieldsToBeInserted) continue;
	intoWaitingRoom(show);
}
}

function intoWaitingRoom(relation)
{
if (relation == 'none') return;
var Elements = hiddenFormFieldsPointers[relation];
for (var i=0;i<Elements.length;i++)
{
	waitingRoom.appendChild(Elements[i]);
	if (Elements[i].nestedRels)
		for (var j=0;j<Elements[i].nestedRels.length;j++)
			intoWaitingRoom(Elements[i].nestedRels[j]);
}
}

function intoMainForm(relation)
{
if (relation == 'none') return;
var Elements = hiddenFormFieldsPointers[relation];
for (var i=0;i<Elements.length;i++)
{
	var insertPoint = document.getElementById(relation+i);
	insertPoint.parentNode.insertBefore(Elements[i],insertPoint);
	if (Elements[i].nestedRels)
	{
		var fields = getAllFormFields(Elements[i]);
		for (var j=0;j<fields.length;j++)
		{
			if (!fields[j].getAttribute('rel')) continue;
			if (fields[j].checked || fields[j].selected) 
				intoMainForm(fields[j].getAttribute('rel'));
		}
	}
}
}

function getAllFormFields(node)
{
var allFormFields = new Array;
var x = node.getElementsByTagName('input');
for (var i=0;i<x.length;i++)
	allFormFields.push(x[i]);
var y = node.getElementsByTagName('option');
for (var i=0;i<y.length;i++)
	allFormFields.push(y[i]);
return allFormFields;
}

/** ULTRA-SIMPLE EVENT ADDING **/

function addEvent(obj,type,fn)
{
if (obj.addEventListener)
	obj.addEventListener(type,fn,false);
else if (obj.attachEvent)
	obj.attachEvent("on"+type,fn);
}

addEvent(window,"load",prepareForm);


/** PUSH AND SHIFT FOR IE5 **/

function Array_push() {
var A_p = 0
for (A_p = 0; A_p < arguments.length; A_p++) {
	this[this.length] = arguments[A_p]
}
return this.length
}

if (typeof Array.prototype.push == "undefined") {
Array.prototype.push = Array_push
}

function Array_shift() {
var A_s = 0
var response = this[0]
for (A_s = 0; A_s < this.length-1; A_s++) {
	this[A_s] = this[A_s + 1]
}
this.length--
return response
}

if (typeof Array.prototype.shift == "undefined") {
Array.prototype.shift = Array_shift
}
</script>

Is there any case when 2+5=21?
<table>
<tr class="questions">
<td>
<input type="checkbox" id="yes" rel="correct" />  Yes
</td>
<td>
<input type="checkbox" id="no" rel="wrong" />  No
</td>
</tr>
<tr rel="wrong" >
<td> </td>
<td align="right">Learn bases please</td>
<td> </td>
</tr> 
<tr rel="correct" >
<td> </td>
<td align="right">Wee, you know bases</td>
<td> </td>
</tr> 
</table>
</body></html>

its a quick and simple one... js code documentation and examples can be found here: Javascript - Usable forms

ozi-rock · January 15, 2009

Thanks very much Alexander i got it working just as i wanted :hyper:

alexander · January 15, 2009

welcome

Cedars · January 16, 2009

Alex,

You are truly The CHAMPION of computer sciences.

alexander · January 16, 2009

No, i just do web dev work every now and again... hell i have a book on pro drupal development in my bedroom, the zen of web design just to the left, and i was writing my own CMS when i started college ;)

ozi-rock · January 19, 2009

Hi I've just another small question about websites, i have a Google webmaster account and it says my site hasn't been indexed yet but that takes weeks right?

Also it says i have no site map, i have a weebly.com website and i asked the support there if i needed one but i got no reply. Does anyone know if you need to make one for a weebly site and if you do, how? Do you put a list the urls in the footer section in the settings menu?

Tormod · January 19, 2009

I don't know weebly.com that well but if I'm not mistaken it does not offer sitemap support. One way to solve it would be to host the sitemap elsewhere but your site probably doesn't need a sitemap to be included in Google. Only really large sites benefit from that in my experience.

ozi-rock · January 19, 2009

Ok thanks for that, I'll leave it out so. When the webmaster tool say that the site has been indexed will that mean if i search for it in Google i should find it?

Tormod · January 19, 2009

Well, the Google spider may visit your site, but that does not mean the site appears in the search results. It can take a few weeks, as you mentioned.

alexander · January 19, 2009

i dunno, took my website less then 2 hours to get indexed and i was able to find it the next day :) but then again i tend to make my websites as search friendly as i can make them

ozi-rock · January 19, 2009

Thanks Tormod, my site has been there for over a week is it strange that it has not been indexed?

And it doesn't surprise me that your sites work instantly Alexander, you do appear to be quite good at this stuff :)

Sign In

Html radio buttons

Recommended Posts

ozi-rock

alexander

ozi-rock

alexander

freeztar

ozi-rock

alexander

ozi-rock

alexander

Cedars

alexander

ozi-rock

Tormod

ozi-rock

Tormod

alexander

ozi-rock

Join the conversation

Browse

Activity