How to pass a value from a popup form to a PHP page using JQuery & Ajax?

Question

It appears my question has been asked a couple of times before, yet I still can't seem to get my code to work - even though I believe I use the very same code as the solutions to those questions.

So I am using the SimpleModal JQuery plugin to create a form in a popup window. This window contains the following 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>

Then I try to send the results of this form to my PHP page upon pressing the Save button in the popup window, so I can retrieve the value of the two fields (ddLock and locDatePicker). To do this I attempt to use JQuery and Ajax, which looks like this:

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

It appears the data I retrieve doesn't contain any values, because my alert doesn't show the location field value. Which I find odd considering I am mimicking working code of other people that had this problem. After this JQuery/Ajax code I try to access the values in my PHP file (though I believe I never retrieved the values to begin with), which looks like this:

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

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

How can I get this to work, or alternatively, how can I retrieve the values of the input fields of my popup window's form in my PHP file?

Thanks!

Have you tried using local storage or cookie to store ddLock and locDatePicker to retrieve it later? — Franz Noel
– Franz Noel, Commented May 19, 2014 at 8:21

Kevin Cittadini · Accepted Answer · 2014-05-19 08:22:18Z

2

This happens because you're trying to retrive the value from the $_POST array using a key that is NOT the name of the inputs.

You're using the ID. Wrong!

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

Your input text

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

doesn't even have any name attribute. Change it to this:

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

Same thing for the <select>. That's yours: See? name and ID are different and you're calling the ID in your PHP code.

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

Change it to this:

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

And change your PHP code so it will work

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

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

IMPORTANT: Be careful! You wrote 'ddlLoc k ' in the PHP, but the name should be 'ddlLoc' i guess ( k letter is needless )

edited May 19, 2014 at 8:22

answered May 19, 2014 at 8:16

Kevin Cittadini

1,4791 gold badge22 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Kheran Over a year ago

I've been so tunnelvisioned on the Jquery part that I did not check my HTML naming. I corrected this and used the naming you suggested. I still don't retrieve the two values unfortunately. Shouldn't the alert($response.filter('#ddlLoc').text()); part already show the name of location? Because it does not. I feel like I am not retrieving any data in the JQuery. Thanks for the naming heads up though!

Kevin Cittadini Over a year ago

@Kheran, well, that's the problem. You missed the names. ddlLoc should be the name of the <select> and the key name in the $_POST, while locDatePicker is the name of the <input> and the key name. It's as simple as that. Unfortunately I cannot check your code from here. Try maybe to debug the $_POST array with var_dump. Check also what outputs your $("#frmContainerInfo").serialize()

Kevin Cittadini Over a year ago

@Kheran NP. Try to retrive each value doing $('body').find('#locDatePicker').val() and tell me if this gets the value to you

Kevin Cittadini Over a year ago

@Kheran: Good! Then the plugin dynamicaly removes and re-creates the elements. serialize() should work though. Well, for now, just try to replace it with something like { locDatePicker: $('body').find('#locDatePicker').val(), ddlLoc: $('body').find('#ddlLoc').val() }

Kevin Cittadini Over a year ago

let us continue this discussion in chat

|

Collectives™ on Stack Overflow

How to pass a value from a popup form to a PHP page using JQuery & Ajax?

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related