Solved

Javascript Help!  Dropdown Form (possible php)

Posted on 2009-07-01
33
398 Views
Last Modified: 2012-05-07
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

0
Comment
Question by:DJMgraphix
  • 15
  • 9
  • 8
33 Comments
 
LVL 9

Expert Comment

by:jmanGJHS97
ID: 24757342
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
 

Author Comment

by:DJMgraphix
ID: 24757456
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
 
LVL 9

Expert Comment

by:jmanGJHS97
ID: 24757521
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
 
LVL 9

Expert Comment

by:jmanGJHS97
ID: 24757539
dammit, this site keeps posting comments a million times.
0
 
LVL 9

Expert Comment

by:jmanGJHS97
ID: 24757551
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
 

Author Comment

by:DJMgraphix
ID: 24757653
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
 
LVL 9

Expert Comment

by:jmanGJHS97
ID: 24758200
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
 
LVL 9

Expert Comment

by:jmanGJHS97
ID: 24758220
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
 
LVL 9

Expert Comment

by:jmanGJHS97
ID: 24758224
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
 

Author Comment

by:DJMgraphix
ID: 24758498
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
 
LVL 9

Expert Comment

by:jmanGJHS97
ID: 24759737
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
 
LVL 28

Expert Comment

by:gamebits
ID: 24759808
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
 

Author Comment

by:DJMgraphix
ID: 24759826
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
 
LVL 28

Expert Comment

by:gamebits
ID: 24760105
I have a few issue to deal with and yes there will be changes on orderprocess.php
0
 
LVL 28

Accepted Solution

by:
gamebits earned 500 total points
ID: 24760489
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
 

Author Closing Comment

by:DJMgraphix
ID: 31598902
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
Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

 

Author Comment

by:DJMgraphix
ID: 24763517
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
 
LVL 28

Expert Comment

by:gamebits
ID: 24763636
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
 
LVL 28

Expert Comment

by:gamebits
ID: 24763654
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
 

Author Comment

by:DJMgraphix
ID: 24763982
You are a great guy Gamebits...  I was just looking for where to plug in the paypal email on the orderprocess.php...
0
 
LVL 28

Expert Comment

by:gamebits
ID: 24764039
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
 

Author Comment

by:DJMgraphix
ID: 24764350
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
 
LVL 28

Expert Comment

by:gamebits
ID: 24764519
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
 

Author Comment

by:DJMgraphix
ID: 24764576
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
 

Author Comment

by:DJMgraphix
ID: 24764591
DANG!

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

sorry brother
0
 

Author Comment

by:DJMgraphix
ID: 24764621
0
 
LVL 28

Expert Comment

by:gamebits
ID: 24764816
Look good isn't it?

Thanks for the points and the grade.
0
 

Author Comment

by:DJMgraphix
ID: 24764859
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
 

Author Comment

by:DJMgraphix
ID: 24767319
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
 
LVL 28

Expert Comment

by:gamebits
ID: 24767500
Change this line

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

for

if(($destination == 'NY') || ($destination == "Pick Up")){$subtotal = $subtotal * 1.03;}  
0
 

Author Comment

by:DJMgraphix
ID: 24767526
Perfect!

Thank you!
0
 

Author Comment

by:DJMgraphix
ID: 24768862
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

Featured Post

Highfive Gives IT Their Time Back

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

The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to count occurrences of each item in an array.

705 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

17 Experts available now in Live!

Get 1:1 Help Now