Question

您可以在http://team.prteamsales.com/orderForm.php上看到此版本的实时版本。当被要求输入formId时，请输入BroadRunTrack2013。然后尝试将项目添加到购物车。确保将信息放入播放器名称中。现在只是放垃圾。选择Runners Hat并选择颜色/大小和数量然后点击完成。

我有一个包含id（addToCart）按钮的页面。当用户单击此按钮时，将出现一个对话窗口。此对话框窗口的内容是addToCart.php上的一个表单（ID为#theStuff）。因此，当用户单击addToCart时，ajax会调用addToCart.php并将表单元素加载到对话框窗口中。然后，用户填写表单的所有元素。用户完成后，他点击完成。模态的完整按钮功能可以做两件事。 1）序列化#theStuff表单中的数据，并通过ajax将其发布到processor.php页面。

我遇到的问题是#theStuff的序列化是一个空的POST。

orderForm.php

jquery

$('.addToCart').click(function () {
        //modal dialog settings....
        saveDialog.dialog("option", "buttons", {
            "Complete": function () {
                console.log($("form#theStuff"));
                var datastring = $("form#theStuff").serializeArray();
                $.ajax({
                    type: "POST",
                    url: "PostToCart.php",
                    data: datastring,
                    success: function (result) {
                        $.ajax({
                            type: "POST",
                            url: "getCartSum.php",
                            success: function (rez) {
                                $('#cartSum').html(rez);
                            }
                        });
                        var saveDialog = $('#dialogAddToCart');
                        saveDialog.dialog("option", "buttons", {
                            "Back to Order Form": function () {
                                $(this).dialog("close");
                            }
                        });
                        $('#dialogAddToCart').dialog('option', 'title', 'Request Complete');
                        $(".ui-dialog-titlebar-close", this.parentNode).hide();
                        $('#dialogAddToCart').html(result);
                    }
                });
            },
            "Cancel": function () {
                $(this).dialog("close");
            }
        });
        $('#dialogAddToCart').dialog('open');
        var itemId = $(this).attr('id');
        var formId = $('#formId').val();
        $.ajax({
            type: "POST",
            url: "addToCart.php",
            data: "itemId=" + itemId + "&formId=" + formId,
            success: function (result) {
                $('#dialogAddToCart').html(result);
            }
        });
    }

下面的原始表格，与当前的问题无关。这是用户开始的页面

 <form id='orderData' name='orderData' method='POST' action='#'>
 <table align='right' class='playerInfo' width='60%'>
    <th>Name</th>
    <td><input type='text' name='playerName' id='playerName'></td>
    <th>Address</th>
    <td><input type='text' name='playerAddress' id='playerAddress'></td>
 </tr>
 <tr>
    <th>City</th>
    <td><input type='text' name='playerCity' id='playerCity'></td>
    <th>State</th>
    <td><input type='text' name='playerState' id='playerState'></td>
 </tr>
 <tr>
    <th>Zip Code</th>
    <Td><input type='text' name='playerZip' id='playerZip'></td>
 </tr>
 <tr>
    <th>Phone Number</th>
    <td><input type='text' name='playerPhone' id='playerPhone'></td>
    <th>Email Address</th>
    <td><input type='text' name='playerEmail' id='playerEmail'></td>
 </tr>
 <tr>
....//some other inputs

 <td class='borderRight' ><input type='button' class='addToCart' id='addToCart_" . $packages[$a]['id'] . "' value='Add to Cart'></td>
 </form>

addToCart.php

  <form id='theStuff' name='theStuff' method='POST' action='#'>

 echo "<td class='dialog'><select id='item[" . $row['itemId'] . "][size]' name='item[" . $row['itemId'] . "][size]' class='pkgVerify'>
                                            <option value=''></option>";
            foreach ($sizes as $value)
            {
                            echo "<option value='" . $value . "'>" . $value . "</option>";
            }
            echo "</select></td>";
  echo "<input type='text' id='item[" . $row['itemId'] . "][nameOnBack]' name='item[" . $row['itemId'] . "][nameOnBack]'></td>";

   .....//a bunch of other elements.

PostToCart.php

 <?php

 print_r($_POST);
 ?>

Answer 1

我认为这就是你要做的。注意我假设你在某个阶段之前声明了你的itemId var;

    // Javascript
var form = $("form#theStuff").serializeArray();
$.ajax({  
    type: "POST",  
    url: "addToCart.php",
    data: {
        form: form,
        itemID: itemId
    },
            dataType: "json"
    success: function(result) {
        $('#dialogAddToCart').html(result);
    },
    error: function(err) {
        console.log(err);
    }
});


// PHP;
$form = $_POST['form'];
$itemID = $_POST['itemID'];

也许添加dataType会有所帮助。

Answer 2

我认为您需要首先学习如何使用Firebug和Chrome的开发人员工具进行调试，设置断点并逐步执行代码，确保所有变量值都符合您的预期。使用这种方法，我能够确定jquery实际上是在找到表单，并在Firefox中正确地序列化它，因此你可以排除它并停止尝试找到一个不存在的问题的解决方案。

除此之外，请确保使用错误处理函数检查ajax调用的结果。我推荐类似下面的内容

error: function(xhr, status, error) {
    console.log(status+":"+error+":"+xhr.responseText);
}

您也没有验证成功数据的结果，确保它确实成功。

firefox ajax加载表单，不能从该表单序列化元素

2 个答案: