CODEWITHSUNDEEP
phpjqueryajax
Martin
Martin

Reputation: 57

Jquery Ajax Acting weird

Hi I have been at this for days now and I just cant figure out why this isn't working, please could someone take a look.

index.php

<form id = "update_status" method = "POST">
                        <textarea id="shadow" name ="user_status" placeholder = "Share what is on your mind!" cols="97" rows="1" title="Share what's on your mind"></textarea>

                        <input style="float:right; margin-top: 0.3%;margin-right : 0% !important;" id = "btnStatus_update" name = "btnStatus_udate" type="button" value="Add Post" title="Your posts will be made public"></input></form>

swift.php

$(document).ready(function(){ 
    $("#btnStatus_update").click(function(e) { 
    e.preventDefault();
    //alert("Confirming function works");
        $.ajax({
        cache: false,
        type: 'POST',
        url: './datacenter.php',
        data: $("#user_status"),
        success: function(d) {
            $("#successMesg").html(d);
        }
        });
    }); 
});

datacenter.php

if (isset($_POST['user_status'])) {
    var_dump($_POST['user_status']);
        foreach ($_POST as $ak => $av) {
            if (empty(trim($_POST['user_status']))) {
                echo 'Say what is on your mind'.' ';
            } else {
                $userstatus = $_POST['user_status'];
                add_user_status($user_data['id'], $userstatus);
            }
        }
    }

using var_dump for testing I was hoping it did return the data, but instead i get NULL, i need the data so i can pass it into the add_user_status function to be added to the database, but it seems there is something missing or off about the code denying me my satisfaction. Please help

Upvotes: 0

Views: 99

Answers (2)

Suing
Suing

Reputation: 453

the selector for the textarea is incorrect, the id is not "user_status", its "shadow"

data: $("#user_status"),

should really be:

data: $("textarea[name=user_status]")

or

data: $("#shadow")

Upvotes: 0

Jake
Jake

Reputation: 1217

There are a few things that appear to be missing:

Index.php:

You need to add an action="something" attribute to the form tag, this tells the form what to do when you submit it. (unless you are manually handling this is JS somewhere else?)

<form id = "update_status" action ="data.php" method = "POST">

Also, unless you are using JavaScript on the index page to handle the actual submitting of the form, your <input> should include a type="submit" attribute. (this will also make it a button) and when clicked it will automatically submit the form to the action location above.

Swift.php:

the code posted is JS, and does what the first line of the previous paragraph mentioned (handles the submit button). Do you include this file inside the index.php? if the index.php cannot see it, then it wont run. It must also be in the html somewhere in a proper <script> block.

I believe the correct way to send form data using ajax is to serialize the data: $('#update_status').serialize() instead of just sending the one input field.

You will also be required to reference the jQuery libraries, preferably in the index, but could also go in swift.php. I am also assuming that the code posted appears in the necessary <script> block.

Data.php:

should this be datacenter.php? your Swift.php is sending the ajax request to ./datacenter.php

On a side note, if you need it to use Ajax then you actually don't need the action ="data.php" method = "POST" in the form (Ajax does all that for you)

The way it could be done would be something like this:

Index.php:

// HTML beginning stuff
<head>
// Either reference the script in its own JS file or:
// Need to also include jquery library
<script type="text/javascript">
$(document).ready(function(){ 
    $("#btnStatus_update").click(function(e) { 
    e.preventDefault();
    //alert("Confirming function works");
        $.ajax({
        cache: false,
        type: 'POST',
        url: './datacenter.php',
        data: $('#update_status').serialize(),
        success: function(d) {
            $("#successMesg").html(d);
        }
        });
    }); 
});
</script>
</head>
<body>
<form id = "update_status">
<textarea id="shadow" name ="user_status" placeholder = "Share what is on your mind!" cols="97" rows="1" title="Share what's on your mind"></textarea>
<input style="float:right; margin-top: 0.3%;margin-right : 0% !important;" id = "btnStatus_update" name = "btnStatus_udate" type="button" value="Add Post" title="Your posts will be made public"></input>
</form>
</body>

datacenter.php:

<?php
var UserStatus = user_status
if (!empty(UserStatus)) {
    var_dump($_POST['user_status']);
// process as necessary
}

?>

But, including the <form id = "update_status" action ="datacenter.php" method = "POST"> and changing the button to

<input style="float:right; margin-top: 0.3%;margin-right : 0% !important;" id = "btnStatus_update" name = "btnStatus_udate" type="submit" value="Add Post" title="Your posts will be made public">

will allow users to still post information if they have JavaScript disabled.

Upvotes: 1

Related Questions