JavaScript Development
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
 
User Name:
Password:
Remember me
 



Go Back   Dev Articles Community ForumsProgrammingJavaScript Development

Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
Thread Tools Search this Thread Display Modes
 
Unread Dev Articles Community Forums Sponsor:
  #1  
Old July 20th, 2004, 03:37 PM
Pierpont Pierpont is offline
Registered User
Dev Articles Newbie (0 - 499 posts)
 
Join Date: Jul 2004
Posts: 14 Pierpont User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
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

Reply With Quote
  #2  
Old July 20th, 2004, 03:56 PM
BurhanKhan BurhanKhan is offline
Contributing User
Dev Articles Newbie (0 - 499 posts)
 
Join Date: Apr 2004
Posts: 44 BurhanKhan User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 15
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

Reply With Quote
  #3  
Old July 20th, 2004, 04:20 PM
Pierpont Pierpont is offline
Registered User
Dev Articles Newbie (0 - 499 posts)
 
Join Date: Jul 2004
Posts: 14 Pierpont User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
I think we're thinking the same thing...

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

Reply With Quote
  #4  
Old July 20th, 2004, 05:43 PM
BurhanKhan BurhanKhan is offline
Contributing User
Dev Articles Newbie (0 - 499 posts)
 
Join Date: Apr 2004
Posts: 44 BurhanKhan User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 15
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>

Reply With Quote
  #5  
Old July 21st, 2004, 09:32 AM
Pierpont Pierpont is offline
Registered User
Dev Articles Newbie (0 - 499 posts)
 
Join Date: Jul 2004
Posts: 14 Pierpont User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
Object expected error

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


Reply With Quote
  #6  
Old July 21st, 2004, 10:37 AM
dhouston's Avatar
dhouston dhouston is offline
Contributing User
Dev Articles Beginner (1000 - 1499 posts)
 
Join Date: May 2003
Location: Tennessee
Posts: 1,355 dhouston User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 17
Send a message via ICQ to dhouston
It's the lack of quotes around your values in the js.
__________________
Please don't PM me asking for solutions outside the scope of a thread.
Keeping all responses in a thread stands to help others who come along later,
which is after all what this forum's all about.

Reply With Quote
  #7  
Old July 21st, 2004, 11:01 AM
Pierpont Pierpont is offline
Registered User
Dev Articles Newbie (0 - 499 posts)
 
Join Date: Jul 2004
Posts: 14 Pierpont User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
is null or not an object

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

Reply With Quote
  #8  
Old July 21st, 2004, 11:11 AM
dhouston's Avatar
dhouston dhouston is offline
Contributing User
Dev Articles Beginner (1000 - 1499 posts)
 
Join Date: May 2003
Location: Tennessee
Posts: 1,355 dhouston User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 17
Send a message via ICQ to dhouston
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.

Reply With Quote
  #9  
Old July 21st, 2004, 11:20 AM
Pierpont Pierpont is offline
Registered User
Dev Articles Newbie (0 - 499 posts)
 
Join Date: Jul 2004
Posts: 14 Pierpont User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
Thanks

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

Reply With Quote
  #10  
Old July 21st, 2004, 11:35 AM
Pierpont Pierpont is offline
Registered User
Dev Articles Newbie (0 - 499 posts)
 
Join Date: Jul 2004
Posts: 14 Pierpont User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
one more question

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

Reply With Quote
  #11  
Old July 21st, 2004, 11:53 AM
dhouston's Avatar
dhouston dhouston is offline
Contributing User
Dev Articles Beginner (1000 - 1499 posts)
 
Join Date: May 2003
Location: Tennessee
Posts: 1,355 dhouston User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 17
Send a message via ICQ to dhouston
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?

Reply With Quote
  #12  
Old July 21st, 2004, 12:28 PM
Pierpont Pierpont is offline
Registered User
Dev Articles Newbie (0 - 499 posts)
 
Join Date: Jul 2004
Posts: 14 Pierpont User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
here's the whole thing

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>

Reply With Quote
  #13  
Old July 21st, 2004, 04:49 PM
dhouston's Avatar
dhouston dhouston is offline
Contributing User
Dev Articles Beginner (1000 - 1499 posts)
 
Join Date: May 2003
Location: Tennessee
Posts: 1,355 dhouston User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 17
Send a message via ICQ to dhouston
Heh, it was a tricky assignment/comparison operator typo. The line

Code:
if(document.form.furnstyle.value = "GS Sofa")


near the beginning should be

Code:
if(document.form.furnstyle.value == "GS Sofa")


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.

Reply With Quote
  #14  
Old July 22nd, 2004, 09:23 AM
Pierpont Pierpont is offline
Registered User
Dev Articles Newbie (0 - 499 posts)
 
Join Date: Jul 2004
Posts: 14 Pierpont User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
Ahhhhh.....

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

Reply With Quote
Reply

Viewing: Dev Articles Community ForumsProgrammingJavaScript Development > Drop down selection returns results in other form fields


Developer Shed Advertisers and Affiliates


Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
Rate This Thread:


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox
Forum Jump

Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
  
 


Powered by: vBulletin Version 3.0.5
Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.

© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap