quote form javascript email help
Hi
I have created a javascript quote form that adds totals up based on the checkboxes checked and that side of it works but I need some help with how to send that data to a email address, I am not sure where to start with the php mail side of it to be honest, below is the coding I have so far
Code:
<form id="quote">
<table>
<thead>
<tr>
<th scope="col">Image</th>
<th scope="col">Items</th>
<th scope="col">Price</th>
<th scope="col">Add to Quote</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label=""> </td>
<td data-label="Draping, Swagging and Backdrops">Draping, Swagging & Backdrops</td>
<td data-label=""> </td>
<td data-label=""> </td>
</tr>
<tr>
<td scope="row" data-label="Picture"><img src="images/venue-decor-quote-page/ceiling-swag-with-fairy-lights.jpg" alt="" title="" /></td>
<td scope="row" data-label="Items">Ceiling Swag</td>
<td data-label="Amount">£POA</td>
<td data-label="Calculate"><input type="checkbox" name="selectedProducts" value="Ceiling Swag" id="selectedProducts_52" onChange="getTotals()" /></td>
</tr>
<tr>
<td scope="row" data-label="Picture"><img src="images/venue-decor-quote-page/ceiling-canopy-drape.jpg" alt="" title="" /></td>
<td scope="row" data-label="Items">Ceiling Canopy Drape</td>
<td data-label="Amount">£POA</td>
<td data-label="Calculate"><input type="checkbox" name="selectedProducts" value="Ceiling Canopy Drape" id="selectedProducts_53" onChange="getTotals()" /></td>
</tr>
<tr>
<td scope="row" data-label="Picture"><img src="images/venue-decor-quote-page/wall-backdrop.jpg" alt="" title="" /></td>
<td scope="row" data-label="Items">Wall Backdrop</td>
<td data-label="Amount">£POA</td>
<td data-label="Calculate"><input type="checkbox" name="selectedProducts" value="Wall Backdrop" id="selectedProducts_54" onChange="getTotals()" /></td>
</tr>
<tr>
<td scope="row" data-label="Picture"> </td>
<td scope="row" data-label="Items">Freestanding Backdrop 6mx3m</td>
<td data-label="Amount">£150.00</td>
<td data-label="Calculate"><input type="checkbox" name="selectedProducts" value="Freestanding Backdrop 6mx3m" id="selectedProducts_55" onChange="getTotals()" /></td>
</tr>
<tr>
<td scope="row" data-label="Picture"> </td>
<td scope="row" data-label="Items">Streamers 1m</td>
<td data-label="Amount">£1.00</td>
<td data-label="Calculate"><input type="checkbox" name="selectedProducts" value="Streamers 1m" id="selectedProducts_56" onChange="getTotals()" /></td>
</tr>
<tr>
<td scope="row" data-label="Picture"><img src="images/venue-decor-quote-page/window-backdrop-with-fairy-lights.jpg" alt="" title="" /></td>
<td scope="row" data-label="Items">Window Backdrop</td>
<td data-label="Amount">£POA</td>
<td data-label="Calculate"><input type="checkbox" name="selectedProducts" value="Window Backdrop" id="selectedProducts_57" onChange="getTotals()" /></td>
</tr>
<tr>
<td scope="row" data-label="Picture"> </td>
<td scope="row" data-label="Items">Bunting 1m</td>
<td data-label="Amount">£1.50</td>
<td data-label="Calculate"><input type="checkbox" name="selectedProducts" value="Bunting 1m" id="selectedProducts_58" onChange="getTotals()" /></td>
</tr>
<tr>
<td scope="row" data-label="Picture"><img src="images/venue-decor-quote-page/branch-ceiling-circle.jpg" alt="" title="" /></td>
<td scope="row" data-label="Items">Ceiling Branch Circles</td>
<td data-label="Amount">£20.00</td>
<td data-label="Calculate"><input type="checkbox" name="selectedProducts" value="Ceiling Branch Circles" id="selectedProducts_59" onChange="getTotals()" /></td>
</tr>
</tbody>
</table>
<br /><br />
<table>
<thead>
<tr>
<th scope="col">Image</th>
<th scope="col">Items</th>
<th scope="col">Price</th>
<th scope="col">Add to Quote</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label=""> </td>
<td data-label="Sweet Treats">Sweet Treats</td>
<td data-label=""> </td>
<td data-label=""> </td>
</tr>
<tr>
<td scope="row" data-label="Picture"><img src="images/venue-decor-quote-page/sweet-trees.jpg" alt="" title="" /></td>
<td scope="row" data-label="Items">Sweet Tree Small</td>
<td data-label="Amount">£20.00</td>
<td data-label="Calculate"><input type="checkbox" name="selectedProducts" value="Sweet Tree Small" id="selectedProducts_60" onChange="getTotals()" /></td>
</tr>
<tr>
<td scope="row" data-label="Picture"><img src="images/venue-decor-quote-page/sweet-trees.jpg" alt="" title="" /></td>
<td scope="row" data-label="Items">Sweet Tree Medium</td>
<td data-label="Amount">£30.00</td>
<td data-label="Calculate"><input type="checkbox" name="selectedProducts" value="Sweet Tree Medium" id="selectedProducts_61" onChange="getTotals()" /></td>
</tr>
<tr>
<td scope="row" data-label="Picture"><img src="images/venue-decor-quote-page/sweet-trees.jpg" alt="" title="" /></td>
<td scope="row" data-label="Items">Sweet Tree Large</td>
<td data-label="Amount">£40.00</td>
<td data-label="Calculate"><input type="checkbox" name="selectedProducts" value="Sweet Tree Large" id="selectedProducts_62" onChange="getTotals()" /></td>
</tr>
<tr>
<td scope="row" data-label="Picture"><img src="images/venue-decor-quote-page/candy-cart.jpg" alt="" title="" /></td>
<td scope="row" data-label="Items">Candy Cart/Table 80 Guests</td>
<td data-label="Amount">£100.00</td>
<td data-label="Calculate"><input type="checkbox" name="selectedProducts" value="Candy Cart/Table 80 Guests" id="selectedProducts_63" onChange="getTotals()" /></td>
</tr>
<tr>
<td scope="row" data-label="Picture"><img src="images/venue-decor-quote-page/candy-cart.jpg" alt="" title="" /></td>
<td scope="row" data-label="Items">Candy Cart/Table 100 Guests</td>
<td data-label="Amount">£150.00</td>
<td data-label="Calculate"><input type="checkbox" name="selectedProducts" value="Candy Cart/Table 100 Guests" id="selectedProducts_64" onChange="getTotals()" /></td>
</tr>
<tr>
<td scope="row" data-label="Picture"><img src="images/venue-decor-quote-page/candy-cart.jpg" alt="" title="" /></td>
<td scope="row" data-label="Items">Candy Cart/Table 150 Guests</td>
<td data-label="Amount">£180.00</td>
<td data-label="Calculate"><input type="checkbox" name="selectedProducts" value="Candy Cart/Table 150 Guests" id="selectedProducts_65" onChange="getTotals()" /></td>
</tr>
<tr>
<td scope="row" data-label="Picture"><img src="images/venue-decor-quote-page/candy-cart.jpg" alt="" title="" /></td>
<td scope="row" data-label="Items">Candy Cart/Table 200 Guests</td>
<td data-label="Amount">£225.00</td>
<td data-label="Calculate"><input type="checkbox" name="selectedProducts" value="Candy Cart/Table 200 Guests" id="selectedProducts_66" onChange="getTotals()" /></td>
</tr>
<tr>
<td scope="row" data-label="Picture"><img src="images/venue-decor-quote-page/candy-cart.jpg" alt="" title="" /></td>
<td scope="row" data-label="Items">Candy Cart/Table Buffet</td>
<td data-label="Amount">£POA</td>
<td data-label="Calculate"><input type="checkbox" name="selectedProducts" value="Candy Cart/Table Buffet" id="selectedProducts_67" onChange="getTotals()" /></td>
</tr>
</tbody>
</table>
<div id="totalPrice"></div>
<label for='name'>Name</label>
<input type="text" id="name" name='name' />
<br/>
<label for='address'>Address</label>
<input type="text" id="address" name='address' />
<br/>
<label for='phonenumber'>Phone Number</label>
<input type="text" id="phonenumber" name='phonenumber'/>
<br/>
</fieldset>
<input type='submit' id='submit' value='Submit' onChange="getTotals()" />
</form>
<script>
//ARRAY
var eventItemsProductsArray = new Array();
eventItemsProductsArray["Chair Cover"] = 0.75;
eventItemsProductsArray["Chair Cover and Organza Sash"] = 1.25;
eventItemsProductsArray["Chair Cover and Taffeta Sash"] = 1.50;
eventItemsProductsArray["Chair Cover and Hessian Sash"] = 1.75;
eventItemsProductsArray["Chair Cover and Hessian and Lace Sash"] = 2.00;
eventItemsProductsArray["Chair Cover and Elastic Band"] = 1.25;
eventItemsProductsArray["Lace Sash"] = 0.50;
eventItemsProductsArray["Organza Sash"] = 0.50;
eventItemsProductsArray["Taffeta Sash"] = 075;
eventItemsProductsArray["Hessian Sash"] = 1.00;
eventItemsProductsArray["Hesian and Lace Sash"] = 1.50;
eventItemsProductsArray["Hood Sash"] = 2.00;
eventItemsProductsArray["Lace Hood"] = 2.00;
eventItemsProductsArray["Elastic Band"] = 0.50;
eventItemsProductsArray["Chiffon Hanging Sash Decorated"] = 0.75;
eventItemsProductsArray["Taffeta Table Runner"] = 1.25;
eventItemsProductsArray["Organza Table Runner"] = 0.75;
eventItemsProductsArray["Lace Table Runner"] = 1.00;
eventItemsProductsArray["Hessian Table Runner"] = 1.00;
eventItemsProductsArray["Hessian and Lace Table Runner"] = 2.00;
eventItemsProductsArray["Sequin Table Runner"] = 2.50;
eventItemsProductsArray["Mirrored Plates All Sizes and Shapes"] = 1.50;
eventItemsProductsArray["Slate Plates All Sizes"] = 2.50;
eventItemsProductsArray["Log Slices"] = 1.50;
eventItemsProductsArray["Fish Bowl Decorated"] = 5.00;
eventItemsProductsArray["Martini Glass Decorated"] = 10.00;
eventItemsProductsArray["Vase All Sizes Decorated"] = 6.00;
eventItemsProductsArray["Jar Decorated"] = 0.50;
eventItemsProductsArray["Bottle All Sizes Decorated"] = 0.75;
eventItemsProductsArray["Milk Bottle All Sizes Decorated"] = 1.00;
eventItemsProductsArray["Bird Cage"] = 2.50;
eventItemsProductsArray["Clear Votive"] = 0.75;
eventItemsProductsArray["Place Name All Types"] = 0.50;
eventItemsProductsArray["Table Number All Types"] = 1.00;
eventItemsProductsArray["Milk Churns Cream 25cm Decorated"] = 7.50;
eventItemsProductsArray["Paper Lantern All Sizes"] = 0.75;
eventItemsProductsArray["Pom Pom All Sizes"] = 0.75;
eventItemsProductsArray["Fairy Lights 1m"] = 2.50;
eventItemsProductsArray["Wicker Heart Decorated"] = 1.50;
eventItemsProductsArray["Log Slice Cake Stand"] = 5.00;
eventItemsProductsArray["Table Plan"] = 30.00;
eventItemsProductsArray["Cart Decorated"] = 55.00;
eventItemsProductsArray["Lantern"] = 7.50;
eventItemsProductsArray["Branch Heart"] = 6.00;
eventItemsProductsArray["Branch Wall Circle"] = 8.00;
eventItemsProductsArray["Wishing Well"] = 30.00;
eventItemsProductsArray["Post Box"] = 30.00;
eventItemsProductsArray["Coat Stand Inc Umbrellas"] = 25.00;
eventItemsProductsArray["Blanket Crate and 7 Blankets"] = 15.00;
eventItemsProductsArray["Baytrees"] = 25.00;
eventItemsProductsArray["Wishing Tree"] = 15.00;
eventItemsProductsArray["Wooden Crate"] = 5.00;
eventItemsProductsArray["Ceiling Swag"] = 0.00;
eventItemsProductsArray["Ceiling Canopy Drape"] = 0.00;
eventItemsProductsArray["Wall Backdrop"] = 0.00;
eventItemsProductsArray["Freestanding Backdrop 6mx3m"] = 150.00;
eventItemsProductsArray["Streamers 1m"] = 1.00;
eventItemsProductsArray["Window Backdrop"] = 0.00;
eventItemsProductsArray["Bunting 1m"] = 1.50;
eventItemsProductsArray["Ceiling Branch Circles"] = 20.00;
eventItemsProductsArray["Sweet Tree Small"] = 20.00;
eventItemsProductsArray["Sweet Tree Medium"] = 30.00;
eventItemsProductsArray["Sweet Tree Large"] = 40.00;
eventItemsProductsArray["Candy Cart/Table 80 Guests"] = 100.00;
eventItemsProductsArray["Candy Cart/Table 100 Guests"] = 150.00;
eventItemsProductsArray["Candy Cart/Table 150 Guests"] = 180.00;
eventItemsProductsArray["Candy Cart/Table 200 Guests"] = 225.00;
eventItemsProductsArray["Candy Cart/Table Buffet"] = 0.00;
//CHECKBOX - EVENT PRODUCTS
function getEventItemsProducts() {
var EventItemsProducts = 0;
var theForm = document.forms["quote"];
var selectedProducts = theForm.elements["selectedProducts"];
for (var i = 0; i < selectedProducts.length; i++) {
if(selectedProducts[i].checked){
EventItemsProducts += eventItemsProductsArray[selectedProducts[i].value] || 0;
}
}
return EventItemsProducts;
}
//DIV - TOTAL PRICE TEST
function getTotals() {
//var totalPrice = getEventDuration() + getEventSuburb() + getEventEquipment();
var totalPrice = getEventItemsProducts();
var totalPriceDIV = document.getElementById("totalPrice");
totalPriceDIV.innerText = "Total: £ " + totalPrice.toFixed(2);
}
</script>
Thank you in advance
