使用 php、ajax 和 javascript 计算订单结果，复选框不起作用

Question

我刚刚创建了一个很好的工具来计算一家普通面包店的结果（加法、乘法和通过电子邮件发送总数）。

我的问题是我无法获取复选框输入中的值。我尝试了几种方法，但我能够从单选复选框中获得的唯一值是 1（我想这个值是 "true"）。其他一切正常，但我仍然觉得它有点冗长。

这是我的代码：

HTML（问题）：

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

PHP（问题）：

$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：我的代码已启动并在此页面上运行：

http://wilsonpools.larchedigitalmedia.com/foxbakapp/

完整代码（忽略它，仅用于调试目的或建议）

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">.30 per person (2 pieces/person)<br>
                            <label>Bagel Tray</label><br>
                            <input type="number" name="bagel">.10 per person<br>
                            <label>Spinach Dip Platters</label><br>
                            <input type="number" name="spinach">.99 each<br>
                            <label class='radiolabel'><input type="checkbox"  name="alligatorbread" value="3">Alligator or Turtle Bread add .00</label><br/>
                            <label>Party Ideas</label><br>
                            <input type="number" name="party">.99 each<br>
                            <label>Sweet Treats</label><br>
                            <input type="number" name="sweet">.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>

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);
    }

});

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;
    }
}
?>

Answer 1

错误应该在您的 PHP 内。

对于以布尔值作为值的复选框值，如果您使用这种检查，当复选框为 false 时，您将无法在 if 中输入。

尝试更改您对复选框的检查：

if (empty($_POST["checkboxName"])) {
    $errorMSG .= "Message is required ";
} else {
    $checkboxName = $_POST["checkboxName"];
}

对此：

if (isset($_POST["checkboxName"])) {
    $errorMSG .= "Message is required ";
} else {
    $checkboxName = $_POST["checkboxName"];
}

您的问题可能已得到解决。

p.s。这里的空文档来自官方 PHP 文档：

Determine whether a variable is considered to be empty. A variable is considered empty if it does not exist or if its value equals FALSE.

http://php.net/manual/en/function.empty.php

Answer 2

在您的 javascript submitForm() 函数中，您不包括 "Executive"、"Hospitality"、"Nibbler"、"Sliced" 或"Cheese" 个字段。

在您的数据字符串中它们不存在...

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,

这意味着这些字段永远不会提交给 PHP 表单处理程序，因此您无法从中获取任何信息。

与其将每个输入分配给一个变量然后自己制作数据字符串这种复杂而冗长的方法，不如尝试一种更简单、更面向未来的证明方法，例如...

    var datastring = $("#calculatoform").serialize();
    $.ajax({
        type: "POST",
        url: "submitform.php",
        data: datastring,
        success : function(text){
            if (text == "success"){
                formSuccess();
            } else {
                formError();
            }
        }
    });

使用 php、ajax 和 javascript 计算订单结果，复选框不起作用

Calculate a result of an order with php, ajax and javascript, checkboxes don't work

javascript

php

mailto

ajax