Drop down selection returns results in other form fields

Hi,
I would like to create default form field selections that automatically
change to predetermined values when certain drop down menu selections
are chosen.

For Example:

Drop Down Menu: 1,2,3

Radio Button: 1,2,3

Checkbox: 1,2,3

I pick "1" from the drop down and the "1" choices from the radio button form
field and the checkbox form field are selected.

I tried some javascript for this but since I've had zero success with it and
I'm pretty much a newbie, I thought some advice from some people who know
what they're talking about might be a good idea before I waste any more time.
Thanks,
Pier

Please clear your question.

Is u want that " if u select an item from drop down menu, then radio button and check box should automatically selected to predefined values"?

If yes then reply. If no then clear your question.

Burhan

Yes, I think we're thinking the same thing. Basically, I want to be able to
select an item from a drop down menu and have that selection automatically
check checkboxes, radio buttons and select other options from other drop down
menus. I hope this makes my question more clear. And thank you for you response.
Pier

u can use this script

<script>
function Process () {
if(myform.mainDBox.value = 1)
{
myform.cb1.status=true;
myform.cb2.status=false;
myform.cb3.status=false;
myform.dbox.selectedIndex = 1;
}

.................................................. .
...... same for other options.............
.................................................. .
.
}
</script>

Your form name is myform and your other code should look like this:

<select name="mainDBox" onChange="Process()">
<option value="0" selected>-Choose Option-
<option value="1">OP 1
<option value="2">OP 2
<option value="3">OP 3</option>
</select> </P>
<P>
<br>
<INPUT type="checkbox" name="cb1" value="cb1">cb1
<INPUT type="checkbox" name="cb2" value="cb2">cb2
<INPUT type="checkbox" name="cb3" value="cb3">cb3 </P>
<P>
<select name="dbox">
<option value="0" selected >
<option value="1">Small
<option value="2">Medium
<option value="3">Large</option>
</select>

I tried what you suggested and I keep gettin an Object expected error.

Here's what I have:

<script>
function Process () {
if(form.furnstyle.value = GS Sofa)
{
form.backstyle.looseback.status=true;
form.backstyle.tightback.status=false;
form.furnsize.selectedIndex = 84 inches;
}
}
</script>

And the HTML:

<select name="furnstyle" onChange="Process ()">
<option value="">-Choose Style-
<option value="GS Sofa">GS Sofa
<option value="RF 95 Sofa">RF 95 Sofa
<option value="Donghia Sofa">Donghia Sofa
<option value="Custom Sofa">Custom Sofa
</select>

<select name="furnsize">
<option value="">-Choose Size-
<option value="60 inches">5'-0"(60")
<option value="66 inches">5'-6"(66")
<option value="72 inches">6'-0"(72")
<option value="78 inches">6'-6"(78")
<option value="84 inches">7'-0"(84")
<option value="90 inches">7'-6"(90")
<option value="96 inches">8'-0"(96")
<option value="102 inches">8'-6"(102")
<option value="Custom Length">Custom Length
</select>

<INPUT type="radio" name="backstyle" value="Looseback">loose back
<INPUT type="radio" name="backstyle" value="Tightback">tight back

Can you see what could be causing the error? Is it the spaces in my values?
Thanks,
Pier

It's the lack of quotes around your values in the js.

I made the changes and now I get this error:

document.form.backstyle.Looseback is null or not an object

This is the script:

<script>
function Process () {
if(document.form.furnstyle.value = "GS Sofa")
{
document.form.backstyle.Looseback.status="true";
document.form.backstyle.Tightback.status="false";
document.form.furnsize.selectedIndex = "84 inches";
}
}
</script>

Can you see where I'm going wrong?
Thank for the reply
Pier

Looseback isn't an object (it's a value of an object), so it can't have a status attribute (and status isn't a valid attribute I know of anyway). I think a basic HTML/js tutorial would make a big difference in your understanding of how to reference different elements and objects. To change the checked state of a radio group like this, I think you'd need to do something like document.form.backstyle[0].checked=true, where Looseback is the 0 element of the radio group array.

That makes sense. And your right, I need serious javascript help.
Thanks for the help. I'll see if I can get it working

I got it to work, sort of. Once I select GS Sofa, I can't select anything else. Is there an easy solution to this or is it tutorial time for me? Also, how difficult would it be to add extra "functions" to Process() so that other values in the main drop down menu return different results in the other form fields? Any answer would be appreciated. I aploigise for my javascript ignorance.
Pier

I'd have to see it actually in action to be able to help any further. Can you post the full code or a link?

It's long. Look for the relavant code in bold red. Thanks again.

<html><head><meta http-equiv="content-type" content="text/html; charset=UTF-8"><title>sofas</title>

<LINK REL=StyleSheet HREF="images/style.css" TYPE="text/css" MEDIA=screen>

<script language="javascript">

function BubbaGump(B,BQ){

if (BQ==1){
B.style.color='orange';
}

if (BQ==0){
B.style.color='gray';
}
}
</script>

<script>
function Process () {

if(document.form.furnstyle.value = "GS Sofa")
{
document.form.backstyle[0].checked="";
document.form.backstyle[1].checked="true";
document.form.furnsize.value = "84 inches";
}
}
</script>

<script>

function Disab (val) {

if(form.nailcbox.checked)
{form.nailstyle[0].disabled=false;
form.nailstyle[1].disabled=false;
form.nailstyle[2].disabled=false;
form.nailheadsize.disabled=false;
form.arm.disabled=false;
form.back.disabled=false;
form.base.disabled=false;
}
else
{form.nailstyle[0].disabled=true;
form.nailstyle[1].disabled=true;
form.nailstyle[2].disabled=true;
form.nailheadsize.disabled=true;
form.arm.disabled=true;
form.back.disabled=true;
form.base.disabled=true;
}
}
</script>

<script>

function Disab1 (val) {

if(form.legs.checked)
{form.legstyle.disabled=false;
form.casters.disabled=false;
}
else
{form.legstyle.disabled=true;
form.casters.disabled=true;
}
}
</script>

<script>
function Disab2 (val) {

if(form.fringe.checked)
{form.fringecolor.disabled=false;
form.fringelocation.disabled=false}
else
{form.fringecolor.disabled=true;
form.fringelocation.disabled=true}
}
</script>

<script>
function Disab3 (val) {

if(form.welt.checked)
{form.weltcolor.disabled=false;
form.weltlocation.disabled=false}
else
{form.weltcolor.disabled=true;
form.weltlocation.disabled=true}
}
</script>


<script type="text/JavaScript">
<!--
function changestate(myField)
{
document.getElementById(myField).disabled=(documen t.getElementById(myField).disabled)?false:true;
}
-->
</script>

</head>
<body bgcolor=rgb(200,200,200)>


<table cellspacing=0 cellpadding=10 align=center frame="border" border=1 bordercolor=rgb(75,75,75)>
<tr>
<td colspan=2 height=20>
<h1>furniture database</h1>
</td>
</tr>
<tr>
<td width=120 valign=top>
<a class=1>sofas</a>
<br>
<br>
<br>
<br>
<br>
<a href="chairs/index.html" onMouseOver="BubbaGump(this,1)" onMouseOut="BubbaGump(this,0)">chairs</a>
<br>
<br>
<br>
<br>
<br>
<a href="tables/index.html" onMouseOver="BubbaGump(this,1)" onMouseOut="BubbaGump(this,0)">tables</a>
<br>
<br>
<br>
<br>
<br>
<a href="misc/index.html" onMouseOver="BubbaGump(this,1)" onMouseOut="BubbaGump(this,0)">misc</a>
</td>

<td>



<FORM name="form" action="http://fileserver/furniture-database/form.asp" method="post">
<P>
<LABEL for="designer">Designer: </LABEL>
<select name="designer">
<option value="RJF">-Choose Designer-
<option value="Tiffany Eastman">Tiffany Eastman
<option value="Raymond Forehand">Raymond Forehand
<option value="Christina Lake">Christina Lake
<option value="Sarah Ponden">Sarah Ponden
</select>
<br>
<LABEL for="name">Client Name: </LABEL>
<INPUT type="text" name="name">
<BR>
<LABEL for="date">Date: </LABEL>
<INPUT type="text" name="date"><BR>
<LABEL for="furnstyle">Sofa Style: </LABEL>
<select name="furnstyle" onChange="Process ()">
<option value="">-Choose Style-
<option value="GS Sofa">GS Sofa
<option value="RF 95 Sofa">RF 95 Sofa
<option value="Donghia Sofa">Donghia Sofa
<option value="Custom Sofa">Custom Sofa
</select>

<LABEL for="furnsize">Sofa Size: </LABEL>
<select name="furnsize">
<option value="">-Choose Size-
<option value="60 inches">5'-0"(60")
<option value="66 inches">5'-6"(66")
<option value="72 inches">6'-0"(72")
<option value="78 inches">6'-6"(78")
<option value="84 inches">7'-0"(84")
<option value="90 inches">7'-6"(90")
<option value="96 inches">8'-0"(96")
<option value="102 inches">8'-6"(102")
<option value="Custom Length">Custom Length
</select>

<br>

<LABEL for="fabric">Fabric: </LABEL>
<INPUT type="text" name="fabric"><BR>

<p style="color: red">Options:</p>
<p class=1>
<u>Backstyle</u><br>
<INPUT type="radio" name="backstyle" value="Looseback">loose back
<INPUT type="radio" name="backstyle" value="Tightback">tight back

<select name="addback">
<option value="">-Additional Back Information-
<option value="(tufted)">tufted
<option value="(roll back)">roll back
</select>

<br><u>Armstyle</u><br>
<INPUT type="radio" name="armstyle" value="Curved Arm">Curved
<INPUT type="radio" name="armstyle" value="Square arm">Square
<INPUT type="radio" name="armstyle" value="Roll arm">Roll
<br><u>Seatstyle</u><br>
<INPUT type="radio" name="seatstyle" value="One cushion">one cushion
<INPUT type="radio" name="seatstyle" value="Two cushion">two cushion
<INPUT type="radio" name="seatstyle" value="Three cushion">three cushion
<br><u>Cushion Type</u><br>
<INPUT type="radio" name="cushiontype" value="(Regular cushion)" checked>Regular
<INPUT type="radio" name="cushiontype" value="(T-cushion)">T-cushion
<br>
<u>Fill:</u><br>
<INPUT type="radio" name="fillstyle" value="down fill">down
<INPUT type="radio" name="fillstyle" value="poly down fill">poly down
<select name="fill">
<option value="">-Choose Fill Ratio-
<option value="with 10/90">10/90
<option value="with 25/75">25/75
<option value="with 50/50">50/50
</select>
<br><u>Legs</u><br>
<INPUT type="checkbox" name="legs" value="legs" onClick="Disab1()" id="legs">legs
<select name="legstyle" disabled>
<option value="">-Choose Legstyle-
<option value="Square">Square
<option value="Round">Round
<option value="Turned">Turned
<option value="Tapered">Tapered
<option value="Recessed">Recessed
<option value="Custom">Custom
</select>
<INPUT type="checkbox" name="casters" value="casters" disabled onClick="changestate('casterstyle')">casters
<select name="casterstyle" id="casterstyle" disabled>
<option value="">-Choose Caster Finish-
<option value="with chrome">Chrome
<option value="with polished nickel">Polished nickel
<option value="with bronze">Bronze
<option value="with hidden">Hidden
<option value="with custom">Custom
</select>
<br><br><u>Details</u><br>
<INPUT type="checkbox" id="nailcbox" name="nailheads" value="nailheads" onClick="Disab()" unchecked>nailheads
<br>
<select name="nailheadsize" disabled>
<option value="">-Choose Size-
<option value="Small">Small
<option value="Medium">Medium
<option value="Large">Large
<option value="Custom">Custom
</select>
<br><br>
Nailhead Location:<br>
<INPUT type="checkbox" name="arm" value="arm," disabled>arm
<INPUT type="checkbox" name="back" value="back," disabled>back
<INPUT type="checkbox" name="base" value="base" disabled>base
<br><br>Nailhead Finish:
<br>&nbsp;&nbsp;
<INPUT type="radio" name="nailstyle" value="with chrome finish" id="nailstyle" disabled>chrome</input>
<INPUT type="radio" name="nailstyle" value="with polished nickel finish" id="nailstyle" disabled>polished nickel
<INPUT type="radio" name="nailstyle" value="with bronze finish" id="nailstyle" disabled>bronze
<br><br>
<INPUT type="checkbox" name="fringe" value="fringe" onClick="Disab2()">fringe<br>Color <INPUT type="text" name="fringecolor" disabled value="-Choose

color-"><BR>Fringe Location <INPUT type="text" name="fringelocation" value="location" disabled><br>
<INPUT type="checkbox" name="welt" value="welt" onClick="Disab3()">welt<br>Color <INPUT type="text" name="weltcolor" disabled value="-Choose color-"

id="weltcolor"><br>Welt Location <INPUT type="text" name="weltlocation" value="location" disabled><br>
<br><br>
Additional Comments:<br>

<TEXTAREA NAME="comments">
N/A
</TEXTAREA>
</p>

<INPUT type="submit" value="Submit" onclick="this.form.target='_blank';return true;"/> <INPUT type="reset" >
</P>
</FORM>

</td>
</tr>
</table>


</body>
</html>

Heh, it was a tricky assignment/comparison operator typo. The line



near the beginning should be



Note the double equal mark in the corrected code. Your code executes the function onchange. Using the assignment rather than the comparison typo sets the value of furnstyle to "GS Sofa" every time (so on every change), and the if tests whether or not the value was set, which it was, so the code inside the if always executes.

Thanks again. It's always the little details that end up driving me nuts. Works great now. It's doing exactly what I wanted.