Advanced HTML Forms

[objecterror]

I'm back!
This time with some thing that's a little advanced(atleast to me it is).
I'm working on a revamp of this business website Superb Technologies and, I want to add a form of list options for the customer to choose an option from.
Here is the source code I have so far:

<b>Find out your price</b>
<FORM NAME="DropDown">
<SELECT NAME="DDlinks" onChange="LinkUp(this.form)">
<OPTION>Select Television Type</OPTION>
<OPTION>LCD</OPTION>
<OPTION>DLP</OPTION>
<OPTION>PLASMA</OPTION>
</SELECT>
</FORM>

This is all good and fine, but, some customers may think LCD screens go as far as 70'' or plasma screens are as small as 40''. I want to eliminate selections as they make a selection, kind of grouping there options as they choose there television, the size and then the kind of service they want. Thanks in advance

 

[Yek]

Consider JQuery, it's probberly going to be your best bet in this situation as im not aware of HTML's power to do this entirely on it's own.

You can find out more info at jQuery: The Write Less, Do More, JavaScript Library

Let me know

Cheers,

~ Tkey

 

[CrazeD]

<script type="text/javascript">
function disableOption(index)
{
	switch (index.value)
	{
	case 'LCD':
		document.getElementById('40').disabled = false;
		document.getElementById('50').disabled = false;
		document.getElementById('60').disabled = false;
		document.getElementById('70').disabled = true;
	break;

	case 'DLP':
		document.getElementById('40').disabled = false;
		document.getElementById('50').disabled = false;
		document.getElementById('60').disabled = false;
		document.getElementById('70').disabled = false;
		
	break;

	case 'Plasma':
		document.getElementById('40').disabled = true;
		document.getElementById('50').disabled = false;
		document.getElementById('60').disabled = false;
		document.getElementById('70').disabled = false;
	break;	
	}
}

</script>

<form>
<select onchange="disableOption(this.options[this.selectedIndex]);">
<option value="">Select Television Type</option>
<option value="LCD" id="LCD">LCD</option>
<option value="DLP" id="DLP">DLP</option>
<option value="Plasma" id="Plasma">Plasma</option>
</select>
<br />
<select>
<option value="">Select Your Size</option>
<option value="40" id="40">40"</option>
<option value="50" id="50">50"</option>
<option value="60" id="60">60"</option>
<option value="70" id="70">70"</option>
</select>
</form>

Is this what you meant?

 

[objecterror]

Wow, that's exactly what I mean crazed, I was looking at the link provided by tkey, I can add and adjust the selections from here right?

 

[CrazeD]

Yes. If you understand basic HTML/JS, you should understand that code at least a little.

If you want to disable say, 60" and 70" when you click LCD, then on this part:

case 'LCD':
		document.getElementById('40').disabled = false;
		document.getElementById('50').disabled = false;
		document.getElementById('60').disabled = false;
		document.getElementById('70').disabled = true;
	break;

Change document.getElementById('60').disabled = false; to true.

If you want to add more TV types, just add them the same way I did, and then add a new case in the Javascript. Note that you'll have to tell all the other sizes to be true/false every time, because say you click LCD which disables 70", then you click Plasma, the 70" will still be disabled...so you have to turn it back on under the Plasma case.

 

[objecterror]

So like an on and off switch as long as I remember which category I'm looking at. I will be having fun with this. I just set up a merchant account online and making the page flow better with a little added complexity for the forms i'm using. thanks crazed

 

[Baez]

Object do you think you could send me the source of that?

 

[objecterror]

Object do you think you could send me the source of that?

Which source specifically? I have a few

 

[Baez]

What you have man . I didn't realize there was more than one. I want to get my xHTML skills higher. Too much studying of game programming and advanced ASP.NET right now.