Jump to content
Please Use CODE Tags

HTML order form for school project

ExozeGD
By ExozeGD
in Programming
 Share
Posted

I'm working on this website for a school project and i'm stuck on this part since i don't have coding class anymore and i'm in a little hurry so after trying to find something usefull for a couple of hours i relized i can't do this myself so that's why i'm asking for help. to the point, what i need is an order form where you can write your name, email, and adress aswell as check in a box what you want to order, after you click submit it will pop up a "are you sure you want to order this for this much $$$" with the option to click yes or no. 

Thanks in advance for the one able to help me

Main build
CPU: i7 5820k  MotherBoard: Gigabyte x99 UD4  RAM: corsair ballistix 2400mhz 4x4gb  GPU: Asus GTX 970  PSU: corsair rm1000  SSD 1: Samsung 840evo 500gb  SSD 2: Samsung 850evo 500gb  HDD: Western Digital red 3tb  Case: Phanteks Enthoo pro M  CPU cooler: corsair h80i

 

Second build
CPU: i7 5820k  MotherBoard: Gigabyte x99 UD5 WIFI  RAM: G.skill 2666mhz 4x4gb  GPU: Nvidia GTS 450 (soon to be upgraded)  PSU: corsair HX650  SSD: Samsung 850evo 250gb  Case: Cooler Master 430 elite  CPU cooler: Cooler Master hyper 212 evo

 

Third build

CPU: xeon x5690  MotherBoard: Evga x58 classified 4way-sli  Ram: Patriot 1600mhz 4x3gb  GPU: Asus HD6970  PSU: fractal newton r2 1000w  SSD: crucial m500 240gb  Case: Cooler Master Haf X  CPU cooler: Mega Shadow

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

Does it need to send this data to a MySQL database? Or to email? Or is it just a proof of concept thing? Also, can you please explain the "check in a box what you want to order part"? Do you just have about 5 different articles you can order by ticking the box of what you need? Should you be able to check multiple boxes?
Anyways, I'll make a rough first draft for you.

"We're all in this together, might as well be friends" Tom, Toonami.

 

mini eLiXiVy: my open source 65% mechanical PCB, a build log, PCB anatomy and discussing open source licenses: https://linustechtips.com/topic/1366493-elixivy-a-65-mechanical-keyboard-build-log-pcb-anatomy-and-how-i-open-sourced-this-project/

 

mini_cardboard: a 4% keyboard build log and how keyboards work: https://linustechtips.com/topic/1328547-mini_cardboard-a-4-keyboard-build-log-and-how-keyboards-work/

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author
Just now, Minibois said:

Does it need to send this data to a MySQL database? Or to email? Or is it just a proof of concept thing? Also, can you please explain the "check in a box what you want to order part"? Do you just have about 5 different articles you can order by ticking the box of what you need? Should you be able to check multiple boxes?
Anyways, I'll make a rough first draft for you.

the data is supposed to be sent to the email, the check box is that we have 3 different things you can order and you can choose more then one and you should be able to add a quantity so if you want to have more then just one then you can

Main build
CPU: i7 5820k  MotherBoard: Gigabyte x99 UD4  RAM: corsair ballistix 2400mhz 4x4gb  GPU: Asus GTX 970  PSU: corsair rm1000  SSD 1: Samsung 840evo 500gb  SSD 2: Samsung 850evo 500gb  HDD: Western Digital red 3tb  Case: Phanteks Enthoo pro M  CPU cooler: corsair h80i

 

Second build
CPU: i7 5820k  MotherBoard: Gigabyte x99 UD5 WIFI  RAM: G.skill 2666mhz 4x4gb  GPU: Nvidia GTS 450 (soon to be upgraded)  PSU: corsair HX650  SSD: Samsung 850evo 250gb  Case: Cooler Master 430 elite  CPU cooler: Cooler Master hyper 212 evo

 

Third build

CPU: xeon x5690  MotherBoard: Evga x58 classified 4way-sli  Ram: Patriot 1600mhz 4x3gb  GPU: Asus HD6970  PSU: fractal newton r2 1000w  SSD: crucial m500 240gb  Case: Cooler Master Haf X  CPU cooler: Mega Shadow

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
11 minutes ago, ExozeGD said:

the data is supposed to be sent to the email, the check box is that we have 3 different things you can order and you can choose more then one and you should be able to add a quantity so if you want to have more then just one then you can

This is kind of a rough first part of the project: 

<html>
<head>
<title>Order Stuff</title>
</head>

<body>
<p>Please fill in the form.</p>
<form action="mailto:someone@example.com" method="post" enctype="text/plain">
<p>Full name:</p>
<input type="text" name="Name" id="FullName">
<p>Email Address:</p>
<input type="text" name="E-mail" id="Email">
<!--Just rinse and repeat for the Address, because I didn't know if you needed street and city only or more-->
</br>
<input type="checkbox" name="Product1" value="100USD">Product1 (100$) 
Amount: <input type="number" name="Amount" id="Amount1"><br>
<input type="checkbox" name="Product2" value="200USD">Product2 (200$)
Amount: <input type="number" name="Amount" id="Amount1"><br>
<input type="checkbox" name="Product1" value="300USD">Product3 (300$)
Amount: <input type="number" name="Amount" id="Amount1"><br>

<input type="submit" value="Order">
</form>

</body>
</html>

I'm trying to figure out how to make it ask for a confirmation and how to make it count up the stuff. This will likely be done in Javascript.

"We're all in this together, might as well be friends" Tom, Toonami.

 

mini eLiXiVy: my open source 65% mechanical PCB, a build log, PCB anatomy and discussing open source licenses: https://linustechtips.com/topic/1366493-elixivy-a-65-mechanical-keyboard-build-log-pcb-anatomy-and-how-i-open-sourced-this-project/

 

mini_cardboard: a 4% keyboard build log and how keyboards work: https://linustechtips.com/topic/1328547-mini_cardboard-a-4-keyboard-build-log-and-how-keyboards-work/

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author
1 minute ago, Minibois said:

This is kind of a rough first part of the project: 


<html>
<head>
<title>Order Stuff</title>
</head>

<body>
<p>Please fill in the form.</p>
<form action="mailto:someone@example.com" method="post" enctype="text/plain">
<p>Full name:</p>
<input type="text" name="Name" id="FullName">
<p>Email Address:</p>
<input type="text" name="E-mail" id="Email">
<!--Just rinse and repeat for the Address, because I didn't know if you needed street and city only or more-->
</br>
<input type="checkbox" name="Product1" value="100USD">Product1 (100$) 
Amount: <input type="number" name="Amount" id="Amount1"><br>
<input type="checkbox" name="Product2" value="200USD">Product2 (200$)
Amount: <input type="number" name="Amount" id="Amount1"><br>
<input type="checkbox" name="Product1" value="300USD">Product3 (300$)
Amount: <input type="number" name="Amount" id="Amount1"><br>

<input type="submit" value="Order">
</form>

</body>
</html>

I'm trying to figure out how to make it ask for a confirmation and how to make it count up the stuff. This will likely be done in Javascript.

this looks really good but we would need an adress field aswell. otherwise really good thanks

Main build
CPU: i7 5820k  MotherBoard: Gigabyte x99 UD4  RAM: corsair ballistix 2400mhz 4x4gb  GPU: Asus GTX 970  PSU: corsair rm1000  SSD 1: Samsung 840evo 500gb  SSD 2: Samsung 850evo 500gb  HDD: Western Digital red 3tb  Case: Phanteks Enthoo pro M  CPU cooler: corsair h80i

 

Second build
CPU: i7 5820k  MotherBoard: Gigabyte x99 UD5 WIFI  RAM: G.skill 2666mhz 4x4gb  GPU: Nvidia GTS 450 (soon to be upgraded)  PSU: corsair HX650  SSD: Samsung 850evo 250gb  Case: Cooler Master 430 elite  CPU cooler: Cooler Master hyper 212 evo

 

Third build

CPU: xeon x5690  MotherBoard: Evga x58 classified 4way-sli  Ram: Patriot 1600mhz 4x3gb  GPU: Asus HD6970  PSU: fractal newton r2 1000w  SSD: crucial m500 240gb  Case: Cooler Master Haf X  CPU cooler: Mega Shadow

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
11 minutes ago, ExozeGD said:

this looks really good but we would need an adress field aswell. otherwise really good thanks

You can add whatever you want yourself, I'm helping, not fully making your homework :P Adding stuff is just as easy as just adding another input field.

This is the HTML page with a Javascript function to count up the product prices (if you want to edit the product prices, just edit the HTML document text and also the multiplication amount in the Javascript file. 

<html>
<head>
<title>Order Stuff</title>
<script src="script.js"></script>
</head>

<body>
<p>Please fill in the form.</p>
<form action="mailto:someone@example.com" method="post" enctype="text/plain">
<p>Full name:</p>
<input type="text" name="Name" id="FullName">
<p>Email Address:</p>
<input type="text" name="E-mail" id="Email">
<!--Just rinse and repeat for the Address, because I didn't know if you needed street and city only or more-->
</br>
<input type="checkbox" name="Product1" value="100USD">Product1 (100$) 
Amount: <input type="number" name="Amount" id="Amount1"><br>
<input type="checkbox" name="Product2" value="200USD">Product2 (200$)
Amount: <input type="number" name="Amount" id="Amount2"><br>
<input type="checkbox" name="Product1" value="300USD">Product3 (300$)
Amount: <input type="number" name="Amount" id="Amount3"><br>

<input type="submit" value="Order">
</form>
<button type="button" onClick="CountUp()">Total Price</button>
<p id="OrderAmount"></p>

</body>
</html>

Javascript file (named script.js, if you want to rename it, be sure to edit the head of the HTML file to link to your newly named file): 

//script.js

function CountUp()
{
	var Products1 = document.getElementById("Amount1").value;
	var Products2 = document.getElementById("Amount2").value;
	var Products3 = document.getElementById("Amount3").value;
	var TotalPrice = (Products1 *100) + (Products2 *200) + (Products3 *300);
	document.getElementById("OrderAmount").innerText = "Price: " + TotalPrice;
}

 

"We're all in this together, might as well be friends" Tom, Toonami.

 

mini eLiXiVy: my open source 65% mechanical PCB, a build log, PCB anatomy and discussing open source licenses: https://linustechtips.com/topic/1366493-elixivy-a-65-mechanical-keyboard-build-log-pcb-anatomy-and-how-i-open-sourced-this-project/

 

mini_cardboard: a 4% keyboard build log and how keyboards work: https://linustechtips.com/topic/1328547-mini_cardboard-a-4-keyboard-build-log-and-how-keyboards-work/

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author
17 minutes ago, Minibois said:

You can add whatever you want yourself, I'm helping, not fully making your homework :P Adding stuff is just as easy as just adding another input field.

This is the HTML page with a Javascript function to count up the product prices (if you want to edit the product prices, just edit the HTML document text and also the multiplication amount in the Javascript file. 


<html>
<head>
<title>Order Stuff</title>
<script src="script.js"></script>
</head>

<body>
<p>Please fill in the form.</p>
<form action="mailto:someone@example.com" method="post" enctype="text/plain">
<p>Full name:</p>
<input type="text" name="Name" id="FullName">
<p>Email Address:</p>
<input type="text" name="E-mail" id="Email">
<!--Just rinse and repeat for the Address, because I didn't know if you needed street and city only or more-->
</br>
<input type="checkbox" name="Product1" value="100USD">Product1 (100$) 
Amount: <input type="number" name="Amount" id="Amount1"><br>
<input type="checkbox" name="Product2" value="200USD">Product2 (200$)
Amount: <input type="number" name="Amount" id="Amount2"><br>
<input type="checkbox" name="Product1" value="300USD">Product3 (300$)
Amount: <input type="number" name="Amount" id="Amount3"><br>

<input type="submit" value="Order">
</form>
<button type="button" onClick="CountUp()">Total Price</button>
<p id="OrderAmount"></p>

</body>
</html>

Javascript file (named script.js, if you want to rename it, be sure to edit the head of the HTML file to link to your newly named file): 


//script.js

function CountUp()
{
	var Products1 = document.getElementById("Amount1").value;
	var Products2 = document.getElementById("Amount2").value;
	var Products3 = document.getElementById("Amount3").value;
	var TotalPrice = (Products1 *100) + (Products2 *200) + (Products3 *300);
	document.getElementById("OrderAmount").innerText = "Price: " + TotalPrice;
}

 

now i've put it into the website but how do i get it to send to the mail that i put in or make me get the information in some way

Main build
CPU: i7 5820k  MotherBoard: Gigabyte x99 UD4  RAM: corsair ballistix 2400mhz 4x4gb  GPU: Asus GTX 970  PSU: corsair rm1000  SSD 1: Samsung 840evo 500gb  SSD 2: Samsung 850evo 500gb  HDD: Western Digital red 3tb  Case: Phanteks Enthoo pro M  CPU cooler: corsair h80i

 

Second build
CPU: i7 5820k  MotherBoard: Gigabyte x99 UD5 WIFI  RAM: G.skill 2666mhz 4x4gb  GPU: Nvidia GTS 450 (soon to be upgraded)  PSU: corsair HX650  SSD: Samsung 850evo 250gb  Case: Cooler Master 430 elite  CPU cooler: Cooler Master hyper 212 evo

 

Third build

CPU: xeon x5690  MotherBoard: Evga x58 classified 4way-sli  Ram: Patriot 1600mhz 4x3gb  GPU: Asus HD6970  PSU: fractal newton r2 1000w  SSD: crucial m500 240gb  Case: Cooler Master Haf X  CPU cooler: Mega Shadow

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
4 minutes ago, ExozeGD said:

now i've put it into the website but how do i get it to send to the mail that i put in?

Edit the "someone@example.com" to where ever it needs to be sent to.

"We're all in this together, might as well be friends" Tom, Toonami.

 

mini eLiXiVy: my open source 65% mechanical PCB, a build log, PCB anatomy and discussing open source licenses: https://linustechtips.com/topic/1366493-elixivy-a-65-mechanical-keyboard-build-log-pcb-anatomy-and-how-i-open-sourced-this-project/

 

mini_cardboard: a 4% keyboard build log and how keyboards work: https://linustechtips.com/topic/1328547-mini_cardboard-a-4-keyboard-build-log-and-how-keyboards-work/

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author
Just now, Minibois said:

Edit the "someone@example.com" to where ever it needs to be sent to.

i did this but it's not working

Main build
CPU: i7 5820k  MotherBoard: Gigabyte x99 UD4  RAM: corsair ballistix 2400mhz 4x4gb  GPU: Asus GTX 970  PSU: corsair rm1000  SSD 1: Samsung 840evo 500gb  SSD 2: Samsung 850evo 500gb  HDD: Western Digital red 3tb  Case: Phanteks Enthoo pro M  CPU cooler: corsair h80i

 

Second build
CPU: i7 5820k  MotherBoard: Gigabyte x99 UD5 WIFI  RAM: G.skill 2666mhz 4x4gb  GPU: Nvidia GTS 450 (soon to be upgraded)  PSU: corsair HX650  SSD: Samsung 850evo 250gb  Case: Cooler Master 430 elite  CPU cooler: Cooler Master hyper 212 evo

 

Third build

CPU: xeon x5690  MotherBoard: Evga x58 classified 4way-sli  Ram: Patriot 1600mhz 4x3gb  GPU: Asus HD6970  PSU: fractal newton r2 1000w  SSD: crucial m500 240gb  Case: Cooler Master Haf X  CPU cooler: Mega Shadow

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
3 minutes ago, ExozeGD said:

i did this but it's not working

The 'mailto' that I included in this script will try to open the Email client, but it's admittedly kind of an older thing to do. Nowadays everyone uses Gmail.com, Outlook.com, etc. while in the time mailto was made, everyone used the Outlook desktop client (or some other emailing client).

Best would be to do something like this:

http://www.html-form-guide.com/email-form/html-email-form.html

 

Has your school not provided any info on how to do this project? Or any things you have to include in the project?

"We're all in this together, might as well be friends" Tom, Toonami.

 

mini eLiXiVy: my open source 65% mechanical PCB, a build log, PCB anatomy and discussing open source licenses: https://linustechtips.com/topic/1366493-elixivy-a-65-mechanical-keyboard-build-log-pcb-anatomy-and-how-i-open-sourced-this-project/

 

mini_cardboard: a 4% keyboard build log and how keyboards work: https://linustechtips.com/topic/1328547-mini_cardboard-a-4-keyboard-build-log-and-how-keyboards-work/

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author
1 minute ago, Minibois said:

The 'mailto' that I included in this script will try to open the Email client, but it's admittedly kind of an older thing to do. Nowadays everyone uses Gmail.com, Outlook.com, etc. while in the time mailto was made, everyone used the Outlook desktop client (or some other emailing client).

Best would be to do something like this:

http://www.html-form-guide.com/email-form/html-email-form.html

 

Has your school not provided any info on how to do this project? Or any things you have to include in the project?

it's a project where we make our own product and then sell it, this part is completely optional however we need a way to get orders in

Main build
CPU: i7 5820k  MotherBoard: Gigabyte x99 UD4  RAM: corsair ballistix 2400mhz 4x4gb  GPU: Asus GTX 970  PSU: corsair rm1000  SSD 1: Samsung 840evo 500gb  SSD 2: Samsung 850evo 500gb  HDD: Western Digital red 3tb  Case: Phanteks Enthoo pro M  CPU cooler: corsair h80i

 

Second build
CPU: i7 5820k  MotherBoard: Gigabyte x99 UD5 WIFI  RAM: G.skill 2666mhz 4x4gb  GPU: Nvidia GTS 450 (soon to be upgraded)  PSU: corsair HX650  SSD: Samsung 850evo 250gb  Case: Cooler Master 430 elite  CPU cooler: Cooler Master hyper 212 evo

 

Third build

CPU: xeon x5690  MotherBoard: Evga x58 classified 4way-sli  Ram: Patriot 1600mhz 4x3gb  GPU: Asus HD6970  PSU: fractal newton r2 1000w  SSD: crucial m500 240gb  Case: Cooler Master Haf X  CPU cooler: Mega Shadow

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
1 hour ago, ExozeGD said:

it's a project where we make our own product and then sell it, this part is completely optional however we need a way to get orders in

I would say your best bet is a MySQL database where all order come in and you have a detailed list of the buyer's details (name, address, etc.) what they are buying and how they would like to pay.

I'm not gonna code an entire webstore for you though, if you are doing the project you should be handy enough with web programming to do at least some of the work. Forums are for help, not making entire projects for free.

"We're all in this together, might as well be friends" Tom, Toonami.

 

mini eLiXiVy: my open source 65% mechanical PCB, a build log, PCB anatomy and discussing open source licenses: https://linustechtips.com/topic/1366493-elixivy-a-65-mechanical-keyboard-build-log-pcb-anatomy-and-how-i-open-sourced-this-project/

 

mini_cardboard: a 4% keyboard build log and how keyboards work: https://linustechtips.com/topic/1328547-mini_cardboard-a-4-keyboard-build-log-and-how-keyboards-work/

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author
1 hour ago, Minibois said:

I would say your best bet is a MySQL database where all order come in and you have a detailed list of the buyer's details (name, address, etc.) what they are buying and how they would like to pay.

I'm not gonna code an entire webstore for you though, if you are doing the project you should be handy enough with web programming to do at least some of the work. Forums are for help, not making entire projects for free.

ok but thanks for your help this is really going to be so much easier now when i actually know the terms for it

Main build
CPU: i7 5820k  MotherBoard: Gigabyte x99 UD4  RAM: corsair ballistix 2400mhz 4x4gb  GPU: Asus GTX 970  PSU: corsair rm1000  SSD 1: Samsung 840evo 500gb  SSD 2: Samsung 850evo 500gb  HDD: Western Digital red 3tb  Case: Phanteks Enthoo pro M  CPU cooler: corsair h80i

 

Second build
CPU: i7 5820k  MotherBoard: Gigabyte x99 UD5 WIFI  RAM: G.skill 2666mhz 4x4gb  GPU: Nvidia GTS 450 (soon to be upgraded)  PSU: corsair HX650  SSD: Samsung 850evo 250gb  Case: Cooler Master 430 elite  CPU cooler: Cooler Master hyper 212 evo

 

Third build

CPU: xeon x5690  MotherBoard: Evga x58 classified 4way-sli  Ram: Patriot 1600mhz 4x3gb  GPU: Asus HD6970  PSU: fractal newton r2 1000w  SSD: crucial m500 240gb  Case: Cooler Master Haf X  CPU cooler: Mega Shadow

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
2 hours ago, Minibois said:

I would say your best bet is a MySQL database where all order come in and you have a detailed list of the buyer's details (name, address, etc.) what they are buying and how they would like to pay.

I'm not gonna code an entire webstore for you though, if you are doing the project you should be handy enough with web programming to do at least some of the work. Forums are for help, not making entire projects for free.

I only agree on a database on grounds that having something of this importance client side is just begging to be abused. However if no real products or money is involved being a school project that maybe ok.

                     ¸„»°'´¸„»°'´ Vorticalbox `'°«„¸`'°«„¸
`'°«„¸¸„»°'´¸„»°'´`'°«„¸Scientia Potentia est  ¸„»°'´`'°«„¸`'°«„¸¸„»°'´

Link to comment
Share on other sites
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing Programming

×