PDA

View Full Version : Dynamic Forms



Paintball24
07-28-2006, 12:35 AM
Alright, I'm working on a form for my website.
I'm trying to use Javascript so that if you pick a certain option, more options appear. (such as more text fields, radio buttons, etc.)

The idea is for a Web Hosting Website.
The form would go kinda like:

Name (text)
Company (text)
Email (text)
Phone (text)
Web Hosting Package (radio)
(and depending on the package you choose; more options appear)

Say you picked 'Domain Registration'...
Desired Domain Name (text)
.com, .org, .net, etc. (radio)
Number of Years (select box)

Say you picked 'Web Hosting'...
2GB (radio)
4GB (radio)
10GB (radio)
50GB (radio)

How could I do this?
Help is greatly appreciated.

BLiZZaRD
07-28-2006, 12:50 AM
Have a look at this: http://www.dynamicdrive.com/dynamicindex16/chainedselects/index.htm

There are others, and you should be able to tweak them accordingly :)

Paintball24
07-28-2006, 12:59 AM
Yea, I was already looking at that, but that's not really what I'm looking for. There are many differences between what that has and what I would like to have. They have only select boxes. I'd like almost an entire form to appear after a selected item. I'm kinda a n00b at Javascript and I wouldn't have the ability to 'tweak' something like this.

You know what I'm saying?

BLiZZaRD
07-28-2006, 01:41 AM
Not sure about the visibility/invisibility of such a thing, but you need to have grouped buttons and a reaction based on which was clicked.

You could do something like:



Private Sub Radio1_OnClick()
If me.Radio1 = true then
me.Radio2.enabled = false
me.Radio2 = false
Else
me.Radio2.enabled = true
end if

End Sub


So basically if radio 1 is chosen, then radio 2 and 3 and 4 are deactivated, and then radio 5 and 6 become active... then radio 5 is selected 6 becomes inactive, but radio 7 and 8 become active... and on and on...

I could do this for you in a Flash program, but I am not that cheap... depending on the number of buttons and allowable file size you are looking at around 25 bucks (US) :)

I am no JS guy, but I am sure Twey will be through again today and have something to say.

Paintball24
07-28-2006, 02:37 AM
Yea, I see what you are saying, but jeez that would take a while...(maybe that's why you'd charge $25.) lol I think I'm gonna pass up that offer.

Does anyone else wanna help...for free that is. :D

Twey
07-28-2006, 02:49 AM
Private Sub Radio1_OnClick()
If me.Radio1 = true then
me.Radio2.enabled = false
me.Radio2 = false
Else
me.Radio2.enabled = true
end if

End SubWhat the heck? You're recommending VBScript? Is that even VBScript?

Translated:
<input type="radio" onclick="seafood(this.form);">

<script type="text/javascript">
function seafood(frm) {
if(frm.elements.Radio1.checked)
frm.elements.Radio2.enabled = frm.elements.Radio2.checked = false;
else
frm.elements.Radio2.enabled = true;
}
</script>Note that I'm not vouching for this code, I just translated it. :)
A better idea, if more complex, is:
<script type="text/javascript">
function setupDependencies() {
for(var i = 0; i < arguments.length; ++i)
for(var j = 0, e = window.document.forms[arguments[i]].elements; j < e.length; ++j)
e[j].onchange = function() {
this.form.calculateDependencies();
};
(window.document.forms.[arguments[i]].calculateDependencies = function() {
for(var i = 0, e = this.elements; i < e.length; ++i)
for(var j = 0, f = e[i].className.split(' '); j < f.length; ++j)
if(f[j].indexOf("depends-") === 0) {
if(!e[f[j].substr(8)].checked) {
e[i].style.display = "";
break;
} else e[i].style.display = "";
} else if(f[j].indexOf("conflicts-") === 0)
if(e[f[j].substr(10)].checked) {
e[i].style.display = "none";
break;
} else e[i].style.display = "";
})();
}

window.onload = function() {
setupDependencies("form1Name" /*, ... */);
};
</script>

<form action="" name="form1Name">
<p>
<input type="radio" name="linux">
<input type="checkbox" name="ssh" class="depends-linux">
<input type="radio" name="windows">
<input type="checkbox" name="asp" class="depends-windows">
</p>
</form>Note that it's 0346 and I'm tired, so it probably won't actually work. :) Apologies for the virtually unreadable code, with the same excuse.

Something to play with, though.

Paintball24
07-28-2006, 03:09 AM
Yea, it doesn't work. All four elements show up at once.
But wow, thanks for that try.
I'm sure you'll be able to fix it in the morning. It's prolly some forgotten bracket or quote. (I hate that :D)

Thanks again. :)

Twey
07-28-2006, 09:35 AM
Here we go:
<script type="text/javascript">
window.onload = function() {
setupDependencies("form1Name" /*, ... */);
};

function setupDependencies() {
var showEl = function() {
this.disabled = false;
};
var hideEl = function() {
this.disabled = true;
};
var calcDeps = function() {
for(var i = 0, e = this.elements; i < e.length; ++i)
for(var j = 0, f = e[i].className.split(' '); j < f.length; ++j)
if(f[j].indexOf("depends-") === 0)
if(!e[f[j].substr(8)].checked || e[f[j].substr(8)].disabled) {
e[i].hide();
break;
} else e[i].show();
else if(f[j].indexOf("conflicts-") === 0)
if(e[f[j].substr(10)].checked && !e[f[j].substr(10)].disabled) {
e[i].hide();
break;
} else e[i].show();
};
var changeHandler = function() {
this.form.calculateDependencies();
};
for(var i = 0; i < arguments.length; ++i) {
for(var j = 0, e = window.document.forms[arguments[i]].elements; j < e.length; ++j) {
e[j].onchange = changeHandler;
e[j].hide = hideEl;
e[j].show = showEl;
}

window.document.forms[arguments[i]].calculateDependencies = calcDeps;
window.document.forms[arguments[i]].calculateDependencies();
}
}
</script>

<form action="" name="form1Name">
<p>
<label>Linux<input type="checkbox" name="linux" class="conflicts-windows"></label>
<label>SSH<input type="checkbox" name="ssh" class="depends-linux"></label>
<label>Windows<input type="checkbox" name="windows" class="conflicts-linux"></label>
<label>Apache<input type="checkbox" name="apache" class="conflicts-iis"></label>
<label>IIS<input type="checkbox" name="iis" class="conflicts-apache depends-windows"></label>
<label>ASP<input type="checkbox" name="asp" class="depends-windows depends-iis"></label>
<label>Frequent Crashes<input type="checkbox" name="crashes" class="depends-windows conflicts-apache"></label>
</p>
</form>
It's prolly some forgotten bracket or quote. (I hate that :D)It was a badly-applied scope, and a runaway dot. I hate that. :p

/EDIT: Did some performance tweaks.

Paintball24
07-28-2006, 02:34 PM
Thanks. :)
I'll mess around with this.

But, one thing I noticed...the boxes only grey-out when they are "conflicting". Is it possible for the box and the label to totally disappear?

Paintball24
07-28-2006, 03:38 PM
Ok. Here's what I've got.

I'd like for there to be 5 Packages to choose from and according to what the packages include, the correct form elements appear.

The Web Development Package
The Web Design Package
The Web Hosting Package
The Domain Registration Package
The Search Engine Optimization Package

I'm having problem's with the domain input box I created.
I'd like to include the domain input box with...

The Web Development Package
The Domain Registration Package

,but not the

The Web Design Package
The Web Hosting Package
The Search Engine Optimization Package

Also, another note: The Web Development Package is supposed to include everything.




<html>

<body>

<script type="text/javascript">
window.onload = function() {
setupDependencies("form1Name" /*, ... */);
};

function setupDependencies() {
var showEl = function() {
this.disabled = false;
};
var hideEl = function() {
this.disabled = true;
};
var calcDeps = function() {
for(var i = 0, e = this.elements; i < e.length; ++i)
for(var j = 0, f = e[i].className.split(' '); j < f.length; ++j)
if(f[j].indexOf("depends-") === 0)
if(!e[f[j].substr(8)].checked || e[f[j].substr(8)].disabled) {
e[i].hide();
break;
} else e[i].show();
else if(f[j].indexOf("conflicts-") === 0)
if(e[f[j].substr(10)].checked && !e[f[j].substr(10)].disabled) {
e[i].hide();
break;
} else e[i].show();
};
var changeHandler = function() {
this.form.calculateDependencies();
};
for(var i = 0; i < arguments.length; ++i) {
for(var j = 0, e = window.document.forms[arguments[i]].elements; j < e.length; ++j) {
e[j].onchange = changeHandler;
e[j].hide = hideEl;
e[j].show = showEl;
}

window.document.forms[arguments[i]].calculateDependencies = calcDeps;
window.document.forms[arguments[i]].calculateDependencies();
}
}
</script>

<form action="" name="form1Name">
<p>
<input type="checkbox" name="TheWebDevelopmentPackage"> <label>The Web Development Package</label><br />
<input type="checkbox" name="TheWebDesignPackage"> <label>The Web Design Package</label><br />
<input type="checkbox" name="TheWebHostingPackage"> <label>The Web Hosting Package</label><br />
<input type="checkbox" name="TheDomainRegistrationPackage"> <label>The Domain Registration Package</label><br />
<input type="checkbox" name="TheSearchEngineOptimizationPackage"> <label>The Search Engine Optimization Package</label>
</p>

<p>
<label>Domain Name: </label><input type="text" name="Domain Name" class="conflicts-TheWebDesignPackage

conflicts-TheWebHostingPackage conflicts-TheSearchEngineOptimizationPackage depends-TheDomainRegistrationPackage
depends-TheWebDevelopmentPackage">


</form>

</body>
</html>

Twey
07-28-2006, 06:44 PM
Yes, it is possible. In fact, I wrote this in the first place, then realised that everything so far had been talking about just disabling the boxes, rather than hiding them. :p All we need is a small modification to the top two functions in setupDependencies():
var showEl = function() {
this.style.display = "";
if(this.parentNode.tagName.toLowerCase() == "label")
this.parentNode.style.display = "";
};
var hideEl = function() {
this.style.display = "none";
if(this.parentNode.tagName.toLowerCase() == "label")
this.parentNode.style.display = "none";
};That will hide both the elements and the <label> in which they're contained, if they are contained in a label (and if they're not, they really should be :)).

Note: Just looked at your code. You've missed the point of a label. Labels are supposed to be associated with a certain element. For example, where you have:
<input type="checkbox" name="TheWebDevelopmentPackage"> <label>The Web Development Package</label><br />It should really be:
<label><input type="checkbox" name="TheWebDevelopmentPackage">The Web Development Package</label><br />Your page should probably be:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
<title>A Title</title>

<style type="text/css">
form#weboptions label {
display: block;
}
</style>

<script type="text/javascript">
window.onload = function() {
setupDependencies("weboptions");
};

function setupDependencies() {
var showEl = function() {
this.style.display = "";
if(this.parentNode.tagName.toLowerCase() == "label")
this.parentNode.style.display = "";
};
var hideEl = function() {
this.style.display = "none";
if(this.parentNode.tagName.toLowerCase() == "label")
this.parentNode.style.display = "none";
};
var calcDeps = function() {
for(var i = 0, e = this.elements; i < e.length; ++i)
for(var j = 0, f = e[i].className.split(' '); j < f.length; ++j)
if(f[j].indexOf("depends-") === 0)
if(!e[f[j].substr(8)].checked || e[f[j].substr(8)].disabled) {
e[i].hide();
break;
} else e[i].show();
else if(f[j].indexOf("conflicts-") === 0)
if(e[f[j].substr(10)].checked && !e[f[j].substr(10)].disabled) {
e[i].hide();
break;
} else e[i].show();
};
var changeHandler = function() {
this.form.calculateDependencies();
};
for(var i = 0; i < arguments.length; ++i) {
for(var j = 0, e = window.document.forms[arguments[i]].elements; j < e.length; ++j) {
e[j].onchange = changeHandler;
e[j].hide = hideEl;
e[j].show = showEl;
}

window.document.forms[arguments[i]].calculateDependencies = calcDeps;
window.document.forms[arguments[i]].calculateDependencies();
}
}
</script>

</head>

<body>

<form action="" name="weboptions" id="weboptions">
<p>
<label><input type="checkbox" name="TheWebDevelopmentPackage"> The Web Development Package</label>
<label><input type="checkbox" name="TheWebDesignPackage"> The Web Design Package</label>
<label><input type="checkbox" name="TheWebHostingPackage"> The Web Hosting Package</label>
<label><input type="checkbox" name="TheDomainRegistrationPackage"> The Domain Registration Package</label>
<label><input type="checkbox" name="TheSearchEngineOptimizationPackage"> The Search Engine Optimization Package</label>
</p>

<p>
<label>Domain Name: <input type="text" name="DomainName" class="conflicts-TheWebDesignPackage
conflicts-TheWebHostingPackage conflicts-TheSearchEngineOptimizationPackage"></label>


</form>

</body>
</html>Note that there's no option for "or." If you want it to display when x is checked OR y is checked, you just have to make it conflict with all the other options.

Always make sure you're using valid HTML (http://validator.w3.org/) before using scripts, especially DOM-aware scripts like this one. Failure to do so can result in extremely unpredictable behaviour.

Paintball24
07-28-2006, 07:03 PM
Wow. That works great. :D Thanks a bunch man!

But, one more question...
Say, someone wanted to purchase two packages at once. Let's say the The Domain Registration Package and The Search Engine Optimization Package. Since there are the checkboxes they have the ability to select more than one option, but since the Domain input textbox conflicts with the The Search Engine Optimization Package, when you select both, the Domain input box doesn't appear. Is there a way to make it work so that, no matter what, if you've got The Domain Registration Package or The Web Development Package (because it includes everything) the domain input box shows up?

Oh, and one more not so important thing. If no checkboxes are selected is it possible to make none of the options show up?

Thanks again dude!

Twey
07-28-2006, 08:19 PM
Here we go:
<script type="text/javascript">
window.onload = function() {
setupDependencies("weboptions");
};

function setupDependencies() {
var showEl = function() {
this.style.display = "";
if(this.parentNode.tagName.toLowerCase() == "label")
this.parentNode.style.display = "";
};
var hideEl = function() {
this.style.display = "none";
if(this.parentNode.tagName.toLowerCase() == "label")
this.parentNode.style.display = "none";
this.hidden = true;
};
var calcDeps = function() {
for(var i = 0, e = this.elements; i < e.length; ++i) {
e[i].hidden = false;
for(var j = 0, f = e[i].className.split(' '); j < f.length; ++j)
if(f[j].indexOf("depends-") === 0) {
for(var k = 0, g = f[j].substr(8).split("-OR-"); k < g.length; ++k)
if(e[g[k]].checked) {
e[i].show();
break;
} else if(k + 1 == g.length)
e[i].hide();
} else if(f[j].indexOf("conflicts-") === 0)
if(e[f[j].substr(10)].checked) {
e[i].hide();
break;
}
if(!e[i].hidden) e[i].show();
}
};
var changeHandler = function() {
this.form.calculateDependencies();
};
for(var i = 0; i < arguments.length; ++i) {
for(var j = 0, e = window.document.forms[arguments[i]].elements; j < e.length; ++j) {
e[j].onchange = changeHandler;
e[j].hide = hideEl;
e[j].show = showEl;
}

window.document.forms[arguments[i]].calculateDependencies = calcDeps;
window.document.forms[arguments[i]].calculateDependencies();
}
}
</script>I've added a keyword: OR. You can now do things like this:
<label>Domain Name: <input type="text" name="DomainName" class="depends-TheDomainRegistrationPackage-OR-TheWebDevelopmentPackage">Note that OR doesn't work with conflicts because it's not necessary, you can simply use another conflicts class.

With some creative application, that will solve both your problems. :)

/EDIT: Wait, not quite ready yet -- couple of bugs got introduced there.

/FURTHER EDIT: Now ready. :)

Paintball24
07-28-2006, 08:36 PM
:D You're the King. Thank you so much for all this help! :D

But, I don't see how this solves my other problem...
I believe it would be in the Javascript, but I don't know how it would work....

Paintball24
07-28-2006, 08:43 PM
Oh wait, it does solve that prob. lol
Thanks man!

Twey
07-28-2006, 09:02 PM
There -- fixed and ready for use.

Paintball24
07-28-2006, 09:46 PM
Alright, wow. I'm having some radio button issues.

The radio button problems are in the Domain Registration Section. I'd like for the value picked (number of domains) to determine the number of Domain and Extension input boxes appear.

Can you please help me with this?
(Darn, and I thought I was problem-free ;) )


<html>

<head>
<title>A Title</title>

<style type="text/css">
form#weboptions label {
display: block;
}
</style>

<script type="text/javascript">
window.onload = function() {
setupDependencies("weboptions");
};

function setupDependencies() {
var showEl = function() {
this.style.display = "";
if(this.parentNode.tagName.toLowerCase() == "label")
this.parentNode.style.display = "";
};
var hideEl = function() {
this.style.display = "none";
if(this.parentNode.tagName.toLowerCase() == "label")
this.parentNode.style.display = "none";
this.hidden = true;
};
var calcDeps = function() {
for(var i = 0, e = this.elements; i < e.length; ++i) {
e[i].hidden = false;
for(var j = 0, f = e[i].className.split(' '); j < f.length; ++j)
if(f[j].indexOf("depends-") === 0) {
for(var k = 0, g = f[j].substr(8).split("-OR-"); k < g.length; ++k)
if(e[g[k]].checked) {
e[i].show();
break;
} else if(k + 1 == g.length)
e[i].hide();
} else if(f[j].indexOf("conflicts-") === 0)
if(e[f[j].substr(10)].checked) {
e[i].hide();
break;
}
if(!e[i].hidden) e[i].show();
}
};
var changeHandler = function() {
this.form.calculateDependencies();
};
for(var i = 0; i < arguments.length; ++i) {
for(var j = 0, e = window.document.forms[arguments[i]].elements; j < e.length; ++j) {
e[j].onchange = changeHandler;
e[j].hide = hideEl;
e[j].show = showEl;
}

window.document.forms[arguments[i]].calculateDependencies = calcDeps;
window.document.forms[arguments[i]].calculateDependencies();
}
}
</script>

</head>

<body>

<form action="" name="weboptions" id="weboptions">
<p>
<label><input type="checkbox" name="TheWebDevelopmentPackage"> The Web Development Package</label>
<label><input type="checkbox" name="TheWebDesignPackage"> The Web Design Package</label>
<label><input type="checkbox" name="TheWebHostingPackage"> The Web Hosting Package</label>
<label><input type="checkbox" name="TheDomainRegistrationPackage"> The Domain Registration Package</label>
<label><input type="checkbox" name="TheSearchEngineOptimizationPackage"> The Search Engine Optimization Package</label>
</p>

<!-- The Web Development Package -->
<!-- Inlcudes everything -->

<!-- The Web Design Package
<p>
<label>Description of Design: <textarea width="3" height="5" name="DescriptionofDesign" class="depends-TheWebDevelopmentPackage-OR-TheWebDesignPackage"></textarea></label>
</p>
-->

<!-- The Web Hosting Package -->
<p>
<label><input type="radio" name="HostingSpace" value="1GB" class="depends-TheWebDevelopmentPackage-OR-TheWebHostingPackage">1GB &nbsp;&nbsp;- $0.99/mo</label>
<label><input type="radio" name="HostingSpace" value="3GB" class="depends-TheWebDevelopmentPackage-OR-TheWebHostingPackage">3GB &nbsp;&nbsp;- $1.99/mo</label>
<label><input type="radio" name="HostingSpace" value="5GB" class="depends-TheWebDevelopmentPackage-OR-TheWebHostingPackage">5GB &nbsp;&nbsp;- $2.99/mo</label>
<label><input type="radio" name="HostingSpace" value="10GB" class="depends-TheWebDevelopmentPackage-OR-TheWebHostingPackage">10GB - $4.99/mo</label>
<label><input type="checkbox" name="AddaDomainName" class="depends-TheWebHostingPackage"> Add a Domain Name - $9.99/yr &nbsp;&nbsp;&nbsp;&nbsp;<font size="-2">For more Domain Names, you must purchase The Domain Registration Package. $9.99/yr ea.</font></label>
</p>

<!-- The Domain Registration Package -->
<p>
<label><input type="radio" checked name="Domain" value="1Domain" class="depends-TheWebDevelopmentPackage-OR-TheDomainRegistrationPackage"> 1 Domain &nbsp;- $9.99/yr ea.</label>
<label><input type="radio" name="Domain" value="2Domains" class="depends-TheWebDevelopmentPackage-OR-TheDomainRegistrationPackage"> 2 Domains - $9.99/yr ea.</label>
<label><input type="radio" name="Domain" value="3Domains" class="depends-TheWebDevelopmentPackage-OR-TheDomainRegistrationPackage"> 3 Domains - $9.99/yr ea.</label>
<label><input type="radio" name="Domain" value="4Domains" class="depends-TheWebDevelopmentPackage-OR-TheDomainRegistrationPackage"> 4 Domains - $9.99/yr ea.</label>
<label><input type="radio" name="Domain" value="5Domains" class="depends-TheWebDevelopmentPackage-OR-TheDomainRegistrationPackage"> 5 Domains - $9.99/yr ea. &nbsp;&nbsp;&nbsp;<font size="-2"><a href="mailto:webmaster@chillentertainment.com">Email Chill Entertainment for more domain names</a></font></label>

<label><br />Domain Name: <input type="text" name="DesiredDomainName1" class="depends-TheWebDevelopmentPackage-OR-TheDomainRegistrationPackage-OR-AddaDomainName"></label>
<label>Extension: <select name="Extension1" class="depends-TheWebDevelopmentPackage-OR-TheDomainRegistrationPackage-OR-AddaDomainName">
<option>.com</option>
<option>.org</option>
<option>.net</option>
</select></label>

<label><br />Domain Name: <input type="text" name="DesiredDomainName2" class="depends-2Domains"></label>
<label>Extension: <select name="Extension2" class="depends-2Domains">
<option>.com</option>
<option>.org</option>
<option>.net</option>
</select></label>

<label><br />Domain Name: <input type="text" name="DesiredDomainName3" class="depends-3Domains"></label>
<label>Extension: <select name="Extension3" class="depends-3Domains">
<option>.com</option>
<option>.org</option>
<option>.net</option>
</select></label>

<label><br />Domain Name: <input type="text" name="DesiredDomainName4" class="depends-4Domains"></label>
<label>Extension: <select name="Extension4" class="depends-4Domains">
<option>.com</option>
<option>.org</option>
<option>.net</option>
</select></label>


<label><br />Domain Name: <input type="text" name="DesiredDomainName5" class="depends-5Domains"></label>
<label>Extension: <select name="Extension5" class="depends-5Domains">
<option>.com</option>
<option>.org</option>
<option>.net</option>
</select></label>


</p>

<!-- The Search Engine Optimization Package -->
<p>
</p>


</form>

</body>
</html>

Twey
07-28-2006, 10:19 PM
<script type="text/javascript">
window.onload = function() {
setupDependencies("weboptions");
};

function getRadioValue(el) {
for(var i = 0; i < el.length; ++i)
if(el[i].checked) return el[i].value;
return null;
}

function setupDependencies() {
var showEl = function() {
this.style.display = "";
if(this.parentNode.tagName.toLowerCase() == "label")
this.parentNode.style.display = "";
};
var hideEl = function() {
this.style.display = "none";
if(this.parentNode.tagName.toLowerCase() == "label")
this.parentNode.style.display = "none";
this.hidden = true;
};
var calcDeps = function() {
for(var i = 0, e = this.elements; i < e.length; ++i) {
e[i].hidden = false;
for(var j = 0, f = e[i].className.split(' '); j < f.length; ++j)
if(f[j].indexOf("radiodepend-") === 0) {
var n = f[j].split('-'),
v = n[2];
n = n[1];
if(getRadioValue(e[n]) == v) {
e[i].show();
} else {
e[i].hide();
break;
}
} else if(f[j].indexOf("depends-") === 0) {
for(var k = 0, g = f[j].substr(8).split("-OR-"); k < g.length; ++k)
if(e[g[k]].checked) {
e[i].show();
break;
} else if(k + 1 == g.length)
e[i].hide();
} else if(f[j].indexOf("conflicts-") === 0)
if(e[f[j].substr(10)].checked) {
e[i].hide();
break;
}
if(!e[i].hidden) e[i].show();
}
};
var changeHandler = function() {
this.form.calculateDependencies();
};
for(var i = 0; i < arguments.length; ++i) {
for(var j = 0, e = window.document.forms[arguments[i]].elements; j < e.length; ++j) {
e[j].onchange = changeHandler;
e[j].hide = hideEl;
e[j].show = showEl;
}

window.document.forms[arguments[i]].calculateDependencies = calcDeps;
window.document.forms[arguments[i]].calculateDependencies();
}
}
</script>New class: radiodepend-<name>-<value>
No OR as yet, tell me if you need it.

Paintball24
07-28-2006, 10:33 PM
Great! Thanks.

PS. I don't think I'll need the -OR- because in a radio selection you've only got one choice. :p

Paintball24
07-28-2006, 10:39 PM
Whoops. lol
Never mind that.
I do need that -OR-.

lol

Paintball24
07-28-2006, 10:40 PM
No I don't.
omg. sorry about that.

Paintball24
07-28-2006, 11:24 PM
Weird...for some strange reason a domain input box shows up even when nothing is selected. It didn't used to do this. Did I screw something up?


<html>

<head>
<title>A Title</title>

<style type="text/css">
form#weboptions label {
display: block;
}
</style>

<script type="text/javascript">
window.onload = function() {
setupDependencies("weboptions");
};

function getRadioValue(el) {
for(var i = 0; i < el.length; ++i)
if(el[i].checked) return el[i].value;
return null;
}

function setupDependencies() {
var showEl = function() {
this.style.display = "";
if(this.parentNode.tagName.toLowerCase() == "label")
this.parentNode.style.display = "";
};
var hideEl = function() {
this.style.display = "none";
if(this.parentNode.tagName.toLowerCase() == "label")
this.parentNode.style.display = "none";
this.hidden = true;
};
var calcDeps = function() {
for(var i = 0, e = this.elements; i < e.length; ++i) {
e[i].hidden = false;
for(var j = 0, f = e[i].className.split(' '); j < f.length; ++j)
if(f[j].indexOf("radiodepend-") === 0) {
var n = f[j].split('-'),
v = n[2];
n = n[1];
if(getRadioValue(e[n]) == v) {
e[i].show();
} else {
e[i].hide();
break;
}
} else if(f[j].indexOf("depends-") === 0) {
for(var k = 0, g = f[j].substr(8).split("-OR-"); k < g.length; ++k)
if(e[g[k]].checked) {
e[i].show();
break;
} else if(k + 1 == g.length)
e[i].hide();
} else if(f[j].indexOf("conflicts-") === 0)
if(e[f[j].substr(10)].checked) {
e[i].hide();
break;
}
if(!e[i].hidden) e[i].show();
}
};
var changeHandler = function() {
this.form.calculateDependencies();
};
for(var i = 0; i < arguments.length; ++i) {
for(var j = 0, e = window.document.forms[arguments[i]].elements; j < e.length; ++j) {
e[j].onchange = changeHandler;
e[j].hide = hideEl;
e[j].show = showEl;
}

window.document.forms[arguments[i]].calculateDependencies = calcDeps;
window.document.forms[arguments[i]].calculateDependencies();
}
}
</script>

</head>

<body>

<form action="" name="weboptions" id="weboptions">
<p>
<label><input type="checkbox" name="TheWebDevelopmentPackage"> The Web Development Package</label>
<label><input type="checkbox" name="TheWebDesignPackage"> The Web Design Package</label>
<label><input type="checkbox" name="TheWebHostingPackage"> The Web Hosting Package</label>
<label><input type="checkbox" name="TheDomainRegistrationPackage"> The Domain Registration Package</label>
<label><input type="checkbox" name="TheSearchEngineOptimizationPackage"> The Search Engine Optimization

Package</label>
</p>

<!-- The Web Development Package -->
<!-- Inlcudes everything -->

<!-- The Web Design Package
<p>
<label>Description of Design: <textarea width="3" height="5" name="DescriptionofDesign" class="depends-

TheWebDevelopmentPackage-OR-TheWebDesignPackage"></textarea></label>
</p>
-->

<!-- The Web Hosting Package -->
<p>
<label><input type="radio" name="HostingSpace" value="1GB" class="depends-TheWebDevelopmentPackage-OR-

TheWebHostingPackage">1GB &nbsp;&nbsp;- 20GB of Bandwidth - $0.99/mo</label>
<label><input type="radio" name="HostingSpace" value="3GB" class="depends-TheWebDevelopmentPackage-OR-

TheWebHostingPackage">3GB &nbsp;&nbsp;- 20GB of Bandwidth - $1.99/mo</label>
<label><input type="radio" name="HostingSpace" value="5GB" class="depends-TheWebDevelopmentPackage-OR-

TheWebHostingPackage">5GB &nbsp;&nbsp;- 20GB of Bandwidth - $2.99/mo</label>
<label><input type="radio" name="HostingSpace" value="10GB" class="depends-TheWebDevelopmentPackage-OR-

TheWebHostingPackage">10GB - 20GB of Bandwidth - $4.99/mo</label>
<label><input type="checkbox" name="AddaDomainName" class="depends-TheWebHostingPackage conflicts-

TheWebDevelopmentPackage conflicts-TheDomainRegistrationPackage"> Add a Domain Name - $9.99/yr

&nbsp;&nbsp;&nbsp;&nbsp;<font size="-2">For more Domain Names, you must purchase The Domain Registration Package.

$9.99/yr ea.</font></label>
</p>

<!-- The Domain Registration Package -->
<p>
<label><input type="radio" checked name="Domain" value="1Domain" class="depends-TheWebDevelopmentPackage-

OR-TheDomainRegistrationPackage"> 1 Domain &nbsp;- $9.99/yr ea.</label>
<label><input type="radio" name="Domain" value="2Domains" class="depends-TheWebDevelopmentPackage-OR-

TheDomainRegistrationPackage"> 2 Domains - $9.99/yr ea.</label>
<label><input type="radio" name="Domain" value="3Domains" class="depends-TheWebDevelopmentPackage-OR-

TheDomainRegistrationPackage"> 3 Domains - $9.99/yr ea.</label>
<label><input type="radio" name="Domain" value="4Domains" class="depends-TheWebDevelopmentPackage-OR-

TheDomainRegistrationPackage"> 4 Domains - $9.99/yr ea.</label>
<label><input type="radio" name="Domain" value="5Domains" class="depends-TheWebDevelopmentPackage-OR-

TheDomainRegistrationPackage"> 5 Domains - $9.99/yr ea. &nbsp;&nbsp;&nbsp;<font size="-2"><a

href="mailto:webmaster@chillentertainment.com">Email Chill Entertainment for more than 5 domain

names</a></font></label>

<label><br />Domain Name: <input type="text" name="DesiredDomainName1" class="depends-

TheWebDevelopmentPackage-OR-TheDomainRegistrationPackage-OR-AddaDomainName"></label>
<label>Extension: <select name="Extension1" class="depends-TheWebDevelopmentPackage-OR-

TheDomainRegistrationPackage-OR-AddaDomainName">
<option>.com</option>
<option>.org</option>
<option>.net</option>
</select></label>

<label><br />Domain Name: <input type="text" name="DesiredDomainName2" class="radiodepend-Domain-

2Domains"></label>
<label>Extension: <select name="Extension2" class="radiodepend-Domain-2Domains">
<option>.com</option>
<option>.org</option>
<option>.net</option>
</select></label>

<label><br />Domain Name: <input type="text" name="DesiredDomainName3" class="radiodepend-Domain-

3Domains"></label>
<label>Extension: <select name="Extension3" class="radiodepend-Domain-3Domains">
<option>.com</option>
<option>.org</option>
<option>.net</option>
</select></label>
<label><br />Domain Name: <input type="text" name="DesiredDomainName3" class="radiodepend-Domain-

3Domains"></label>
<label>Extension: <select name="Extension3" class="radiodepend-Domain-3Domains">
<option>.com</option>
<option>.org</option>
<option>.net</option>
</select></label>

<label><br />Domain Name: <input type="text" name="DesiredDomainName4" class="radiodepend-Domain-

4Domains"></label>
<label>Extension: <select name="Extension4" class="radiodepend-Domain-4Domains">
<option>.com</option>
<option>.org</option>
<option>.net</option>
</select></label>
<label><br />Domain Name: <input type="text" name="DesiredDomainName4" class="radiodepend-Domain-

4Domains"></label>
<label>Extension: <select name="Extension4" class="radiodepend-Domain-4Domains">
<option>.com</option>
<option>.org</option>
<option>.net</option>
</select></label>
<label><br />Domain Name: <input type="text" name="DesiredDomainName4" class="radiodepend-Domain-

4Domains"></label>
<label>Extension: <select name="Extension4" class="radiodepend-Domain-4Domains">
<option>.com</option>
<option>.org</option>
<option>.net</option>
</select></label>


<label><br />Domain Name: <input type="text" name="DesiredDomainName5" class="radiodepend-Domain-

5Domains"></label>
<label>Extension: <select name="Extension5" class="radiodepend-Domain-5Domains">
<option>.com</option>
<option>.org</option>
<option>.net</option>
</select></label>
<label><br />Domain Name: <input type="text" name="DesiredDomainName5" class="radiodepend-Domain-

5Domains"></label>
<label>Extension: <select name="Extension5" class="radiodepend-Domain-5Domains">
<option>.com</option>
<option>.org</option>
<option>.net</option>
</select></label>
<label><br />Domain Name: <input type="text" name="DesiredDomainName5" class="radiodepend-Domain-

5Domains"></label>
<label>Extension: <select name="Extension5" class="radiodepend-Domain-5Domains">
<option>.com</option>
<option>.org</option>
<option>.net</option>
</select></label>
<label><br />Domain Name: <input type="text" name="DesiredDomainName5" class="radiodepend-Domain-

5Domains"></label>
<label>Extension: <select name="Extension5" class="radiodepend-Domain-5Domains">
<option>.com</option>
<option>.org</option>
<option>.net</option>
</select></label>


</p>

<!-- The Search Engine Optimization Package -->
<p>
</p>


</form>

</body>
</html>

Twey
07-28-2006, 11:44 PM
Yes, here:
<label><br />Domain Name: <input type="text" name="DesiredDomainName1" class="depends-

TheWebDevelopmentPackage-OR-TheDomainRegistrationPackage-OR-AddaDomainName"></label>No linebreaks or spaces are allowed between portions of the class. Between classes is fine, but not inside them.

Paintball24
07-29-2006, 05:44 AM
Oh, alright. Thanks again man!

Paintball24
07-29-2006, 05:54 AM
Alright, I found some more bugs...
Hopefully these would be easy to fix.

Test out this code in a browser.
Check "The Domain Registration Package".
Select the "5 Domains" radio button.
And deselect "The Domain Registration Package" checkbox.

Four of the domain input boxes still remain.

Can you help me on this?


<html>

<head>
<title>A Title</title>

<style type="text/css">
form#weboptions label {
display: block;
}
</style>

<script type="text/javascript">
window.onload = function() {
setupDependencies("weboptions");
};

function getRadioValue(el) {
for(var i = 0; i < el.length; ++i)
if(el[i].checked) return el[i].value;
return null;
}

function setupDependencies() {
var showEl = function() {
this.style.display = "";
if(this.parentNode.tagName.toLowerCase() == "label")
this.parentNode.style.display = "";
};
var hideEl = function() {
this.style.display = "none";
if(this.parentNode.tagName.toLowerCase() == "label")
this.parentNode.style.display = "none";
this.hidden = true;
};
var calcDeps = function() {
for(var i = 0, e = this.elements; i < e.length; ++i) {
e[i].hidden = false;
for(var j = 0, f = e[i].className.split(' '); j < f.length; ++j)
if(f[j].indexOf("radiodepend-") === 0) {
var n = f[j].split('-'),
v = n[2];
n = n[1];
if(getRadioValue(e[n]) == v) {
e[i].show();
} else {
e[i].hide();
break;
}
} else if(f[j].indexOf("depends-") === 0) {
for(var k = 0, g = f[j].substr(8).split("-OR-"); k < g.length; ++k)
if(e[g[k]].checked) {
e[i].show();
break;
} else if(k + 1 == g.length)
e[i].hide();
} else if(f[j].indexOf("conflicts-") === 0)
if(e[f[j].substr(10)].checked) {
e[i].hide();
break;
}
if(!e[i].hidden) e[i].show();
}
};
var changeHandler = function() {
this.form.calculateDependencies();
};
for(var i = 0; i < arguments.length; ++i) {
for(var j = 0, e = window.document.forms[arguments[i]].elements; j < e.length; ++j) {
e[j].onchange = changeHandler;
e[j].hide = hideEl;
e[j].show = showEl;
}

window.document.forms[arguments[i]].calculateDependencies = calcDeps;
window.document.forms[arguments[i]].calculateDependencies();
}
}
</script>

</head>

<body>

<form action="" name="weboptions" id="weboptions">
<p>
<label><input type="checkbox" name="TheWebDevelopmentPackage"> The Web Development Package</label>
<label><input type="checkbox" name="TheWebDesignPackage"> The Web Design Package</label>
<label><input type="checkbox" name="TheWebHostingPackage"> The Web Hosting Package</label>
<label><input type="checkbox" name="TheDomainRegistrationPackage"> The Domain Registration Package</label>
<label><input type="checkbox" name="TheSearchEngineOptimizationPackage"> The Search Engine Optimization

Package</label>
</p>

<!-- The Web Development Package -->
<!-- Inlcudes everything -->

<!-- The Web Design Package
<p>
<label>Description of Design: <textarea width="3" height="5" name="DescriptionofDesign" class="depends-

TheWebDevelopmentPackage-OR-TheWebDesignPackage"></textarea></label>
</p>
-->

<!-- The Web Hosting Package -->
<p>
<label><input type="radio" name="HostingSpace" value="1GB" class="depends-TheWebDevelopmentPackage-OR-

TheWebHostingPackage">1GB &nbsp;&nbsp;- 20GB of Bandwidth - $0.99/mo</label>
<label><input type="radio" name="HostingSpace" value="3GB" class="depends-TheWebDevelopmentPackage-OR-

TheWebHostingPackage">3GB &nbsp;&nbsp;- 20GB of Bandwidth - $1.99/mo</label>
<label><input type="radio" name="HostingSpace" value="5GB" class="depends-TheWebDevelopmentPackage-OR-

TheWebHostingPackage">5GB &nbsp;&nbsp;- 20GB of Bandwidth - $2.99/mo</label>
<label><input type="radio" name="HostingSpace" value="10GB" class="depends-TheWebDevelopmentPackage-OR-

TheWebHostingPackage">10GB - 20GB of Bandwidth - $4.99/mo</label>
<label><input type="checkbox" name="AddaDomainName" class="depends-TheWebHostingPackage conflicts-

TheWebDevelopmentPackage conflicts-TheDomainRegistrationPackage"> Add a Domain Name - $9.99/yr

&nbsp;&nbsp;&nbsp;&nbsp;<font size="-2">For more Domain Names, you must purchase The Domain Registration Package.

$9.99/yr ea.</font></label>
</p>

<!-- The Domain Registration Package -->
<p>
<label><input type="radio" checked name="Domain" value="1Domain" class="depends-TheWebDevelopmentPackage-

OR-TheDomainRegistrationPackage"> 1 Domain &nbsp;- $9.99/yr ea.</label>
<label><input type="radio" name="Domain" value="2Domains" class="depends-TheWebDevelopmentPackage-OR-

TheDomainRegistrationPackage"> 2 Domains - $9.99/yr ea.</label>
<label><input type="radio" name="Domain" value="3Domains" class="depends-TheWebDevelopmentPackage-OR-

TheDomainRegistrationPackage"> 3 Domains - $9.99/yr ea.</label>
<label><input type="radio" name="Domain" value="4Domains" class="depends-TheWebDevelopmentPackage-OR-

TheDomainRegistrationPackage"> 4 Domains - $9.99/yr ea.</label>
<label><input type="radio" name="Domain" value="5Domains" class="depends-TheWebDevelopmentPackage-OR-

TheDomainRegistrationPackage"> 5 Domains - $9.99/yr ea. &nbsp;&nbsp;&nbsp;<font size="-2"><a

href="mailto:webmaster@chillentertainment.com">Email Chill Entertainment for more than 5 domain

names</a></font></label>


<label>Domain Name: <input type="text" name="DesiredDomainName1" class="depends-TheWebDevelopmentPackage-

OR-TheDomainRegistrationPackage-OR-AddaDomainName"></label>
<label>Extension: <select name="Extension1" class="depends-TheWebDevelopmentPackage-OR-

TheDomainRegistrationPackage-OR-AddaDomainName">
<option>.com</option>
<option>.org</option>
<option>.net</option>
</select></label>

<label>Domain Name: <input type="text" name="DesiredDomainName2" class="radiodepend-Domain-

2Domains"></label>
<label>Extension: <select name="Extension2" class="radiodepend-Domain-2Domains">
<option>.com</option>
<option>.org</option>
<option>.net</option>
</select></label>

<label>Domain Name: <input type="text" name="DesiredDomainName3" class="radiodepend-Domain-

3Domains"></label>
<label>Extension: <select name="Extension3" class="radiodepend-Domain-3Domains">
<option>.com</option>
<option>.org</option>
<option>.net</option>
</select></label>
<label>Domain Name: <input type="text" name="DesiredDomainName3" class="radiodepend-Domain-

3Domains"></label>
<label>Extension: <select name="Extension3" class="radiodepend-Domain-3Domains">
<option>.com</option>
<option>.org</option>
<option>.net</option>
</select></label>



<label>Domain Name: <input type="text" name="DesiredDomainName4" class="radiodepend-Domain-

4Domains"></label>
<label>Extension: <select name="Extension4" class="radiodepend-Domain-4Domains">
<option>.com</option>
<option>.org</option>
<option>.net</option>
</select></label>
<label>Domain Name: <input type="text" name="DesiredDomainName4" class="radiodepend-Domain-

4Domains"></label>
<label>Extension: <select name="Extension4" class="radiodepend-Domain-4Domains">
<option>.com</option>
<option>.org</option>
<option>.net</option>
</select></label>
<label>Domain Name: <input type="text" name="DesiredDomainName4" class="radiodepend-Domain-

4Domains"></label>
<label>Extension: <select name="Extension4" class="radiodepend-Domain-4Domains">
<option>.com</option>
<option>.org</option>
<option>.net</option>
</select></label>


<label>Domain Name: <input type="text" name="DesiredDomainName5" class="radiodepend-Domain-

5Domains"></label>
<label>Extension: <select name="Extension5" class="radiodepend-Domain-5Domains">
<option>.com</option>
<option>.org</option>
<option>.net</option>
</select></label>
<label>Domain Name: <input type="text" name="DesiredDomainName5" class="radiodepend-Domain-

5Domains"></label>
<label>Extension: <select name="Extension5" class="radiodepend-Domain-5Domains">
<option>.com</option>
<option>.org</option>
<option>.net</option>
</select></label>
<label>Domain Name: <input type="text" name="DesiredDomainName5" class="radiodepend-Domain-

5Domains"></label>
<label>Extension: <select name="Extension5" class="radiodepend-Domain-5Domains">
<option>.com</option>
<option>.org</option>
<option>.net</option>
</select></label>
<label>Domain Name: <input type="text" name="DesiredDomainName5" class="radiodepend-Domain-

5Domains"></label>
<label>Extension: <select name="Extension5" class="radiodepend-Domain-5Domains">
<option>.com</option>
<option>.org</option>
<option>.net</option>
</select></label>


</p>

<!-- The Search Engine Optimization Package -->
<p>
</p>


</form>

</body>
</html>

Twey
07-29-2006, 06:34 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
<title>A Title</title>

<style type="text/css">
form#weboptions label {
display: block;
}
</style>

<script type="text/javascript">
window.onload = function() {
setupDependencies("weboptions");
};

function getRadioValue(el) {
for(var i = 0; i < el.length; ++i)
if(el.checked) return el[i].value;
return null;
}

function setupDependencies() {
var showEl = function() {
this.style.display = "";
if(this.parentNode.tagName.toLowerCase() == "label")
this.parentNode.style.display = "";
};
var hideEl = function() {
this.style.display = "none";
if(this.parentNode.tagName.toLowerCase() == "label")
this.parentNode.style.display = "none";
this.hidden = true;
};
var calcDeps = function() {
for(var i = 0, e = this.elements; i < e.length; ++i) {
e[i].hidden = false;
for(var j = 0, f = e[i].className.split(' '); j < f.length; ++j)
if(f[j].indexOf("depends-") === 0) {
for(var k = 0, g = f[j].substr(8).split("-OR-"); k < g.length; ++k)
if(g[k].indexOf("-IS-") === -1) {
if(!e[g[k]])
alert("Warning: Non-existent dependency on " + e[i].name + ".");
else if(e[g[k]].checked) break;
else if(k + 1 == g.length)
e[i].hide();
} else {
var n = g[k].split("-IS-"),
v = n[1];
n = n[0];
if(!e[n])
alert("Warning: Non-existent dependency on " + e[i].name + ".");
else
if(
(getRadioValue(e[n]) == v) ||
(e[n].value == v)
) break;
else if(k + 1 == g.length) {
e[i].hide();
}
}
} else if(f[j].indexOf("conflicts-") === 0) {
if(f[j].indexOf("-IS-") === -1) {
if(!e[f[j].substr(10)])
alert("Warning: Non-existent confliction on " + e[i].name + ".");
else if(e[f[j].substr(10)].checked) {
e[i].hide();
break;
}
} else {
var n = f[j].substr(10).split("-IS-"),
v = n[1];
n = n[0];
if(!e[n])
alert("Warning: Non-existent confliction on " + e[i].name + ".");
else {
if(getRadioValue(e[n]) == v || e[n].value == v) {
e[i].hide();
break;
}
}
}
}
if(!e[i].hidden) e[i].show();
}
};
var changeHandler = function() {
this.form.calculateDependencies();
};
for(var i = 0; i < arguments.length; ++i) {
for(var j = 0, e = window.document.forms[arguments[i]].elements; j < e.length; ++j) {
e[j].onchange = changeHandler;
e[j].hide = hideEl;
e[j].show = showEl;
}

window.document.forms[arguments[i]].calculateDependencies = calcDeps;
window.document.forms[arguments[i]].calculateDependencies();
}
}
</script>

</head>

<body>

<form action="" name="weboptions" id="weboptions">
<p>
<label><input type="checkbox" name="TheWebDevelopmentPackage"> The Web Development Package</label>
<label><input type="checkbox" name="TheWebDesignPackage"> The Web Design Package</label>
<label><input type="checkbox" name="TheWebHostingPackage"> The Web Hosting Package</label>
<label><input type="checkbox" name="TheDomainRegistrationPackage"> The Domain Registration Package</label>
<label><input type="checkbox" name="TheSearchEngineOptimizationPackage"> The Search Engine Optimization Package</label>
</p>

<!-- The Web Development Package -->
<!-- Inlcudes everything -->

<!-- The Web Design Package
<p>
<label>Description of Design: <textarea width="3" height="5" name="DescriptionofDesign" class="depends-TheWebDevelopmentPackage-OR-TheWebDesignPackage"></textarea></label>
</p>
-->

<!-- The Web Hosting Package -->
<p>
<label><input type="radio" name="HostingSpace" value="1GB" class="depends-TheWebDevelopmentPackage-OR-TheWebHostingPackage">1GB &nbsp;&nbsp;- 20GB of Bandwidth - $0.99/mo</label>
<label><input type="radio" name="HostingSpace" value="3GB" class="depends-TheWebDevelopmentPackage-OR-TheWebHostingPackage">3GB &nbsp;&nbsp;- 20GB of Bandwidth - $1.99/mo</label>
<label><input type="radio" name="HostingSpace" value="5GB" class="depends-TheWebDevelopmentPackage-OR-TheWebHostingPackage">5GB &nbsp;&nbsp;- 20GB of Bandwidth - $2.99/mo</label>
<label><input type="radio" name="HostingSpace" value="10GB" class="depends-TheWebDevelopmentPackage-OR-TheWebHostingPackage">10GB - 20GB of Bandwidth - $4.99/mo</label>
<label><input type="checkbox" name="AddaDomainName" class="depends-TheWebHostingPackage conflicts-TheWebDevelopmentPackage conflicts-TheDomainRegistrationPackage"> Add a Domain Name - $9.99/yr

&nbsp;&nbsp;&nbsp;&nbsp;<font size="-2">For more Domain Names, you must purchase The Domain Registration Package.

$9.99/yr ea.</font></label>
</p>

<!-- The Domain Registration Package -->
<p>
<label><input type="radio" checked name="Domain" value="1Domain" class="depends-TheWebDevelopmentPackage-OR-TheDomainRegistrationPackage"> 1 Domain &nbsp;- $9.99/yr ea.</label>
<label><input type="radio" name="Domain" value="2Domains" class="depends-TheWebDevelopmentPackage-OR-TheDomainRegistrationPackage"> 2 Domains - $9.99/yr ea.</label>
<label><input type="radio" name="Domain" value="3Domains" class="depends-TheWebDevelopmentPackage-OR-TheDomainRegistrationPackage"> 3 Domains - $9.99/yr ea.</label>
<label><input type="radio" name="Domain" value="4Domains" class="depends-TheWebDevelopmentPackage-OR-TheDomainRegistrationPackage"> 4 Domains - $9.99/yr ea.</label>
<label><input type="radio" name="Domain" value="5Domains" class="depends-TheWebDevelopmentPackage-OR-TheDomainRegistrationPackage"> 5 Domains - $9.99/yr ea. &nbsp;&nbsp;&nbsp;<font size="-2"><a href="mailto:webmaster@chillentertainment.com">Email Chill Entertainment for more than 5 domain names</a></font></label>


<label>Domain Name: <input type="text" name="DesiredDomainName1" class="depends-TheWebDevelopmentPackage-OR-TheDomainRegistrationPackage-OR-AddaDomainName"></label>
<label>Extension: <select name="Extension1" class="depends-TheWebDevelopmentPackage-OR-TheDomainRegistrationPackage-OR-AddaDomainName">
<option>.com</option>
<option>.org</option>
<option>.net</option>
</select></label>

<label>Domain Name: <input type="text" name="DesiredDomainName2" class="conflicts-Domain-IS-1Domain depends-TheWebDevelopmentPackage-OR-TheDomainRegistrationPackage-OR-AddaDomainName"></label>
<label>Extension: <select name="Extension2" class="conflicts-Domain-IS-1Domain depends-TheWebDevelopmentPackage-OR-TheDomainRegistrationPackage-OR-AddaDomainName">
<option>.com</option>
<option>.org</option>
<option>.net</option>
</select></label>

<label>Domain Name: <input type="text" name="DesiredDomainName3" class="conflicts-Domain-IS-1Domain conflicts-Domain-IS-2Domains depends-TheWebDevelopmentPackage-OR-TheDomainRegistrationPackage-OR-AddaDomainName"></label>
<label>Extension: <select name="Extension3" class="conflicts-Domain-IS-1Domain conflicts-Domain-IS-2Domains depends-TheWebDevelopmentPackage-OR-TheDomainRegistrationPackage-OR-AddaDomainName">
<option>.com</option>
<option>.org</option>
<option>.net</option>
</select></label>

<label>Domain Name: <input type="text" value="4" name="DesiredDomainName4" class="depends-Domain-IS-4Domains-OR-Domain-IS-5Domains depends-TheWebDevelopmentPackage-OR-TheDomainRegistrationPackage-OR-AddaDomainName"></label>
<label>Extension: <select name="Extension4" class="depends-Domain-IS-4Domains-OR-Domain-IS-5Domains depends-TheWebDevelopmentPackage-OR-TheDomainRegistrationPackage-OR-AddaDomainName">
<option>.com</option>
<option>.org</option>
<option>.net</option>
</select></label>

<label>Domain Name: <input type="text" name="DesiredDomainName5" class="depends-Domain-IS-5Domains depends-TheWebDevelopmentPackage-OR-TheDomainRegistrationPackage-OR-AddaDomainName"></label>
<label>Extension: <select name="Extension5" class="depends-Domain-IS-5Domains depends-TheWebDevelopmentPackage-OR-TheDomainRegistrationPackage-OR-AddaDomainName">
<option>.com</option>
<option>.org</option>
<option>.net</option>
</select></label>


</p>

<!-- The Search Engine Optimization Package -->
<p>
</p>


</form>

</body>
</html>That problem was due to the way you'd set up dependencies :) While looking at it, though, I realised that to do your domain names setup would require either an OR or a conflict for radio options, so I removed radiodepend and replaced it with -IS-. Syntax:
depends-[i]name-IS-valueThis works with "conflicts" as well, and should function with any type of input.

Do you use an IDE or a text editor that inserts line breaks (like Microsoft Notepad with "Word Wrap" enabled)? It seems that whenever you post some code, a fresh bunch of line breaks appear where they shouldn't be :)

Please do tell me if you find any more problems, since this script is getting to the level of complexity at which I'd consider submitting it to DD (although I pity the poor people who'll try to mod it...).

Paintball24
07-29-2006, 10:05 PM
Alright, great. Thank you.
Yes, I used Notepad with WordWrap enabled for this code.

Great, it works perfectly, except for one problem I noticed earlier before (, but for some reason I forgot to post it).

Test out this code in a browser.
Check "The Web Hosting Package".
Select the "Add a Domain" checkboxes.
And deselect "The Web Hosting Package" checkbox.

The domain input box still remains.

Twey
07-29-2006, 10:46 PM
Because that's how you coded it. You explicitly said:
<label>Domain Name: <input type="text" name="DesiredDomainName1" class="depends-TheWebDevelopmentPackage-OR-TheDomainRegistrationPackage-OR-AddaDomainName"></label>
If you want to uncheck boxes when they're hidden, add these lines to the hideEl function:
var hideEl = function() {
this.style.display = "none";
if(typeof this.checked !== "undefined") this.checked = false;
else this.value = "";
if(this.parentNode.tagName.toLowerCase() == "label")
this.parentNode.style.display = "none";
this.hidden = true;
};
I suggest you disable WordWrap. It seems to be rather indiscriminate about where it puts its linebreaks.

Paintball24
07-30-2006, 01:23 AM
Awesome. Thanks for everything dude.
It works great. :)

I need to learn Javascript. lol

Paintball24
07-31-2006, 07:52 PM
Oh, ugh...this script doesn't seem to work in Internet Explorer...

Can you help me with this?

Twey
07-31-2006, 08:15 PM
Argh, no, it doesn't?

He tells me this AFTER I've put it on my site and submitted it to DD :p I probably should have tested myself, I guess.

Paintball24
07-31-2006, 08:26 PM
Yea, you have to refresh in order to see the form elements appear.
Darn.
Are you gonna be able to fix this?

Twey
07-31-2006, 08:33 PM
Yep, all fixed now, in the version on my site (http://www.twey.co.uk/?q=forms). The syntax is a little different, but the placement is the same, so a search-and-replace should work fine. I've probably added some features too, compared to this one, though I can't remember exactly what. I'd advise you to get that copy, but if you really don't want to change all those classes, the bug in question can be fixed by finding:
e[j].onchange = changeHandler;and replacing it with:

e[j].onchange = e[j].onclick = e[j].onfocus = e[j].onblur = e[j].onkeydown = e[j].onkeyup = changeHandler;IE doesn't support the "onchange" event properly, so we have to call the function for each action that might cause the value to change. I actually fixed this earlier (in the site version) but I repeatedly used e[i] instead of e[j], resulting in the fix not working. Oops :o

Paintball24
08-01-2006, 07:58 PM
Awesome. Thanks man.

Twey
08-01-2006, 08:19 PM
Thanks for giving me the inspiration to write another script -- if I get enough more sufficiently complex to warrant display, I'll have to start categorising them. :p

Paintball24
08-01-2006, 10:15 PM
Awesome. I do have one question though.
Why is there an automatic line break after each input box?

Twey
08-01-2006, 10:41 PM
Actually, it's after each label. That's due to the CSS block in the head.

Paintball24
08-01-2006, 11:05 PM
Duh...
Wow, I haven't done something that stupid in a while....

Paintball24
08-06-2006, 04:17 AM
Alright, I've thought of one last idea.

I wonder if we could make this form include some sort of anchor in it. Just in like regular HTML anchors.
the <a name""></a> thing Maybe we could have the form include this like:


<a href="www.mywebsite.com/form#select12inchpizza">Buy the 12" Pizza!</a>

You know?
Think this is possible?

Twey
08-06-2006, 12:59 PM
If you have a label around a hidden input element, you can put whatever you like in that label (at least, I think anchors are valid in a label), and when you hide the hidden input, the label will disappear too.

Paintball24
08-06-2006, 02:52 PM
I don't get it. How could that help me do this.
Hmm... Let me restate this.

You're at www.pizzapalace.com. They have a form using this script. On the homepage, you see and click on the link that says "Buy the 12" Pizza!".

And the code for that anchor is:

<a href="www.pizzapalace.com/form#select12inchpizza">Buy the 12" Pizza!</a>

When you click on this, it will take you to the form page and automatically have the 12" pizza selected.

Paintball24
08-13-2006, 05:19 AM
Any help?

Snorkle?
08-13-2006, 05:39 AM
this code below makes it so where you click on a link and more options appear,
it can also be edited so where u can click on the link then more link options come down.

give it a try:


<html>
<head>
<script type="text/javascript">

function toggleMenu(currMenu) {
if (document.getElementById) {
thisMenu = document.getElementById(currMenu).style
if (thisMenu.display == "block") {
thisMenu.display = "none"
}
else {
thisMenu.display = "block"
}
return.false
}
else {
return true
}
}

</script>
<style type="text/css">
<!--

.menu {display:none; margin-left:20px}

-->

</style>
</head>
<body bgcolor="#FFFFFF">
<h1>Your First Text</h1>
</h1>
<a href="page1.html" onclick="returntoggleMenu('menu1')">Link</a>
</h3>
<span class="menu" id="menu1">
/*Edit these words for when they click the link this will appear below it*/
</span>
<h3>
</body>
</html>

Sorry If It Doesnt Work, It Worth A Try!

Twey
08-13-2006, 12:49 PM
Ah, I see. Inside the window.onload block, try:
var selectEls = window.location.href.substr(window.location.href.indexOf("#") + 1).split(",");
for(var i = 0, f = document.forms; i < f.length; ++i) {
for(var j = 0; j < selectEls.length; ++j)
if(f[i].elements[selectEls[j]]) f[i].elements[selectEls[j]].checked = true;
f[i].calculateDependencies();
}

Paintball24
08-13-2006, 04:14 PM
Okay, but now I'm confused. Where/What do I put in the code to link to a form selection?

Twey
08-13-2006, 04:28 PM
Just like you said:

<a href="www.pizzapalace.com/form#select12inchpizza">Buy the 12" Pizza!</a>Assuming that there's a form element with the name "select12inchpizza".

Paintball24
08-13-2006, 04:29 PM
Wow, great, that's easy ;)
Gimme one sec.

Paintball24
08-13-2006, 04:33 PM
It's not quite working right. When I put everything in and then click on the link, the supposed to be checked box isn't checked and all of the options available appear.

Any ideas?

Paintball24
08-13-2006, 04:35 PM
Maybe I didn't put the code in correctly:


<!--
<style type="text/css">
form#weboptions label {
display: block;
}
</style>
-->

<script type="text/javascript">
window.onload = function() {
var selectEls = window.location.href.substr(window.location.href.indexOf("#") + 1).split(",");
for(var i = 0, f = document.forms; i < f.length; ++i) {
for(var j = 0; j < selectEls.length; ++j)
if(f[i].elements[selectEls[j]]) f[i].elements[selectEls[j]].checked = true;
f[i].calculateDependencies();
}
setupDependencies("weboptions");
};

function getRadioValue(el) {
for(var i = 0; i < el.length; ++i)
if(el[i].checked) return el[i].value;
return null;
}

function setupDependencies() {
var showEl = function() {
this.style.display = "";
if(this.parentNode.tagName.toLowerCase() == "label")
this.parentNode.style.display = "";
};
var hideEl = function() {
this.style.display = "none";
if(typeof this.checked !== "undefined") this.checked = false;
else this.value = "";
if(this.parentNode.tagName.toLowerCase() == "label")
this.parentNode.style.display = "none";
this.hidden = true;
};
var calcDeps = function() {
for(var i = 0, e = this.elements; i < e.length; ++i) {
e[i].hidden = false;
for(var j = 0, f = e[i].className.split(' '); j < f.length; ++j)
if(f[j].indexOf("depends-") === 0) {
for(var k = 0, g = f[j].substr(8).split("-OR-"); k < g.length; ++k)
if(g[k].indexOf("-IS-") === -1) {
if(!e[g[k]])
alert("Warning: Non-existent dependency on " + e[i].name + ".");
else if(e[g[k]].checked) break;
else if(k + 1 == g.length)
e[i].hide();
} else {
var n = g[k].split("-IS-"),
v = n[1];
n = n[0];
if(!e[n])
alert("Warning: Non-existent dependency on " + e[i].name + ".");
else
if(
(getRadioValue(e[n]) == v) ||
(e[n].value == v)
) break;
else if(k + 1 == g.length) {
e[i].hide();
}
}
} else if(f[j].indexOf("conflicts-") === 0) {
if(f[j].indexOf("-IS-") === -1) {
if(!e[f[j].substr(10)])
alert("Warning: Non-existent confliction on " + e[i].name + ".");
else if(e[f[j].substr(10)].checked) {
e[i].hide();
break;
}
} else {
var n = f[j].substr(10).split("-IS-"),
v = n[1];
n = n[0];
if(!e[n])
alert("Warning: Non-existent confliction on " + e[i].name + ".");
else {
if(getRadioValue(e[n]) == v || e[n].value == v) {
e[i].hide();
break;
}
}
}
}
if(!e[i].hidden) e[i].show();
}
};
var changeHandler = function() {
this.form.calculateDependencies();
};
for(var i = 0; i < arguments.length; ++i) {
for(var j = 0, e = window.document.forms[arguments[i]].elements; j < e.length; ++j) {
e[j].onchange = e[j].onclick = e[j].onfocus = e[j].onblur = e[j].onkeydown = e[j].onkeyup = changeHandler;
e[j].hide = hideEl;
e[j].show = showEl;
}

window.document.forms[arguments[i]].calculateDependencies = calcDeps;
window.document.forms[arguments[i]].calculateDependencies();
}
}
</script>

Twey
08-13-2006, 05:10 PM
That looks OK. What about the form?

Paintball24
08-13-2006, 05:52 PM
I can't put it all in one post, so I just attached the file.

Paintball24
08-14-2006, 07:55 PM
See anything wrong?

Twey
08-14-2006, 08:16 PM
Come to think of it, I prefer this version:
for(var i = 0, f = document.forms, l = window.location.href.substr(window.location.href.indexOf("?") + 1).split(","); i < f.length; ++i) {
for(var j = 0; j < l; ++j)
if(f[i].elements[l[j]]) f[i].elements[l[j]].checked = true;
if(f[i].calculateDependencies) f[i].calculateDependencies();
}That allows for other forms and causes ? to be used instead of #, so you can link to it from the same page (using # doesn't cause the page to be reloaded so the code isn't fired).

Paintball24
08-14-2006, 08:21 PM
Alright, now this still doesn't work correctly.
The link takes you to the page, but the item isn't selected.


getaquote.html?selectTheWebDevelopmentPackage
is the correct format, right?

Twey
08-14-2006, 08:36 PM
Nope, just:
getaquote.html?TheWebDevelopmentPackage

Paintball24
08-14-2006, 09:07 PM
Nope. :P
The same thing happens.

Twey
08-14-2006, 09:09 PM
Hmm?
Can you provide a link? It worked fine when I did it.

Paintball24
08-14-2006, 09:11 PM
ok, hold on

Paintball24
08-14-2006, 09:14 PM
http://chillentertainment.com/beta/services.html under "The Web Development Package" paragraph is the link that says "GET!".

Or click right here. (http://chillentertainment.com/beta/getaquote.html?TheWebDevelopmentPackage)

Twey
08-14-2006, 09:29 PM
Aaaah -- what a daft typo :)
for(var i = 0, f = document.forms, l = window.location.href.substr(window.location.href.indexOf("?") + 1).split(","); i < f.length; ++i) {
for(var j = 0; j < l.length; ++j)
if(f[i].elements[l[j]]) f[i].elements[l[j]].checked = true;
if(f[i].calculateDependencies) f[i].calculateDependencies();
}Very stylish site -- I like the design a lot. However, don't use XHTML (http://www.hixie.ch/advocacy/xhtml), and validate it (http://validator.w3.org/check?uri=http://chillentertainment.com/beta/getaquote.html). :)

Paintball24
08-14-2006, 09:44 PM
Awesome. Thanks again for everything here man. I really appreciate it. There's not that many people out there to put that amount of effort at work. (for free). Thanks. :)

:) I'm glad you like the site.
Yea, yea, all the other pages are validated. I haven't gotten around to checking that one yet.
*Notice the /beta? :p

Twey
08-14-2006, 09:55 PM
There's not that many people out there to put that amount of effort at work. (for free). Thanks.Eh? Effort? Where? :p
Yea, yea, all the other pages are validated. I haven't gotten around to checking that one yet.
*Notice the /beta? :pLol, OK. But read the article on XHTML too.

Paintball24
08-14-2006, 10:57 PM
But read the article on XHTML too.

I did. I don't quite understand it's point. So, what if I need to put application/xhtml-xml, or whatever.

Twey
08-14-2006, 11:06 PM
If you do, it will be parsed as XHTML. But IE won't be able to read it, because it doesn't support XHTML.

If you don't, it's parsed as badly-written HTML, and you'd be better off sticking with valid HTML in the first place.

Paintball24
08-14-2006, 11:07 PM
True...Damn, IE sucks. (as if that wasn't already completely obvious)

pkcidstudio
02-08-2007, 04:52 PM
Twey, using what you did in this post, I have a easy one for you. I believe I must be missing something small. Could you take a look and let me know what you think?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script language="javascript">

function message() {
if (document.donationType.donation[0].checked == true)
{
alert("You will make a onetime donation?")
}
else if (document.donationType.donation[1].checked == true)
{
alert("You will make a monthly donation?")
}
</SCRIPT>
</head>

<body>
<FORM name="donationType">
Type of donation:
<input type="radio" name="donation" value="1" onClick="message()">onetime<br>
<input type="radio" name="donation" value="2" onClick="message()">monthly<br>
</FORM>

basically once it works i am going to put a field in each of the alerts for people to fill out. The problem I am getting is it is only reading one of the "if's" not doing the "if else"

jscheuer1
02-08-2007, 05:09 PM
. . . Could you take a look and let me know what you think?

code removed
basically once it works i am going to put a field in each of the alerts for people to fill out. The problem I am getting is it is only reading one of the "if's" not doing the "if else"

It worked fine here once I corrected the fact that the function had no closing brace. However, it can be simplified and cleaned up quite a bit, perhaps even more than:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<script type="text/javascript">

function message(){
if (document.donationType.donation[0].checked)
alert("You will make a onetime donation?")
else if (document.donationType.donation[1].checked)
alert("You will make a monthly donation?")
}

</script>
</head>

<body>
<form name="donationType">
Type of donation:<br>
<input type="radio" name="donation" value="1" onclick="message()">onetime<br>
<input type="radio" name="donation" value="2" onclick="message()">monthly<br>
</form>
</body>
</html>

pkcidstudio
02-08-2007, 05:17 PM
Thanks that works great, would you recommend having people donate through an alert or have it show up right next to the radio buttons? (personal or professional preference of course)

If you would do it another way could you show how you would do it?

jscheuer1
02-08-2007, 06:11 PM
I think I would change the alerts to confirms and branch the script according to the response. If the confirm is accepted, open the appropriate page or pop up the appropriate content for that type of donation. Something like so:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<script type="text/javascript">

function message(){
document.getElementById('onetime').style.display='none';
document.getElementById('monthly').style.display='none';
var monthly=false;
var onetime=false;
if (document.donationType.donation[0].checked)
onetime=confirm("You will make a onetime donation?")
else if (document.donationType.donation[1].checked)
monthly=confirm("You will make a monthly donation?")
if(onetime)
document.getElementById('onetime').style.display='';
else if(monthly)
document.getElementById('monthly').style.display='';
}
onload=message;
</script>
</head>

<body>
<form name="donationType">
Type of donation:<br>
<script type="text/javascript">
if(document.getElementById){
document.write('<input type="radio" name="donation" value="1" onclick="message();">onetime<br>');
document.write('<input type="radio" name="donation" value="2" onclick="message();">monthly<br>');
}
</script>
<span id="monthly">monthly:<input type="text" name="monthly"></span>
<span id="onetime">onetime:<input type="text" name="onetime"></span>
</form>
</body>
</html>

Notes: I scripted the creation of the radio buttons because, without javascript, they won't do anything. This way (combined with only hiding the input text fields onload) makes the form usable to non-javascript enabled browsers.

Shotgun Ninja
02-09-2007, 02:59 PM
So, what's the site name? I mean, you are setting up a hosting site, and many people here like hosting.