Dynamic Forms

[Paintball24]

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]

Have a look at this: http://www.dynamicdrive.com/dynamici...ects/index.htm

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

[Paintball24]

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]

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]

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.

[Twey]

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

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

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 )

Thanks again.

[Twey]

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 )

It was a badly-applied scope, and a runaway dot. I hate that.

/EDIT: Did some performance tweaks.

[Paintball24]

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]

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>