How to create an order form using drop down selection boxes

[Palehorse]

I'd like to apologize upfront for me saying "I'm not a programer", I'm sure you all hear this a hundred times a day. Unfortunately, in this case, it's true. I've been working on trying to figure out a particular problem I've had for years and now I find I need to get it situated as soon as possible. So I turn to you kind folks, the experts, to give me a little hand holding, guidance and wisdom as to how to accomplish what it is I'm trying to do. I'm not looking for someone to actually DO it for me, but rather some help to exorcise this demon that started out as what I thought would take only a short bit of scripting to accomplish. So, here goes:

The Project:
Make an order form with drop down boxes the customer can choose variables from and have each box turn on ONLY after the previous box has had a choice made from it. Then the total is displayed in a hidden box under all the choices the client makes. If the client changes their minds, then they can edit each box individually and get a new price based on their choices.

The Requirements:
1). Form must be able to use a MySql database for the information recalled.
2). Form must be able to be placed anywhere on the page.
3). Page must load quickly and preferably not refresh after every choice. (negotiable)

What I have so far:
I can build a form using HTML and have pretty much built one as an example of what I want it to look like and a general idea of how I want it to work on this page:

http://steincreative.com/web-content/pages/bizcardorderplain.html

I can also build (somewhat), a MySql database holding the information for the form to retrieve. I'm beginning to understand MySql better and will concentrate further on this when I find out the best solution for the project.

My questions are:
1). What is the best solution for my project?
I've read on here and on other boards of similar projects using PHP, but it looks a LOT like it's going to require coding from AJAX and Java as well. Is this true? Should I be looking for a multi-coding solution or would PHP serve me all on it's own?

2). Am I on the right track?
I've gathered a few links to projects mentioned in this forum, but not being a programmer, I'm not entirely sure of the terminology to use when describing what it is I'm trying to do, so I'm not exactly sure that these following links are what I'm trying to do. I need some clarification on if these are the right path to follow:

http://bytes.com/topic/php/answers/4636-php-mysql-query-based-selected-form-optionhttp://bytes.com/topic/php/answers/4636-php-mysql-query-based-selected-form-option

http://bytes.com/topic/php/answers/790663-how-change-2nd-drop-down-contens-when-item-selected-first-dropdown-list

http://bytes.com/topic/javascript/answers/837435-populating-drop-down-menu-databse-onchnage-first-dropdown-without-refre

This is a link from one of the posts that shows how to use java script to regulate the drop down boxes so they only become active after the previous box is selected.

http://www.mattkruse.com/javascript/dynamicoptionlist/

3). Do I need to look into "populating " each field (drop down box) as they are selected, or do I do something different?

4). As I will need other forms that are similar in the same website, do I need different MySql databases to make each form work or can I just reference 1 database for ALL the forms?

5). Where do I go from here?
If I AM on the right track, how do I make the mentioned coding work for my situation? Is this a simple "get" or "post" command or am I really looking at something considerably more involved? (After reading a lot of postings, I think I already know the answer, just making sure). I've read a lot more postings on this forum, but the ones I listed above seem to come closest to what I'm trying to do.

So, and I know I'm leaving myself wide open on this one, what do you think I should do? I need to do this for myself rather than paying someone to do it for me. I need to know that I can do it, even just for the sake of my own satisfaction. I would really appreciate all the help I can get on this and look forward to learning something in the process. I thank you all ahead of time for your input.

Markus - Sorry if I posted this wrong. I didn't think there was any coding involved here so I didn't use the proper procedure I've read in one of your postings. I'll try not to screw up my posts in the future so you don't have to fix anything I do. Thank you.

[dlite922]

Palehorse, we barely get sincere requests like yours, although for something like this we'd generally respond with "be more specific about what doesn't work in your code" message, but I'll be nice and help a genuine fella out.

You are on a journey of learning. It's best to start out small.

First please know that Java and JavaScript (one word) are very different.
AJAX, is implemented with JavaScript. AJAX just refers to a small part of the language, the xmlhttprequest( ) function.

One more thing. PHP is a server-side language. You may have heard this a lot because every week we get 10 people asking to tie JavaScript with PHP. When a request is made to a page, say index.php, the web-server parses the code and returns any output (usually html) back to the browser. The web-server at this point completely forgets about your request. This is why it's called a state-less web. Unlike a desktop application (where you launch MS Word, you type something, it doesn't go away! the program stays active waiting for your next command).

the HTML that's returned could reference JavaScript. JavaScript has nothing to do with the server, It's all done with your desktop's processing power. You're browser executes the code. PHP doesn't know what JavaScript is, it might as well be HTML or XML, CSS or just plain /gibberish/ for all it cares.

Now that's out of the way, let's get to what you need to get this project done.

You need, at minimum, PHP, MySQL (1 database), HTML, and some minor JavaScript. I suggest you stay-away from Ajax until you get a handle on JavaScript basics first (many JS tutorials available on Google). Unfortunatly this means your page will have to refresh (make a call to the server) every time a box is selected/changed.

Here's a bird's eye view of whats going to happen on your page.
1. You request the main page, PHP just returns the HTML code since there's no processing to be done, Only the first drop down is filled in, the rest are not displayed or something like, "select from box1 first" or something

2. User selects something from the <select> box. using an attribute (javascript function) you should tell the server (php) what was selected. best way to do this is with the onchange="this. form.submit()" attribute call (hint: it goes right in the <select *here*></select> part of the select box). When somebody changes this box, whatever javascript is between those double quotes will get executed by the browser. in this case it says to submit the form (whatever the method is (get or post) that this select box is in. You should do this with GET to avoid headache that you will encounter with the browser back button later.

3. PHP "get"s the new request say Oooh! My first box has something selected, let me now populate the second box. So it goes to MySQL says, for example, give me all sub-items where main item = 'blah'. Once your turn the result the same

4. Once your last box is selected, the PHP should calculate the price. I'm sure you can grab this from MySQL and do some basic arithmetic in PHP.

You're Halfway there!!

Now that you did all that, what to do with the info? email it? put it in some other table in MySQL? So you need to submit the page one last time and have PHP do this final act and perhaps display another HTML, like a thank you page.

Sounds like a lot, but we can walk you through it wherever you get stuck. it actually might take less characters than this long post I wrote to do the whole thing!

Your homework. Create your first PHP page, grab something from the MySQL table and populate the first drop down box.

Let me know when that's done.







Dan

[dgourd]

dlite's explanation was very good. Especially his explanation of the differences between Java, Javascript, Ajax, server-side languages, and client-side languages. These are important concepts.

However, it might be a daunting task for you to have to learn a new language, Javascript, since you stated your problem is urgent. To get around the refreshing problem and having to learn javascript, there is a little trick I picked up a while back. You use an html tag called <iframe>. You surround only the textboxes with the <iframe></iframe> tags. What this does is it lets you refresh only the part of the webpage inbetween the iframe tags while the rest of the page stays the same.

I recommend looking here to learn more about frames and how to specifically implement them:

http://www.w3schools.com/html/html_frames.asp

[Palehorse]

Palehorse, we barely get sincere requests like yours, although for something like this we'd generally respond with "be more specific about what doesn't work in your code" message, but I'll be nice and help a genuine fella out.

You are on a journey of learning. It's best to start out small.

First please know that Java and JavaScript (one word) are very different.
AJAX, is implemented with JavaScript. AJAX just refers to a small part of the language, the xmlhttprequest( ) function.

One more thing. PHP is a server-side language. You may have heard this a lot because every week we get 10 people asking to tie JavaScript with PHP. When a request is made to a page, say index.php, the web-server parses the code and returns any output (usually html) back to the browser. The web-server at this point completely forgets about your request. This is why it's called a state-less web. Unlike a desktop application (where you launch MS Word, you type something, it doesn't go away! the program stays active waiting for your next command).

the HTML that's returned could reference JavaScript. JavaScript has nothing to do with the server, It's all done with your desktop's processing power. You're browser executes the code. PHP doesn't know what JavaScript is, it might as well be HTML or XML, CSS or just plain /gibberish/ for all it cares.

Now that's out of the way, let's get to what you need to get this project done.

You need, at minimum, PHP, MySQL (1 database), HTML, and some minor JavaScript. I suggest you stay-away from Ajax until you get a handle on JavaScript basics first (many JS tutorials available on Google). Unfortunatly this means your page will have to refresh (make a call to the server) every time a box is selected/changed.

Here's a bird's eye view of whats going to happen on your page.
1. You request the main page, PHP just returns the HTML code since there's no processing to be done, Only the first drop down is filled in, the rest are not displayed or something like, "select from box1 first" or something

2. User selects something from the <select> box. using an attribute (javascript function) you should tell the server (php) what was selected. best way to do this is with the onchange="this. form.submit()" attribute call (hint: it goes right in the <select *here*></select> part of the select box). When somebody changes this box, whatever javascript is between those double quotes will get executed by the browser. in this case it says to submit the form (whatever the method is (get or post) that this select box is in. You should do this with GET to avoid headache that you will encounter with the browser back button later.

3. PHP "get"s the new request say Oooh! My first box has something selected, let me now populate the second box. So it goes to MySQL says, for example, give me all sub-items where main item = 'blah'. Once your turn the result the same

4. Once your last box is selected, the PHP should calculate the price. I'm sure you can grab this from MySQL and do some basic arithmetic in PHP.

You're Halfway there!!

Now that you did all that, what to do with the info? email it? put it in some other table in MySQL? So you need to submit the page one last time and have PHP do this final act and perhaps display another HTML, like a thank you page.

Sounds like a lot, but we can walk you through it wherever you get stuck. it actually might take less characters than this long post I wrote to do the whole thing!

Your homework. Create your first PHP page, grab something from the MySQL table and populate the first drop down box.

Let me know when that's done.







Dan

OMG Thank you soo much!!! You have NO idea how much this means to me that someone would offer up so much info! To be honest, I expected to be completely flamed and told to go someplace else! But to have someone actually help in the capacity that you have is incredible! As I said, this has been a demon on my back for so long it's become part of my life and keeps me up at night like Neo from the Matrix. I can't thank you enough for the help and I'm diligently working on getting this right with you and everyones help. I'm really glad I stumbled upon this website. Thank you, Thank you, Thank you.

[Palehorse]

dlite's explanation was very good. Especially his explanation of the differences between Java, Javascript, Ajax, server-side languages, and client-side languages. These are important concepts.

However, it might be a daunting task for you to have to learn a new language, Javascript, since you stated your problem is urgent. To get around the refreshing problem and having to learn javascript, there is a little trick I picked up a while back. You use an html tag called <iframe>. You surround only the textboxes with the <iframe></iframe> tags. What this does is it lets you refresh only the part of the webpage inbetween the iframe tags while the rest of the page stays the same.

I recommend looking here to learn more about frames and how to specifically implement them:
http://www.w3schools.com/html/html_frames.asp

Dgourd, thank you too for your input. I am definately going to pursue your suggestion and once I get my homework done and I'm understanding this a bit more, I'll be looking at your suggestion on how to make things better. I can't thank both of you enough for the help. You guys are incredible!!

[dlite922]

I disagree with dgourd. iFrame is something a beginner should definitely stay away from.

They're usually used in bad practice web programming. There's always a better, cleaner alternative.

I can't think of any situation where it would be good to use them. There may be perhaps a few acceptable situation, but as a beginner it is best to not get use them. Once you learn their downfalls and understand their shortcomings, then you should (cautiously still) use them.



Dan

[Atli]

I would agree with Dan's last post. It's usually not a good idea to use iframes, at least not without knowing exactly why you are using the instead of the alternatives. - AJAX is what you should be using instead.

I understand you now wanting to take on a second programming language while just getting started with PHP, but if you want to do this without having to refresh the page, there is really no other way. You need client side code for that, and JavaScript is it.

On the bright side, both PHP and JavaScript are fairly easy to pick up, and they are similar in many ways :-)