How to receive jquery ajax data in a php file

Question

I am trying to create a form for submitting resume.

I need the candidate name, email , resume cover and the resume(file).

var candidateName = $('#candidateName').val();
var candidateEmail = $('#candidateEmail').val();
var candidateMessage = $('#candidateMessage').val();
var file_data = $('#candidateResume').prop('files')[0];


var form_data = new FormData();
form_data.append('file', file_data);
form_data.append('name', candidateName);
form_data.append('id', candidateEmail);
form_data.append('msg', candidateMessage);
console.log(form_data);

$.ajax({
    url: "cvForm.php",
    type: "POST",
    data: {candata: form_data},
    success : function(data){
        console.log(data);
    },
    contentType: false,
    processData: false
});

nothing is being returned in my cvForm.php file when I

var_dump($_POST) or
var_dump($_FILES)

when I

var_dump($_POST['candata']) - it says undefined index

The HTML

<form id="cvSubmit" class="mui-form">
                <div>
                    <span class="form-success-msg" id="cv-form-success-msg">
                        Thanks for reaching out to us. We will get back to you shortly.
                    </span>
                </div>
                <div class="row">
                    <div class="col-sm-6">
                        <div class="mui-textfield mui-textfield--float-label">
                            <input type="text" id="candidateName" class="mui--is-empty mui--is-untouched mui--is-pristine">
                            <label>Name<span class="red-text">*</span></label>
                            <span class="error" id="cv-name-error">Please enter your name</span>
                        </div>
                        <div class="mui-textfield mui-textfield--float-label">
                            <input type="email" id="candidateEmail" class="mui--is-empty mui--is-untouched mui--is-pristine">
                            <label>Email<span class="red-text">*</span></label>
                            <span class="error" id="cv-email-error">Oops!! Looks like its an incorrect email id. Try again</span>
                        </div>


                        <div class="row">
                            <div class="col-xs-12 file-attachment-wrapper">
                                <input class="file-addach" type="file" id="candidateResume">
                                <span>We accept .DOCX,.Doc,pdf,.Txt upto 2 MB.</span>
                            </div>
                        </div>

                    </div>

                    <div class="col-sm-6">

                        <div class="mui-textfield mui-textfield--float-label">
                            <label>Message<span class="red-text">*</span></label><br><br>

                            <textarea id="candidateMessage" rows="5" class="mui--is-empty mui--is-untouched mui--is-pristine"></textarea>
                            <span class="error" id="cv-message-error">That's not very clear...could you rephrase</span>
                        </div>

                        <button type="button" class="mui-btn mui-btn--raised red-btn" onclick="cvSubmit()"> SEND </button>
                    </div>

                </div>
            </form>

Please help. I see this is a common question but none of the solution seems to work for me. Some code refreshes the page, which I don't want to happen.

Always use `F12` dev-console in the browser while developing, mostly console and network tab. — JustOnUnderMillions, Apr 27 '17 at 13:48
Possible duplicate of [Problems with passing data to php using jquery ajax](http://stackoverflow.com/questions/40504426/problems-with-passing-data-to-php-using-jquery-ajax) — Gabriel Heming, Apr 27 '17 at 13:50
[Have you watched the AJAX request / response in the browser's developer tools? Have you included the jQuery library in the project? Are there any errors reported? Are you running this on a web-server?](http://jayblanchard.net/basics_of_jquery_ajax.html) — Jay Blanchard, Apr 27 '17 at 13:58
are you paying attention to comments up here? I/we shouldn't have to post an answer in order to get your attention. I myself specifically posted a comment for you to post the HTML for this, and that was almost 10 mins. ago. Your question stands to get closed with [PHP: “Notice: Undefined variable”, “Notice: Undefined index”, and “Notice: Undefined offset”](http://stackoverflow.com/q/4261133/1415724) based on the error message you posted and the one that you shown in one of the answers' comment area. We/I am trying our best to help but you seem to be sticking to one answer instead. — Funk Forty Niner, Apr 27 '17 at 13:58
@StacyJ Thanks. Where is the `cvSubmit()` method? Also handling files requires a valid enctype. This Q&A http://stackoverflow.com/q/18428935/1415724 shows an example and another http://stackoverflow.com/q/14495296/1415724 and http://stackoverflow.com/q/28121129/1415724. Plus, you may need to "name" your inputs. — Funk Forty Niner, Apr 27 '17 at 14:10
@StacyJ and your `var form_data = new FormData();` should most likely read as `var form_data = new FormData($('#cvSubmit'));` — Funk Forty Niner, Apr 27 '17 at 14:11
@StacyJ I revisted the question but saw no extra activity. You can ping me back if you want, I wish you well with this, *cheers* — Funk Forty Niner, Apr 27 '17 at 14:45

score 0 · Answer 1 · answered Apr 27 '17 at 13:46

Remove this line from your JS:

contentType: false,

That's telling jQuery to not set the content-type HTTP header. That header tells PHP how to parse the POSTed body.

Also, formdata can be sent directly:

data: form_data,

Then, in PHP, you should find for example $_POST['name'] available.

BenM · Answer 2 · 2017-04-27T13:52:19.770

0

You need to pass form_data in its normal form, instead of a property of another JSON object:

$.ajax({
    url: 'cvForm.php',
    type: 'post',
    data: form_data,
    processData: false,
    success : function(data){
        console.log(data);
    }
});

Now inside of your PHP script, you will have access to $_POST['name'], $_POST['id'] and $_POST['msg']. Similarly, $_FILES['file'] is now available too.

edited Apr 27 '17 at 13:52

answered Apr 27 '17 at 13:46

BenM

52,573
26
113
168

I did var_dump($_POST['name']) - it gives me Undefined index: name – Stacy J Apr 27 '17 at 13:51
Did you copy the excerpt exactly as posted above? – BenM Apr 27 '17 at 13:52
What happens if you print_r() the $_POST array? – BenM Apr 27 '17 at 13:57
I can see the data in an array..sharing the result below – Stacy J Apr 27 '17 at 14:01
Array ( [------WebKitFormBoundaryX29YrY3X1X9U8Efd Content-Disposition:_form-data;_name] => "file" undefined ------WebKitFormBoundaryX29YrY3X1X9U8Efd Content-Disposition: form-data; name="name" John Doe ------WebKitFormBoundaryX29YrY3X1X9U8Efd Content-Disposition: form-data; name="id" john.doe@gmail.com ------WebKitFormBoundaryX29YrY3X1X9U8Efd Content-Disposition: form-data; name="msg" Share your CV with us and we’ll be happy to have a look at it. ------WebKitFormBoundaryX29YrY3X1X9U8Efd-- ) – Stacy J Apr 27 '17 at 14:02

score 0 · Answer 3 · answered Apr 27 '17 at 16:53

Try this. It might help you.

<html>
    <head>
        <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
    </head>
    <body>
        <form id="cvSubmit" class="mui-form">
            <div>
                <span class="form-success-msg" id="cv-form-success-msg">
                    Thanks for reaching out to us. We will get back to you shortly.
                </span>
            </div>
            <div class="row">
                <div class="col-sm-6">
                    <div class="mui-textfield mui-textfield--float-label">
                        <input type="text" id="candidateName" class="mui--is-empty mui--is-untouched mui--is-pristine">
                        <label>Name<span class="red-text">*</span></label>
                        <span class="error" id="cv-name-error">Please enter your name</span>
                    </div>
                    <div class="mui-textfield mui-textfield--float-label">
                        <input type="email" id="candidateEmail" class="mui--is-empty mui--is-untouched mui--is-pristine">
                        <label>Email<span class="red-text">*</span></label>
                        <span class="error" id="cv-email-error">Oops!! Looks like its an incorrect email id. Try again</span>
                    </div>


                    <div class="row">
                        <div class="col-xs-12 file-attachment-wrapper">
                            <input class="file-addach" type="file" id="candidateResume">
                            <span>We accept .DOCX,.Doc,pdf,.Txt upto 2 MB.</span>
                        </div>
                    </div>

                </div>

                <div class="col-sm-6">

                    <div class="mui-textfield mui-textfield--float-label">
                        <label>Message<span class="red-text">*</span></label><br><br>

                        <textarea id="candidateMessage" rows="5" class="mui--is-empty mui--is-untouched mui--is-pristine"></textarea>
                        <span class="error" id="cv-message-error">That's not very clear...could you rephrase</span>
                    </div>

                    <button type="submit" class="mui-btn mui-btn--raised red-btn"> SEND </button>
                </div>

            </div>
        </form>

        <script>

            $(document).ready(function(){
                $("#cvSubmit").submit(function(e) {
                            e.preventDefault();


                    var candidateName = $('#candidateName').val();
                    var candidateEmail = $('#candidateEmail').val();
                    var candidateMessage = $('#candidateMessage').val();
                    var file_data = $('#candidateResume').prop('files')[0];


                    var form_data = new FormData();
                    form_data.append('file', file_data);
                    form_data.append('name', candidateName);
                    form_data.append('id', candidateEmail);
                    form_data.append('msg', candidateMessage);
                    console.log(form_data);

                    $.ajax({
                        url: "cvForm.php",
                        type: "POST",
                        data: form_data,
                        success : function(data){
                            console.log(data);
                        },
                       contentType: false,
                       processData: false
                    });

                });
            });
        </script>
    </body>
</html>

After this code, I was able to see the data in console
Changes the submit button to type 'submit' and handled the event handler for form submit and e.preventDefault() prevents from page refresh.

Hope it helps!

How to receive jquery ajax data in a php file

3 Answers3