Dynamic Form baside on if a yours has put a check in the box.

I have a list of upgrade option that a user can chose from.  Like hard drive, memeory, monitors and so on.   On the page it will have a list of check boxes for each option.   The dynamic part come in at time of when check boxis is clicked.   Ok, a user clicks on HD, saying he wants to upgrade his hardrive, at the point I would like to create a NEW list of check boxis basis on the option we have for HD sizes in our database.  The user then clicks on the size, sizes they would like.  After I have there specific upgrades i can take them to a new page to enter the quanity.  I know how to pull the data data form the froms after they are filled just now how to get them on the page.

I'm not sure on how well JavaScript and CF play together.  
Right now my from actions are posting to the same page.  Then i have cfif asking what is deffenid and then the data is made baised on that.

The problem is I cant use a form method to call a funtion that would create the new forms basad on the cfquery informaiton.  I'm not really even sure how to get a method to run a cfquery.
Can i create my own functions in CF to be called by a from method.  If I created my own tag, something, how i get it to run with the onclick.
I haven't see to many other peoples CF codeing so I'm really kinda lost on this one.  I know how it should work but not sure how to do it.
I know I cant use CF variable is Javascript and vice versa.
I know is a tough one.  It seems hard to bring the two together.

Thanks for your help
jbtippsAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Tacobell777Commented:
Hi jbtipps,

CF and Javascript go very well together, they are seperate programming languages. JavaScript is client side, ie. it runs in the clients browser, and CF is server side it runs on the server.

You can make CF talk to JS and vice versa, you do this with WDDX, look it up in the docs or visit www.openwddx.org

As for your need, it can be done with JavaScript, however you have to ask yourself first, do I expect all my clients to have JavaScript turned on, am I able to cater for all Browsers when using JavaScript, if the answer is still yet.

Then you retrieve all the data you need on one page, and in the first instance hide everything that only needs to be displayed when an option is choosen.

example:
HD 1 <input type="checkbox" value="hd1" onClick="var obj = document.getElementById('size'); obj.style.display = 'inline'; obj.style.visibility = 'visible'; "><br/>
HD 2 <input type="checkbox" value="hd2" onClick="var obj = document.getElementById('size'); obj.style.display = 'inline'; obj.style.visibility = 'visible'; ">

<div id="size" style="display: none; visibility: hidden;">
Size 1 [checkbox]<br/>
Size 2 [checkbox]<br/>
Size 3 [checkbox]
</div>

This is all just simple stuff to show you how it can be done, if you understand it all you should probably write js functions to do the hiding etc.

PS. I wrote all the code in here, so there might be an error somewhere

Hope it helps..
0
James RodgersWeb Applications DeveloperCommented:
what about hiding the sub data in a table and as the user makes a selection showing the subselection table?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<script>
function ShowSubGroup(objTable, strStatus){
      document.getElementById(objTable).style.display=strStatus;
}

</script>
      <title>Untitled</title>
</head>

<body>
<table name=" upgrades">
<tr>
   <td><input type="checkbox" name="hd" value="true" onClick="if (this.checked){ShowSubGroup('tblUpgHd', 'block')}else{ShowSubGroup('tblUpgHd', 'none')}"> Hard Drive<table id="tblUpgHd" style="display:none"><tr><td><input type="radio" name="hdUpgrade" value="40">40G</td></tr></table><td>
</tr>
<tr>
   <td><input type="checkbox" name="mon" value="true" onClick="if (this.checked){ShowSubGroup('tblUpgMon', 'block')}else{ShowSubGroup('tblUpgMon', 'none')}"> Monitor<table id="tblUpgMon" style="display:none"><tr><td><input type="radio" name="monUpgrade" value="21TFT">21" TFT</td></tr></table><td>
</tr>
</table>


</body>
</html>

you can populate teh tables dynamically
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
jbtippsAuthor Commented:
Thank you both for you answer.  I have never since justers_48 way to show/object before.  Kind cool.  I don't know what i was thinking.  I was just trying to make it alot harder then it was i guess.  
There is a nice little crossbrowers code I found at dhtmlcentral.com, if you guys and gals haven't checked that place out yet.  Its just a browers check then sets variables for the accessing properties.  Its in the header of all thier pages.  Not sure if that is kinda like a industry standerd or what.

I will deffently read up on WDDX as well.

Thank you both again.
0
jbtippsAuthor Commented:
just makeing the points higher
0
James RodgersWeb Applications DeveloperCommented:
thanks for the points!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Servers

From novice to tech pro — start learning today.