I've just created a nice tool to calculate the result (add, multiply and send the total by email) for a generic bakery.
My problem is that I'm not able to get the value inside my checkbox inputs. I tried in a few way but the only value that I was able to get from the radio checkbox was 1 (I suppose that the very value is a "true"). Everything else is working but I still find it a little verbose.
Here's my code:
THE HTML (problem):
<fieldset>
<label>MEAT & CHEESE TRAYS</label><br>
<label>Executive Tray</label><br>
<label class='radiolabel'><input type="checkbox" name="Executive[]" value="45">Serves 10–15 people</label><br/>
<label class='radiolabel'><input type="checkbox" name="Executive[]" value="62">Serves 20–25 people</label><br/>
<label>Hospitality Tray</label><br>
<label class='radiolabel'><input type="checkbox" name="Hospitality[]" value="48">Serves 10–15 people</label><br/>
<label class='radiolabel'><input type="checkbox" name="Hospitality[]" value="65">Serves 20–25 people</label><br/>
<label>Meat & Cheese Nibbler</label><br>
<label class='radiolabel'><input type="checkbox" name="Nibbler[]" value="48">Serves 10–15 people</label><br/>
<label class='radiolabel'><input type="checkbox" name="Nibbler[]" value="65">Serves 20–25 people</label><br/>
<label>Sliced Cheese Tray</label><br>
<label class='radiolabel'><input type="checkbox" name="Sliced[]" value="48">Serves 10–15 people</label><br/>
<label class='radiolabel'><input type="checkbox" name="Sliced[]" value="65">Serves 20–25 people</label><br/>
<label>Cheese Nibbler</label><br>
<label class='radiolabel'><input type="checkbox" name="Cheese[]" value="48">Serves 10–15 people</label><br/>
<label class='radiolabel'><input type="checkbox" name="Cheese[]" value="65">Serves 20–25 people</label><br/>
</fieldset>
THE PHP (problem):
$value = implode(',', $_POST['Executive']);
$Body = "";
$Body .= "Here's the order from: ";
$Body .= "Executive Tray: ";
$Body .= $value;
$Body .= print_r($value);
$Body .= "\n";
$Body .= "Hospitality Tray: ";
$success = mail($EmailTo, $Subject, $Body, "From:".$email);
LINK: My code is up and working on this page:
http://wilsonpools.larchedigitalmedia.com/foxbakapp/
THE ENTIRE CODE (Ignore it, only for debugging purpose or for a suggestions)
THE HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Contact Form Foxs</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<form id="calculatoform" role="form">
<fieldset>
<legend>Contact Details</legend>
<div class="form-group">
<label for='firstname'>Name</label>
<input type="text" class="form-control" name='firstname' id="firstname" placeholder="Enter name" required data-error="Please, insert your name">
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label for='address'>Address</label>
<input type="text" class="form-control" id='address' name='address' id="firstname" placeholder="Enter name" required data-error="Please, insert your address">
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label for='company'>Company</label>
<input type="text" class="form-control" id='company' name='company' placeholder="Enter name" data-error="Please insert your company">
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label for='phonenumber'>Phone Number</label>
<input type="text" class="form-control" id="phonenumber" name='phonenumber' placeholder="Enter Your Phone Number" data-error="Please enter your phone number" required>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label for='email'>Email</label>
<input type="email" name='email' class="form-control" id="email" placeholder="Enter email" data-error="Please enter your email" required>
<div class="help-block with-errors"></div>
</div>
</fieldset>
<div>
<div class="cont_order">
<fieldset>
<legend>Place Your order</legend>
<fieldset>
<label>SANDWICH TRAYS</label><br>
<label>Small Sandwiches</label><br>
<input type="number" name="smallsan"><br>
<label>Large Sandwiches</label><br>
<input type="number" name="largesan"><br>
</fieldset>
<fieldset>
<label>MEAT & CHEESE TRAYS</label><br>
<label>Executive Tray</label><br>
<label class='radiolabel'><input type="checkbox" name="Executive[]" value="45">Serves 10–15 people</label><br/>
<label class='radiolabel'><input type="checkbox" name="Executive[]" value="62">Serves 20–25 people</label><br/>
<label>Hospitality Tray</label><br>
<label class='radiolabel'><input type="checkbox" name="Hospitality[]" value="48">Serves 10–15 people</label><br/>
<label class='radiolabel'><input type="checkbox" name="Hospitality[]" value="65">Serves 20–25 people</label><br/>
<label>Meat & Cheese Nibbler</label><br>
<label class='radiolabel'><input type="checkbox" name="Nibbler[]" value="48">Serves 10–15 people</label><br/>
<label class='radiolabel'><input type="checkbox" name="Nibbler[]" value="65">Serves 20–25 people</label><br/>
<label>Sliced Cheese Tray</label><br>
<label class='radiolabel'><input type="checkbox" name="Sliced[]" value="48">Serves 10–15 people</label><br/>
<label class='radiolabel'><input type="checkbox" name="Sliced[]" value="65">Serves 20–25 people</label><br/>
<label>Cheese Nibbler</label><br>
<label class='radiolabel'><input type="checkbox" name="Cheese[]" value="48">Serves 10–15 people</label><br/>
<label class='radiolabel'><input type="checkbox" name="Cheese[]" value="65">Serves 20–25 people</label><br/>
</fieldset>
<fieldset>
<label>SPECIALTY TRAYS</label><br>
<label>Breakfast Delights</label><br>
<input type="number" name="delights">$4.30 per person (2 pieces/person)<br>
<label>Bagel Tray</label><br>
<input type="number" name="bagel">$4.10 per person<br>
<label>Spinach Dip Platters</label><br>
<input type="number" name="spinach">$17.99 each<br>
<label class='radiolabel'><input type="checkbox" name="alligatorbread" value="3">Alligator or Turtle Bread add $3.00</label><br/>
<label>Party Ideas</label><br>
<input type="number" name="party">$5.99 each<br>
<label>Sweet Treats</label><br>
<input type="number" name="sweet">$1.55 per person (1.5 pieces/person)<br>
<label>Beverages & Extras</label><br>
<input type="number" name="soft">Soft Drinks (355mL)<br>
<input type="number" name="chocolate">Chocolate Milk (500mL)<br>
<input type="number" name="white">White Milk 2% (500mL)<br>
<input type="number" name="pickle">Huge Dill Pickle (Whole or Quartered)<br>
</fieldset>
<p id='totalPrice'>0</p>
</fieldset>
</div>
<input type='submit' id='submit' value='Validate!'>
</div>
</form>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="js/formcalculations.js"></script>
<script src="js/validator.min.js"></script>
</body>
</html>
THE JAVASCRIPT (JQUERY):
$( document ).ready(function() {
var grandtotal = function() {
var total = 0;
$('input:checkbox:checked').each(function(){
total += isNaN(parseFloat($(this).val())) ? 0 : parseFloat($(this).val());
});
var small = $('[name="smallsan"]').val()*3.65;
var large = $('[name="largesan"]').val()*4.05;
var delights = $('[name="delights"]').val()*4.30;
var bagel = $('[name="bagel"]').val()*4.10;
var spinach = $('[name="spinach"]').val()*4.10;
var party = $('[name="party"]').val()*5.99;
var sweet = $('[name="sweet"]').val()*1.55;
var soft = $('[name="soft"]').val()*1.25;
var chocolate = $('[name="chocolate"]').val()*1.59;
var white = $('[name="white"]').val()*1.39;
var pickle = $('[name="pickle"]').val()*1.30;
$("#totalPrice").html(small + large + total + delights + bagel + spinach + party + sweet + soft + chocolate + white + pickle);
// console.log(small + large + total + delights + bagel + spinach + party + sweet + soft + chocolate + white + pickle);
}
// var grandtotal = grandtotal();
$('input').change(function () {
grandtotal();
});
$("#calculatoform").validator().on("submit", function (event) {
if (event.isDefaultPrevented()) {
formError();
submitMSG(false, "Did you fill in the form properly?");
} else {
event.preventDefault();
submitForm();
}
});
function submitForm(){
var firstname = $("#firstname").val();
var address = $("#address").val();
var company = $("#company").val();
var email = $("#email").val();
var phonenumber = $("#phonenumber").val();
var small = $('[name="smallsan"]').val();
var large = $('[name="largesan"]').val();
var delights = $('[name="delights"]').val();
var bagel = $('[name="bagel"]').val();
var spinach = $('[name="spinach"]').val();
var party = $('[name="party"]').val();
var sweet = $('[name="sweet"]').val();
var soft = $('[name="soft"]').val();
var chocolate = $('[name="chocolate"]').val();
var white = $('[name="white"]').val();
var pickle = $('[name="pickle"]').val();
$.ajax({
type: "POST",
url: "submitform.php",
data: "firstname=" + firstname + "&email=" + email + "&company=" + company + "&phonenumber=" + phonenumber + "&address=" + address + "&small=" + small + "&large=" + large + "&delights=" + delights + "&bagel=" + bagel + "&spinach=" + spinach + "&party=" + party + "&sweet=" + sweet + "&soft=" + soft + "&chocolate=" + chocolate + "&white=" + white + "&pickle=" + pickle,
success : function(text){
if (text == "success"){
formSuccess();
} else {
formError();
}
}
});
}
function formSuccess(){
$("#calculatoform")[0].reset();
submitMSG(true, "Message Submitted!")
}
function formError(){
}
function submitMSG(valid, msg){
if(valid){
var msgClasses = "h3 text-center tada animated text-success";
} else {
var msgClasses = "h3 text-center text-danger";
}
$("#submit").removeClass().addClass(msgClasses).text(msg);
}
});
THE PHP:
<?php
$errorMSG = "";
if (empty($_POST["firstname"])) {
$errorMSG = "Name is required ";
} else {
$firstname = $_POST["firstname"];
}
if (empty($_POST["email"])) {
$errorMSG .= "Email is required ";
} else {
$email = $_POST["email"];
}
if (empty($_POST["company"])) {
$errorMSG .= "Message is required ";
} else {
$company = $_POST["company"];
}
if (empty($_POST["address"])) {
$errorMSG .= "Message is required ";
} else {
$address = $_POST["address"];
}
if (empty($_POST["phonenumber"])) {
$errorMSG .= "Message is required ";
} else {
$phonenumber = $_POST["phonenumber"];
}
$small = $_POST["small"];
$large = $_POST["large"];
$delights = $_POST["delights"];
$bagel = $_POST["bagel"];
$spinach = $_POST["spinach"];
$party = $_POST["party"];
$sweet = $_POST["sweet"];
$soft = $_POST["soft"];
$chocolate = $_POST["chocolate"];
$white = $_POST["white"];
$pickle = $_POST["pickle"];
$value = implode(',', $_POST['Executive']);
$hospitality = $_POST["Hospitality"];
$nibbler = $_POST["Nibbler"];
$sliced = $_POST["Sliced"];
$cheese = $_POST["Cheese"];
$EmailTo = "mmaffei@larche.com";
$Subject = "Order from" . $firstname;
// prepare email body text
$Body = "";
$Body .= "Here's the order from: ";
$Body .= "Name: ";
$Body .= $firstname;
$Body .= "\n";
$Body .= "Email: ";
$Body .= $email;
$Body .= "\n";
$Body .= "Company: ";
$Body .= $company;
$Body .= "\n";
$Body .= "Address: ";
$Body .= $address;
$Body .= "\n";
$Body .= "Phone: ";
$Body .= $phonenumber;
$Body .= "\n";
$Body .= "Executive Tray: ";
$Body .= $value;
$Body .= print_r($value);
$Body .= "\n";
$Body .= "Hospitality Tray: ";
$Body .= $hospitality;
$Body .= "\n";
$Body .= "Meat & Cheese Nibbler: ";
$Body .= $nibbler;
$Body .= "\n";
$Body .= "Sliced Cheese Tray: ";
$Body .= $sliced;
$Body .= "\n";
$Body .= "Cheese Nibbler: ";
$Body .= $cheese;
$Body .= "\n";
$Body .= "SANDWICH TRAYS Small version: ";
$Body .= $small;
$Body .= "\n";
$Body .= "SANDWICH TRAYS Large version: ";
$Body .= $large;
$Body .= "\n";
$Body .= "Breakfast Delights: ";
$Body .= $delights;
$Body .= "\n";
$Body .= "Bagel Tray: ";
$Body .= $bagel;
$Body .= "\n";
$Body .= "Spinach Dip Platters: ";
$Body .= $spinach;
$Body .= "\n";
$Body .= "Party Ideas: ";
$Body .= $party;
$Body .= "\n";
$Body .= "Sweet Treats: ";
$Body .= $sweet;
$Body .= "\n";
$Body .= "Beverages & Extras: ";
$Body .= "Soft Drinks: ";
$Body .= $soft;
$Body .= "\n";
$Body .= "Chocolate Milk: ";
$Body .= $chocolate;
$Body .= "\n";
$Body .= "White Milk: ";
$Body .= $white;
$Body .= "\n";
$Body .= "Huge Dill Pickle: ";
$Body .= $pickle;
$Body .= "\n";
$Body .= "For a gran total of: ";
$Body .= $small + $large + $delights + $bagel + $spinach + $party + $sweet + $soft + $chocolate + $white + $pickle;
$Body .= "\n";
// send email
$success = mail($EmailTo, $Subject, $Body, "From:".$email);
// redirect to success page
if ($success && $errorMSG == ""){
echo "success";
}else{
if($errorMSG == ""){
echo "Something went wrong :(";
} else {
echo $errorMSG;
}
}
?>
In your javascript submitForm() function you do not include the submission of the "Executive", "Hospitality", "Nibbler", "Sliced" or "Cheese" fields.
In your data string they do not exist...
data: "firstname=" + firstname + "&email=" + email + "&company=" + company + "&phonenumber=" + phonenumber + "&address=" + address + "&small=" + small + "&large=" + large + "&delights=" + delights + "&bagel=" + bagel + "&spinach=" + spinach + "&party=" + party + "&sweet=" + sweet + "&soft=" + soft + "&chocolate=" + chocolate + "&white=" + white + "&pickle=" + pickle,
This means those fields are never submitted to the PHP form handler, so that's why you can't get anything from them.
Instead of the complicated and verbose method of assigning every input to a variable and then crafting the data string yourself, why not try a simpler and more future proof method such as...
var datastring = $("#calculatoform").serialize();
$.ajax({
type: "POST",
url: "submitform.php",
data: datastring,
success : function(text){
if (text == "success"){
formSuccess();
} else {
formError();
}
}
});