通过AJAX从UI Dialog传递表单信息

Question

I have the following code:

HTML

<div id="resume-begin" style="background:#CCCCCC; display:inline-block;">
    <img src="/images/plus-plus.png" style="display:inline;" class="trigger"/>
</div>
<div class="input-resume-data" style="display:none;">
    <form id="project-form">
        <label for="resume-create-name">Resume Project Name:</label>
            <input type="text" id="resume-create-it" name="resume-create-it" class="text ui-widget-content ui-corner-all">
    </form>
</div>

jQuery

<script>
    $(document).ready(function() {
        $('#resume-begin').click(function() {
        ('#resume-begin').hide();
        $('.input-resume-data').dialog("open");
        });
    });
</script>

Once the div resume-begin is clicked, it opens my UI Dialog box, which is as follows:

<script>
    $(function() {
        $( ".input-resume-data" ).dialog({
            title: 'Name your Resume Project',
            autoOpen: false,
            resizable: false,
            height: 450,
            width: 380,
            show: { effect: 'drop', direction: "up" },
            modal: true,
            draggable: true,
            buttons: {
                "Submit": function() {
            var $this = $(this);
        var string = $('#resume-create-it').serialize();
                $.ajax({
                    url: 'functions.php',
                    type: 'POST',
                    data: string,
                    success: function(data){
            alert("Project created!");
                        $this.dialog('close');
                    }
                });
            },
                Cancel: function() {
                        $( this ).dialog( "close" );
                $( "#resume-begin" ).show( "slow", function() {
                        });  //end function
                }  //end cancel button
            }  //end buttons
        });  //end dialog
    });  //end jquery function
</script>

What I would like:

Once the user enters the text in the UI-input, and clicks Submit, I want to post the data to the PHP page, where I would save it to the database. Currently, if I enter in data and push submit, the success function works, but the data is not saved in the database.

In my PHP, I try to grab the data like:

//Sanitize the POST values
$resumeProjectname = $_POST['resume-create-it'];

I am unsure if I am passing the data correctly, which is through the variable "string" in jQuery, as well as if I'm retrieving the data correctly in the php file.

Any help would be greatly appreciated. Please let me know if you have any questions!

Thanks.

Answer 1

To send your data do the following

data: {
    resume_name: string
},
dataType: "json"

And then in PHP access it with

$resume_name = $_POST['resume_name'];

And as a final note, I wouldn't call a variable string since string is a keyword in many languages. At first I thought you were trying to tell it that the data you're sending is a string. Also don't call the response from the server data because you use the word data two lines above it. Use something like response.

I should mention You don't have to use JSON. You can use other data types but that is one of the critical pieces that you are missing. You need to set the dataType so that jQuery knows how to format your response. I personally think that since you are using JavaScript to begin with it makes sense to use JavaScript Object Notation.