Trouble w/ Form Processing using jQuery + PHP

Question

I'm having the hardest time getting a simple form to process using jQuery and PHP. I've tried getting the data via $_POST, $_GET, and $_REQUEST but I guess I'm missing a simple line of code or a complete process altogether.

app.js

$(document).ready(function() {
    $('#sucMsg').hide();
    $('#errMsg').hide();
    $('form').on('submit', function(event) {
        event.preventDefault();
        var form = $(this);
        alert(form.serialize());
        $.ajax(form.attr('action'), {
            type: 'POST',
            contentType: 'application/json',
            dataType: 'html',
            data: form.serialize(),
            success: function(result) {
                form.remove();
                $('#sucMsg').append(result);
                $('#sucMsg').fadeIn();
                console.log(result);
            },
            error: function(xhr, ajaxOptions, thrownError) {
                console.log(thrownError);
                $('#errMsg').append(thrownError);
                $('#errMsg').fadeIn();
            }

        });
    });
});

formProcess.php

<?php
    if ($_POST) {
        echo "Posted something.";
    } elseif ($_GET) {
        echo "Getted something.";
    } else {
        echo "Nothing is working...";
    }
    $tagNumberPost = $_POST['inputTagNumber'];
    $pricePost = $_POST['inputPrice'];
    $makePost = $_POST['inputMake'];

    $tagNumberRequest = $_REQUEST['inputTagNumber'];
    $priceRequest = $_REQUEST['inputPrice'];
    $makeRequest = $_REQUEST['inputMake'];

    if (isset($_REQUEST['inputTagNumber'])) {
        echo '$_REQUEST works...\n';
    } elseif (isset($_POST['inputTagNumber'])) {
        echo '$_POST works...\n';
    } elseif (isset($_GET['inputTagNumber'])) {
        echo '$_GET works...\n';
    } else {
        echo "Nothing is working...";
    }

    echo "<br/>";
    echo "Tag number: " . $tagNumber . "<br/>\n";
    echo "Make: ".$makePost . "<br/>\n";
    echo "Price: " . $pricePost . "<br/>\n";
?>

What I'm expecting to get back is the all the echo's in my formProcess.php to print out in my #sucMsg div.

What do you see in your alert box on form submit? Add it to the question. — sealocal
– sealocal, Commented Dec 15, 2014 at 1:03
What does form.attr('action') return? Are you sure that you're hitting the url of formPrcoess.php? — sealocal
– sealocal, Commented Dec 15, 2014 at 1:07
Sorry, the form.attr('action') points to formProcess.php. I am sure I'm hitting the url of formProcess.php because the echo calls appear in my result and are .appended to my #sucMsg and then faded in. — gh0st
– gh0st, Commented Dec 15, 2014 at 1:10

Kevin · Accepted Answer · 2014-12-15 01:25:52Z

1

Why are you setting your contentType: as application/json? You do not need that. Remove it.

contentType: 'application/json', // remove this line

Just leave it to its default as application/x-www-form-urlencoded if your request is POST.

And in your PHP, $tagNumber is undefined.

if (isset(
    $_POST['inputTagNumber'], 
    $_POST['inputTagNumber'],
    $_POST['inputMake'],
)) {

    $tagNumber = $_POST['inputTagNumber']; // define tagNumber
    $pricePost = $_POST['inputPrice'];
    $makePost = $_POST['inputMake'];

    echo "<br/>";
    echo "Tag number: " . $tagNumber . "<br/>\n";
    echo "Make: ".$makePost . "<br/>\n";
    echo "Price: " . $pricePost . "<br/>\n";

}

edited Dec 15, 2014 at 1:25

answered Dec 15, 2014 at 1:07

Kevin

41.9k12 gold badges57 silver badges72 bronze badges

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

3 Comments

Kevin Over a year ago

@gh0st because you're sending it as application/json which wouldn't make sense. Your sending it as a form url encoded not json. So that your $_POST values are populated.

gh0st Over a year ago

Ok so contentType defines what is being sent in the ajax method and dataType defines what is returned. I think I understand now. I was following a tutorial and was under the impression that contentType:json was what was being sent once I serialized.

Kevin Over a year ago

@gh0st yes, thats basically it. your sending a form post, so setting it to application/json is unneeded. glad this helped

Collectives™ on Stack Overflow

Trouble w/ Form Processing using jQuery + PHP

app.js

formProcess.php

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

app.js

formProcess.php

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related