如何使用JQuery& amp;将值从弹出窗体传递到PHP页面阿贾克斯?

时间:2014-05-19 08:08:45

标签: php jquery html ajax

看来我的问题之前曾被问过几次,但我仍然无法让我的代码工作 - 即使我相信我使用与这些问题的解决方案完全相同的代码。

所以我使用SimpleModal JQuery plugin在弹出窗口中创建表单。该窗口包含以下HTML:

<div id="containerInfo" class='modalPopUp' style='display:none'>
        <form id="frmContainerInfo" method="post" action="index.php">
            <div style="border-bottom: 1px solid #000">
                <h1>Test popup/h1>
            </div>
            <br/>
            <div class='cargoInfoForm'>
                    <label class='cifLabel'>Location:</label>
                    <select id="ddlLoc" name="ddlLoc" class="cifDDL" style="width: 130">
                        <option value="Netherlands">Netherlands</option>
                        <option value="Paris">Paris</option>
                        <option value="Hongkong">Hongkong</option>
                        <option value="Tokyo">Tokyo</option>
                    </select>
                    <br/>
                    <label class='cifLabel'>Date:</label>
                    <input type="text" id="locDatePicker" name="locDatePicker" value="" class="cifInputField" style="width: 130">
                    <br/>
                    <button id="saveLocInfo" name="buttonSubmitInfo" type="submit" class="cifSaveButton">Save</button>
            </div>
        </form>
</div>

然后我按下弹出窗口中的“保存”按钮,尝试将此表单的结果发送到我的PHP页面,这样我就可以检索两个字段的值(ddLock和locDatePicker)。为此,我尝试使用JQuery和Ajax,如下所示:

<script>
        $(document).ready(function() 
        {
             $(".editDisplay-button").click(function(){
                $("#containerInfo").modal();
                }); 

            $("#saveLocInfo").on("click", function(){
            var locval  = $("#ddlLoc").val();
            var dateval    = $("#locDatePicker").val();
            var locvalLen    = locval.length;

            if(locvalLen < 4) {
                    $("#locval").addClass("error");
            }

            if(locvalLen >= 4) {
        // if location lettercount is four or bigger
        $("#saveLocInfo").replaceWith("<em>sending...</em>");

                $.ajax({
                type: 'POST',
                url: 'container.php',
                data: $("#frmContainerInfo").serialize(),
                success: function(data) {
                                var $response=$(data);
                                alert($response.filter('#ddlLoc').text());   
                            }
                    });


                    }
                });
            }); 

    </script>

我检索的数据似乎不包含任何值,因为我的警报未显示位置字段值。考虑到我正在模仿其他有此问题的人的代码,我觉得很奇怪。在这个JQuery / Ajax代码之后,我尝试访问我的PHP文件中的值(虽然我相信我从未检索过要开始的值),如下所示:

<?php
     $location = $_POST['ddlLoc'];
     $dateFieldValue = $_POST['locDatePicker'];

     echo ($location);
     echo ($dateFieldValue);
?>

如何才能使其工作,或者如何在PHP文件中检索弹出窗口窗体的输入字段的值?

谢谢!

1 个答案:

答案 0 :(得分:2)

这是因为您尝试使用不是输入$_POST的密钥从name数组中检索值。

您正在使用该ID。错误!

<?php
     $location = $_POST['ddlLock']; // "ddLock" is the ID in the HTML. Well, neither that because there's a "k" letter.
     $dateFieldValue = $_POST['locDatePicker']; // "locDatePicker" is the ID in the HTML

     echo ($location);
     echo ($dateFieldValue);
?>

您的输入文字

<input type="text" id="locDatePicker" value="" class="cifInputField" style="width: 130">

甚至没有任何name属性。将其更改为:

<input type="text" id="locDatePicker" name="locDatePicker" value="" class="cifInputField" style="width: 130">

<select>也是如此。那是你的:看到了吗?名称和ID不同,您在PHP代码中调用ID。

<select id="ddlLoc" name="ddlLocOptions" class="cifDDL" style="width: 130">
    <option value="Netherlands">Netherlands</option>
    <option value="Paris">Paris</option>
    <option value="Hongkong">Hongkong</option>
    <option value="Tokyo">Tokyo</option>
</select>

将其更改为:

<select id="ddlLoc" name="ddlLoc" class="cifDDL" style="width: 130">
    <option value="Netherlands">Netherlands</option>
    <option value="Paris">Paris</option>
    <option value="Hongkong">Hongkong</option>
    <option value="Tokyo">Tokyo</option>
</select>

并更改您的PHP代码以便它可以正常工作

<?php
     $location = $_POST['ddlLoc']; // "ddLoc" is now the NAME attr
     $dateFieldValue = $_POST['locDatePicker']; // "locDatePicker" is now the NAME attr

     echo ($location);
     echo ($dateFieldValue);
?>

重要 :小心!你写了&#39; ddlLoc k &#39;在PHP中,但名称应该是&#39; ddlLoc&#39;我想(k字母是不必要的)