Solved

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

Posted on 2003-12-01
5
203 Views
Last Modified: 2013-12-24
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
0
Comment
Question by:jbtipps
  • 2
  • 2
5 Comments
 
LVL 17

Assisted Solution

by:Tacobell777
Tacobell777 earned 250 total points
Comment Utility
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
 
LVL 25

Accepted Solution

by:
James Rodgers earned 250 total points
Comment Utility
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
 

Author Comment

by:jbtipps
Comment Utility
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
 

Author Comment

by:jbtipps
Comment Utility
just makeing the points higher
0
 
LVL 25

Expert Comment

by:James Rodgers
Comment Utility
thanks for the points!
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

This is a guide to setting up a new WHM/cPanel Server to be used for web hosting accounts. It is intended for web hosting company administrators and dedicated server owners. For under $99 per month (considering normal rate of Big Data Cetnters like …
Meet the world's only “Transparent Cloud™” from Superb Internet Corporation. Now, you can experience firsthand a cloud platform that consistently outperforms Amazon Web Services (AWS), IBM’s Softlayer, and Microsoft’s Azure when it comes to CPU and …
Internet Business Fax to Email Made Easy - With eFax Corporate (http://www.enterprise.efax.com), you'll receive a dedicated online fax number, which is used the same way as a typical analog fax number. You'll receive secure faxes in your email, fr…
Here's a very brief overview of the methods PRTG Network Monitor (https://www.paessler.com/prtg) offers for monitoring bandwidth, to help you decide which methods you´d like to investigate in more detail.  The methods are covered in more detail in o…

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now