Link to home
Start Free TrialLog in
Avatar of DJMgraphix
DJMgraphixFlag for United States of America

asked on

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

Avatar of jmanGJHS97
jmanGJHS97
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

Avatar of DJMgraphix
DJMgraphix
Flag of United States of America image

ASKER

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...


Avatar of jmanGJHS97
jmanGJHS97
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

Avatar of jmanGJHS97
jmanGJHS97
dammit, this site keeps posting comments a million times.
Avatar of jmanGJHS97
jmanGJHS97
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.
Avatar of DJMgraphix
DJMgraphix
Flag of United States of America image

ASKER

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.

Avatar of jmanGJHS97
jmanGJHS97
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

Avatar of jmanGJHS97
jmanGJHS97
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.
Avatar of jmanGJHS97
jmanGJHS97
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.
Avatar of DJMgraphix
DJMgraphix
Flag of United States of America image

ASKER

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.
Avatar of jmanGJHS97
jmanGJHS97
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.
Avatar of gamebits
gamebits
Flag of Canada image
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
Avatar of DJMgraphix
DJMgraphix
Flag of United States of America image

ASKER

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!
Avatar of gamebits
gamebits
Flag of Canada image
I have a few issue to deal with and yes there will be changes on orderprocess.php
ASKER CERTIFIED SOLUTION
Avatar of gamebits
gamebits
Flag of Canada image
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of DJMgraphix
DJMgraphix
Flag of United States of America image

ASKER

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
Avatar of DJMgraphix
DJMgraphix
Flag of United States of America image

ASKER

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?

Avatar of gamebits
gamebits
Flag of Canada image
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
Avatar of gamebits
gamebits
Flag of Canada image
Forgot to say if you change the price of an item you have to change it in three places otherwise the script will break.
Avatar of DJMgraphix
DJMgraphix
Flag of United States of America image

ASKER

You are a great guy Gamebits...  I was just looking for where to plug in the paypal email on the orderprocess.php...
Avatar of gamebits
gamebits
Flag of Canada image
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\">

Avatar of DJMgraphix
DJMgraphix
Flag of United States of America image

ASKER

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.
Avatar of gamebits
gamebits
Flag of Canada image
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 \">
Avatar of DJMgraphix
DJMgraphix
Flag of United States of America image

ASKER

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'];


Avatar of DJMgraphix
DJMgraphix
Flag of United States of America image

ASKER

DANG!

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

sorry brother
Avatar of gamebits
gamebits
Flag of Canada image
Look good isn't it?

Thanks for the points and the grade.
Avatar of DJMgraphix
DJMgraphix
Flag of United States of America image

ASKER

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.
Avatar of DJMgraphix
DJMgraphix
Flag of United States of America image

ASKER

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.
 
Avatar of gamebits
gamebits
Flag of Canada image
Change this line

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

for

if(($destination == 'NY') || ($destination == "Pick Up")){$subtotal = $subtotal * 1.03;}  
Avatar of DJMgraphix
DJMgraphix
Flag of United States of America image

ASKER

Perfect!

Thank you!
Avatar of DJMgraphix
DJMgraphix
Flag of United States of America image

ASKER

Check this one out if you have a second...

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

https://www.experts-exchange.com/questions/24541197/PHP-submission-form-help.html