CODEWITHSUNDEEP
phpajaxformsjquery-ui
Blaine Hurtado
Blaine Hurtado

Reputation: 139

Passing form info from UI Dialog via AJAX

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.

Upvotes: 0

Views: 192

Answers (2)

Madhurendra Sachan
Madhurendra Sachan

Reputation: 760

From my view i found two errors

    ('#resume-begin').hide();//$ missing

and another 

var string = $('#resume-create-it').serialize();

should be

var string = $('#project-form').serialize();

As serialize applies to Form. https://api.jquery.com/serialize/

Upvotes: 1

Nick Chapman
Nick Chapman

Reputation: 4634

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.

Upvotes: 0

Related Questions