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

标签 javascript php ajax mailto

我刚刚创建了一个很好的工具来计算普通面包店的结果(相加、相乘并通过电子邮件发送总数)。

我的问题是我无法获取复选框输入中的值。我尝试了几种方法，但我能够从单选复选框获得的唯一值是 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);

链接:我的代码已启动并在此页面上运行:

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

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

最佳答案

在您的 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 表单处理程序，因此您无法从它们获取任何内容。

与其使用复杂而冗长的方法将每个输入分配给变量，然后自己制作数据字符串，为什么不尝试更简单且更面向 future 的方法，例如......

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

关于javascript - 使用 php、ajax 和 javascript 计算订单结果，复选框不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44185034/

上一篇：javascript - 输入字段需要受控和非受控

下一篇：javascript - 如何在应用程序中实现选项卡功能？

相关文章：

javascript - 从数组返回 "false" bool 值的数量 - MobX 和 React

javascript - 计算移动浏览器导航器

php - MySQL 查询根据得票最高的项目进行选择

php - 上传完成后如何将新文件名返回到 Dropzone 作为隐藏表单输入？

javascript - currentArray.forEach 不是函数(Fetch API)

javascript - coords.accuracy 是如何测量的，它的单位是什么？

javascript - 正则表达式 - 如果不在两个字符内则拆分

javascript - 在 OOP 中使用 Angular

php - 使用 Jquery Ajax 从 PHP 获取 MYSQL 数据时出现 Parsererror

javascript - 如何在ajax加载的页面上实现 "back"按钮

©2024 IT工具网  联系我们