Javascript Help! Dropdown Form (possible php)

HI EXPERTS!

So it took me a while to make this form... You can see the form I have here:

http://www.djmgraphix.com/THE_ART_BUCKET/airbrush_apparel/design1.html

When you click on the NEXT button it goes to a PHP total page and then sends all of the information to paypal.

The reason it was so hard, is because paypal is a pain in the butt when it comes to submitting more than one total, or have products or services that you have to add up.

ANYWAYS... I would like to edit the form so when products are chosen from the, "PRODUCT OPTIONS" dropdown, the dropdowns underneath it change to fit the options there are available (colors, sizes etc....)  I've typed this up so you can see the options I'm looking for.

THANK YOU SO MUCH TO ANYONE WHO CAN HELP ME!

DJM





Product Options:
      Baby Onesies ($18.00)
      Baby Long-Sleeve ($18.00)
      Baby Bib ($10.00)
      Baby Short-Sleeve ($15.00)
      Youth Short-Sleeve (20.00)
      Mens Short-Sleeve ($20.00)
      Mens Long-Sleeve ($23.00)
      Mens Tank-Top ($22.00)
      Zip-Up Hoodie ($38.00)
      Hoodie ($32.00)
      Womens Short-Sleeve ($20.00)
      Womens Tank-Top ($22.00)
      Womens Long-Sleeve ($25.00)
      Womens Cheer Shorts ($22.00)
      Tote Bag ($20.00)
      Gym Bag ($25.00)
      Trucker Hat ($18.00)
      Can Koozie ($8.00)

The Following are the Dropdowns that I want to HIGHLIGHT or APPEAR if APPLICABLE TO THE PRODUCT Selected:

LETTERING STYLE, PLEASE SELECT DESTINATION, NAME FOR PERSONALIZATION, DESIGN COLORS YOU WANT TO SEE, and SPECIAL INSTRUCTIONS FOR THE ARTIST, will be included no matter what the product choice after the SIZES dropdown.


Baby Onesies ($18.00)
      Design Options:
            Design and Name on Front
            Design and Name on Back
            Design on Front and Name on Back (+$6.00)
            Design on Back and Name on Front (+$6.00)
      Colors:
            White
            Black
      Sizes:
            0-3 Months
            3-6 Months
            6-12 Months
            12-18 Months

Baby Long-Sleeve ($18.00)
      Design Options:
            Design and Name on Front
            Design and Name on Back
            Design on Front and Name on Back (+$6.00)
            Design on Back and Name on Front (+$6.00)
      Colors:
            White
            Black
            Lavender
            Baby Blue
      Sizes:
            0-3 Months
            3-6 Months
            6-12 Months
            12-18 Months

Baby Bib ($10.00)
      Colors:
            White
            Black
      Sizes:
            One Size

Baby Hat($10.00)
      Colors:
            White
            Black
      Sizes:
            One Size

Baby Short-Sleeve ($15.00)
      Design Options:
            Design and Name on Front
            Design and Name on Back
            Design on Front and Name on Back (+$6.00)
            Design on Back and Name on Front (+$6.00)
      Colors:
            White
      Sizes:
            12 Months
            18 Months
            2T

Youth Short-Sleeve (20.00)
      Design Options:
            Design and Name on Front
            Design and Name on Back
            Design on Front and Name on Back (+$6.00)
            Design on Back and Name on Front (+$6.00)
      Colors:
            White
      Sizes:
            XS
            Small
            Medium
            Large
            XL

Mens Short-Sleeve ($20.00)
      Design Options:
            Design and Name on Front
            Design and Name on Back
            Design on Front and Name on Back (+$6.00)
            Design on Back and Name on Front (+$6.00)
      Colors:
            White
            Black (+$10.00)
      Sizes:
            Small
            Medium
            Large
            XL
            2X (+$3.00)
            3X (+$3.00)

Mens Long-Sleeve ($23.00)
      Design Options:
            Design and Name on Front
            Design and Name on Back
            Design on Front and Name on Back (+$6.00)
            Design on Back and Name on Front (+$6.00)
      Colors:
            White
            Black (+$10.00)
      Sizes:
            Small
            Medium
            Large
            XL
            2X (+$3.00)
            3X (+$3.00)

Mens Tank-Top ($22.00)
      Design Options:
            Design and Name on Front
            Design and Name on Back
            Design on Front and Name on Back (+$6.00)
            Design on Back and Name on Front (+$6.00)
Colors:
            White
      Sizes:
            Small
            Medium
            Large
            XL

Zip-Up Hoodie ($38.00)
      Design Options:
            Design and Name on Front
            Design and Name on Back
            Design on Front and Name on Back (+$6.00)
            Design on Back and Name on Front (+$6.00)
      Colors:
            White
            Black (+$10.00)
      Sizes:
            Small
            Medium
            Large
            XL
            2X (+$3.00)
            3X (+$3.00)

Hoodie ($32.00)
            Design Options:
            Design and Name on Front
            Design and Name on Back
            Design on Front and Name on Back (+$6.00)
            Design on Back and Name on Front (+$6.00)
      Colors:
            White
            Black (+$10.00)
      Sizes:
            Small
            Medium
            Large
            XL
            2X (+$3.00)
            3X (+$3.00)

Womens Short-Sleeve ($22.00)
      Design Options:
            Design and Name on Front
            Design and Name on Back
            Design on Front and Name on Back (+$6.00)
            Design on Back and Name on Front (+$6.00)
Colors:
            White
      Sizes:
            Small
            Medium
            Large

Womens Tank-Top ($22.00)
      Design Options:
            Design and Name on Front
            Design and Name on Back
            Design on Front and Name on Back (+$6.00)
            Design on Back and Name on Front (+$6.00)
Colors:
            White
      Sizes:
            Small
            Medium
            Large
            XL

Womens Long-Sleeve ($25.00)
      Design Options:
            Design and Name on Front
            Design and Name on Back
            Design on Front and Name on Back (+$6.00)
            Design on Back and Name on Front (+$6.00)
      Colors:
            White
            Black (+$10.00)
      Sizes:
            Small
            Medium
            Large
      
Womens Cheer Shorts ($22.00)
      Design Options:
            Design and Name on Front
            Design and Name on Back
            Design on Front and Name on Back (+$6.00)
            Design on Back and Name on Front (+$6.00)
      Colors:
            Grey
      Sizes:
            XS
Small
            Medium
            Large
            XL

Tote Bag ($20.00)
      Design Options:
            Design and Name on Front
            Design and Name on Back
            Design on Front and Name on Back (+$6.00)
            Design on Back and Name on Front (+$6.00)
      Colors:
            White
            Natural
      Sizes:
            One Size

Gym Bag ($25.00)
      Design Options:
            Design and Name on Front
            Design and Name on Back
            Design on Front and Name on Back (+$6.00)
            Design on Back and Name on Front (+$6.00)
Colors:
            White
      Sizes:
            One Size

Trucker Hat ($18.00)
      Design Options:
            Design and Name on Front
Colors:
            White
            Blue/White
            Pink/White
            Black/White
      Sizes:
            One Size

Can Koozie ($8.00)
      Design Options:
            Design and Name on Front
Colors:
            White
      Sizes:
            One Size

DJMgraphixAsked:
Who is Participating?
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.

jmanGJHS97Commented:
Ok, so one way to do this is to "render" each sub-dropdown and just hide them all.  Then, show the one you want, based on what the user selects from the first box.

First snippet is the select tag of the parent box.  

Next, we have the JS function.  You will want to finish the arr values, based on whatever sub-dropdown names you choose.

Last is an example div around a child select boxes (fill in the actual options for the different ones).
<select name="product" onchange="toggleSubProducts(this);">
  <option value="Baby Onesies  23.00 ">Baby Onesies ($23.00)</option>
</select>
 
<script>
fuction toggleSubProducts(selectBox)
{
  var arr = new Array();
  arr[0] = 'onsies';
  arr[1] = 'long-sleeve';
 
  for (var i == 0; i < arr.length; i++)
  {
    if (this.selectedValue == arr[i])
    {
      document.getElementById(this.selectedValue).style.display == 'block';
    }
    else
    {
      document.getElementById(this.selectedValue).style.display == 'none';
    }
  }
}
</script>
 
<div name="onesies" id="onsies" style="display: none;">
<select name="onsies_options">
  <option value="Design and Name on Front">Design and Name on Front</option>
</select>
<select name="onsies_sizes">
  <option value="0-3 Months">0-3 Months</option>
</select>
<select name="onsies_color">
  <option value="White">White</option>
</select>
 
etc...

Open in new window

0
DJMgraphixAuthor Commented:
OK...
Your making it sound easy! ha...   I'm not the best at this stuff...  Will the form when hitting the next button still work on the next  orderprocess.php page?  It's imparative that that page stay the same so everything can send to PAYPAL appropriately...


0
jmanGJHS97Commented:
Yeah, since you're naming the dropdowns uniquely, when you submit the page, you'll have values in the "onesies_options" form element, so you can separate that from a different "_options" dropdown.

Found some type-o's in my last code.
<select name="product" onchange="toggleSubProducts(this);">
  <option value="Baby Onesies  23.00 ">Baby Onesies ($23.00)</option>
</select>
 
<script>
fuction toggleSubProducts(selectBox)
{
  var arr = new Array();
  arr[0] = 'onesies';
  arr[1] = 'long-sleeve';
 
  for (var i == 0; i < arr.length; i++)
  {
    if (this.selectedValue == arr[i])
    {
      document.getElementById(this.selectedValue).style.display == 'block';
    }
    else
    {
      document.getElementById(this.selectedValue).style.display == 'none';
    }
  }
}
</script>
 
<div name="onesies" id="onsies" style="display: none;">
<select name="onesies_options">
  <option value="Design and Name on Front">Design and Name on Front</option>
</select>
<select name="onesies_sizes">
  <option value="0-3 Months">0-3 Months</option>
</select>
<select name="onesies_color">
  <option value="White">White</option>
</select>
 
etc...

Open in new window

0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

jmanGJHS97Commented:
dammit, this site keeps posting comments a million times.
0
jmanGJHS97Commented:
I would suggest trying this out with a couple of your options to prove out the concept.  Then, add the rest once you're confident that it will work.
0
DJMgraphixAuthor Commented:
I'm sorry man...
I guess that's why I'm on here, because I don't know how to write this stuff...


I copied and pasted the JS provided above and All I got was the one drop down without anything changing.

I really don't know brother... sorry...

Wish I could give you a couple thousand points for solving this for me.

0
jmanGJHS97Commented:
Ok, I'm not going to write the entire page for you, since that's a ton of work (as I am sure you know by now).  But, what I have here is the first three products set up, so you can see how it works.

A couple things you'll need to do to continue building this page:

1.  add arr[x] values corresponding to each dropdown value in your products dropdown.
2.  make sure you have divs, with the IDs like the ones I've set up, surrounding each of the sub-dropdowns.
3.  make sure you set each select box with its own ID, so when you submit the page by clicking next, you will not get duplicate values.

In order to test this, simply select one of the first three items from the top dropdown.  What you will see is the other dropdowns change based on what you picked from the top one.

This is what you're going for, yes?
<script>
function toggleSubProducts(selectBox)
{
  var arr = new Array();
  arr[0] = 'Baby Onesies 23.00';
  arr[1] = 'Baby Long-Sleeve 23.00';
	arr[2] = 'Baby Bib 15.00';
	
  for (var i = 0; i < arr.length; i++)
  {
    if (selectBox.value == arr[i])
    {
      document.getElementById(arr[i]).style.display = 'block';
    }
    else
    {
      document.getElementById(arr[i]).style.display = 'none';
    }
  }
}
</script>
 
<form action="orderprocess.php" method="POST">
                          <input type="hidden" name="designnumber" value="1">
                          Product Options:
                          <select name="product" onchange="toggleSubProducts(this);">
                            <option value="Baby Onesies 23.00">Baby Onesies ($23.00)</option>
                            <option value="Baby Long-Sleeve 23.00">Baby Long-Sleeve ($23.00)</option>
                            <option value="Baby Bib 15.00">Baby Bib ($15.00)</option>
                            <option value="Baby Hat 15.00">Baby Hat ($15.00)</option>
                            <option value="Baby Short-Sleeve 20.00">Baby Short-Sleeve ($20.00)</option>
                            <option value="Youth Short-Sleeve 25.00">Youth Short-Sleeve (25.00)<option>
                            <option value="Mens Short-Sleeve 25.00">Mens Short-Sleeve ($25.00)</option>
                            <option value="Mens Long-Sleeve 28.00">Mens Long-Sleeve ($28.00)</option>
                            <option value="Mens Tank-Top 27.00">Mens Tank-Top ($27.00)<option>
                            <option value="Zip-Up Hoodie 43.00">Zip-Up Hoodie ($43.00)</option>
                            <option value="Hoodie 37.00">Hoodie ($37.00)</option>
                            <option value="Womens Short-Sleeve 25.00">Womens Short-Sleeve ($25.00)</option>
                            <option value="Womens Tank-Top 27.00">Womens Tank-Top ($27.00)</option>
                            <option value="Womens Long-Sleeve 30.00">Womens Long-Sleeve ($30.00)</option>
                            <option value="Womens Cheer Shorts 27.00">Womens Cheer Shorts ($27.00)</option>
                            <option value="Tote Bag 25.00">Tote Bag ($25.00)</option>
                            <option value="Gym Bag 30.00">Gym Bag ($30.00)</option>
                            <option value="Trucker Hat 23.00">Trucker Hat ($23.00)</option>
                            <option value="Can Koozie .00">Can Koozie ($13.00)</option>
                            </select>
 
													<div id="Baby Onesies 23.00" style="display: block;">
														<p>Design Options:
															<select name="onesies_options">
																<option value="Design and Name on Front">Design and Name on Front</option>
																<option value="Design and Name on Back">Design and Name on Back</option>
																<option value="Design on Front and Name on Back 6.00 ">Design on Front and Name on Back (+$6.00)</option>
																<option value="Design on Back and Name on Front 6.00 ">Design on Back and Name on Front (+$6.00)</option>
                              </select>
														<p>Sizes:
                              <select name="onsies_sizes">
                                <option value="Small">Small</option>
                                <option value="Medium">Medium</option>
                                <option value="Large">Large</option>
                                <option value="XL">XL</option>
                                <option value="XX 3.00 ">2X (+$3.00)</option>
 
                                <option value="XXX 3.00 ">3X (+$3.00)</option>
                              </select>
                            <p>Color:
                              <select name="onsies_color">
                                <option value="White">White</option>
                                <option value="Black">Black</option>
                              </select>	
													</div>
													<div id="Baby Long-Sleeve 23.00" style="display: none;">
														<p>Design Options:
																<select name="long_sleeve_options">
																	<option value="Design and Name on Front">Design and Name on Front</option>
																	<option value="Design and Name on Back">Design and Name on Back</option>
																	<option value="Design on Front and Name on Back 6.00 ">Design on Front and Name on Back (+$6.00)</option>
																	<option value="Design on Back and Name on Front 6.00 ">Design on Back and Name on Front (+$6.00)</option>
															</select>
														<p>Sizes:
                              <select name="long_sleeve_sizes">
                                <option value="Small">Small</option>
                                <option value="Medium">Medium</option>
                                <option value="Large">Large</option>
                                <option value="XL">XL</option>
                                <option value="XX 3.00 ">2X (+$3.00)</option>
                                <option value="XXX 3.00 ">3X (+$3.00)</option>
                              </select>
                            <p>Color:
                              <select name="long_sleeve_color">
                                <option value="White">White</option>
                                <option value="Black">Black</option>
																<option value="Lavender">Lavender</option>
																<option value="Baby Blue">Baby Blue</option>
                              </select>	
													</div>
													<div id="Baby Bib 15.00" style="display: none;">
														<p>Sizes:
                              <select name="baby_bib_sizes">
                                <option value="One Size">One Size</option>
                              </select>
                            <p>Color:
                              <select name="baby_bib_color">
                                <option value="White">White</option>
                                <option value="Black">Black</option>
                              </select>	
													</div>
                            <p><input type="submit" name="submit" value="Next">
                        </form>                        &nbsp;</td>

Open in new window

0
jmanGJHS97Commented:
wow i wish it would just submit comments once...soooo annoying.  basically, copy all that stuff into a blank page, call it index.html, and double-click it.  you will then see what it does.
0
jmanGJHS97Commented:
Oh, and you'll have to put back stuff like the state dropdown and the custom lettering thing.  i stripped out everything just to show what i did.
0
DJMgraphixAuthor Commented:
You can check it out here:

http://www.djmgraphix.com/THE_ART_BUCKET/airbrush_apparel/test.html

The major thing that I noticed that that it doesn't calculate the total when sending it over to the PHP page.
0
jmanGJHS97Commented:
Well, that's something you have to do on the server-side.  JavaScript is client-side, so you won't be able to have it "remember" the state.  You can submit the form and catch the request values on the next page, but that really doesn't fit as a JavaScript issue.
0
gamebitsCommented:
I know what the problem is with the form not doing the calculation, I have to modify the orderprocess page in the mean time have a look at the form here (functionality not design).

http://www.cemond.com/EE/testpay.php
0
DJMgraphixAuthor Commented:
Thanks GAMEBITS... It's looking great!  I believe that the functionality is there!  Do you think that I will have to change anything on the orderprocess.php page?  I'm getting a lot of errors after hitting next... :)

Unless that's not done yet.

Thanks again GAMEBITS!
0
gamebitsCommented:
I have a few issue to deal with and yes there will be changes on orderprocess.php
0
gamebitsCommented:
You can try it again I'm done

http://www.cemond.com/EE/testpay.php

I added the charge for color, if it is good I'll send you the files.
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
DJMgraphixAuthor Commented:
I really think that you are the coolest guy ever!  I can't stress that enough!  Thank you GAMEBITS!  Made a guy with a lot on his plate.. have a little less on it now.. THANK YOU
0
DJMgraphixAuthor Commented:
Should there be any issue adding in the :

Lettering Style dropdown
Please select destination dropdown
Name for personilization text field
design colors you want to see text field
and the special instructions for the artist text field

Or can I use the same PHP as lasttime?

0
gamebitsCommented:
Let me send you the files first, there should be no problem with the other fields I did not touch them.

The files are with .txt extension (cannot uploald .php files here)

If you have any question let me know.
orderprocess.txt
testpay.txt
0
gamebitsCommented:
Forgot to say if you change the price of an item you have to change it in three places otherwise the script will break.
0
DJMgraphixAuthor Commented:
You are a great guy Gamebits...  I was just looking for where to plug in the paypal email on the orderprocess.php...
0
gamebitsCommented:
Should be the same as before I didn't touch it

<form action=\"https://www.paypal.com/cgi-bin/webscr\" method=\"post\" style=\"padding: 0px; margin: 0px\">
                           <input type=\"hidden\" name=\"cmd\" value=\"_xclick\">
                           <input type=\"hidden\" name=\"business\" value=\"EMAIL ADDRESS\">
                           <input type=\"hidden\" name=\"amount\" value=\"$total\">

0
DJMgraphixAuthor Commented:
YUUP!  Got the email in!

I think that the only thing I'm missing is the design# when it reaches paypal.

I see that it's still on the orderform:

<form action="orderprocess.php" method="POST">
                          <input type="hidden" name="designnumber" value="1">


I tried adding the rest on the orderprocess.php side of things and I generated some errors... just my luck.
0
gamebitsCommented:
Ok you got the form part

<form action="orderprocess.php" method="POST">
                          <input type="hidden" name="designnumber" value="1">

on the orderprocess.php page you need to add this line

$designnumber = $_POST['designnumber'];

I would put it right after this line

$product = $_POST['product'];

just to keep stuff organized :)

now for the Paypal button use the variable item_number

<input type=\"hidden\" name=\"item_number\" value=\"$designnumber \">
0
DJMgraphixAuthor Commented:
I don't know if I'm blind...

I found where to add it in on the paypal button..
 
I just don't see the: $product = $_POST['product'];


0
DJMgraphixAuthor Commented:
DANG!

I was blind.. it's like the 3rd line down:)

sorry brother
0
DJMgraphixAuthor Commented:
0
gamebitsCommented:
Look good isn't it?

Thanks for the points and the grade.
0
DJMgraphixAuthor Commented:
You deserve more my friend... thank you once again!

NOW.. I get to create some other dudes business cards.. and folders.. etc... FUN DAY :)

Thanks brother.
0
DJMgraphixAuthor Commented:
I see where you are adding in the 3% for NY sales tax on the orderprocess.php

$subtotal = $pprice + $poption + $psizes + $pcolor;
if($destination == 'NY'){$subtotal = $subtotal * 1.03;}
$subtotal = $subtotal + $shipping;
$total = number_format($subtotal, 2, '.', '');

I love the fact that if they don't select a state, that is says, "pickup"

How hard would it be to add the same 3% to the total if someone doesn't select the state implying pickup.
 
0
gamebitsCommented:
Change this line

if($destination == 'NY'){$subtotal = $subtotal * 1.03;}

for

if(($destination == 'NY') || ($destination == "Pick Up")){$subtotal = $subtotal * 1.03;}  
0
DJMgraphixAuthor Commented:
Perfect!

Thank you!
0
DJMgraphixAuthor Commented:
Check this one out if you have a second...

This dang PHP submission form isn't working like on my other webpage:

http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/PHP/Q_24541197.html


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
JavaScript

From novice to tech pro — start learning today.