Question

在用户选择不同选项时，计算项目成本的表单存在一些问题。因此，选择第一个选项，它将显示选项选项，然后向下移动到下一个选项步骤并选择一个选项，它将显示您刚刚选择的选项，但它会将第一个选项设置为未定义。

我创建了一个jsfiddle，它位于https://jsfiddle.net/2k5u3tc0/

<div>
<h2>Step One</h2>
<input type="radio" name="size" id="sm" value="Small" class="size" /><label for="">Small</label>
<input type="radio" name="size" id="md" value="Medium" class="size" /><label for="">Medium</label>
<input type="radio" name="size" id="cu" value="Custom" class="size" /><label for="">Custom</label>
</div>
<div>
<h2>Step Two</h2>
<input type="radio" name="print" id="ss" value="Single Sided" class="size" /><label for="">Single Sided</label>
<input type="radio" name="print" id="ds" value="Double Sided" class="size" /><label for="">Doubled Sided</label>
</div>
<div>
<h2>Step Three</h2>
<input type="radio" name="finish" id="sc" value="Straight cut" class="size" /><label for="">Straight cut</label>
<input type="radio" name="finish" id="he" value="Hemmed edges" class="size" /><label for="">Hemmed edges</label>
<input type="radio" name="finish" id="ey" value="Eyelets" class="size" /><label for="">Eyelets</label>
<input type="radio" name="print" id="re" value="Reinforced edges" class="size" /><label for="">Reinforced edges</label>
</div>
<div id="totalPrice"></div>

JQuery的

$(function() {
$(".size, .print").click(function() {
//$(document).on("change","#frmProduct", function() {

    var size = $(".size:checked").val();
    var print = $(".print:checked").val();

    var dataString = 'size='+ size +'&print='+ print;

    $.ajax({
        type: "POST",
        url: "../../../inc/calculate.php",
        data: dataString,
        cache: false,
        success: function(html){
            $("#totalPrice").html(html);
        }
    });

    return false;
});
});

在javascript中加载一个名为calculate.php的php页面，这里的代码非常简单

$size=$_POST['size']; 
$print=$_POST['print'];
$finish= $_POST['finish'];
$ipadress = $_SERVER['REMOTE_ADDR'];
$datenow = strtotime(date('d-m-Y H:i:s'));
$today = strtotime(date('d-m-Y'));

echo $size.' '.$print.' '.$finish.' '.$today;

但这会返回类似

的内容

Small undefined 1491519600

然后如果你转到第二步并选择一个，它将是

undefined Single Sided 1491519600

Answer 1

出现问题是因为当您选择一个单选按钮时，未选择其他输入中的按钮（在js中未定义），并且该值会在点击发送到您的php时发送。

return false;会阻止点击时实际选择广播。

您需要删除return false;并根据您希望的方式工作，确保在发送AJAX之前已选择两个输入组。

checkbox select运行javascript调用，但不能获取所有值

1 个答案: