Calling a PHP class method and getting the return value using jQuery and AJAX

Question

I'm creating a little project for myself. I'm not a very experienced programmer, so I began creating the project in PHP. Soon it became evident that running PHP functions and class methods via HTML button clicks wasn't the most straightforward of tasks.

I have some test code set up. First I created an HTML form, from which I want to read user-input values:

<form name="form" action="" method="POST">
    Title: <br> <input type="text" id="title"> <br>
    Description: <br> <input type="text" id="description"> <br>
    Priority: <br> <input type="number" id="priority"> <br> <br>
    <input type="button" id="ajaxTest" value="Send>
</form>

Now, when the button with id #ajaxTest is clicked, I want to call one of the class methods in a PHP-file that I've created. To this end, I googled around and ended up with the following jQuery:

<script type="text/javascript">
    $("#ajaxTest").click( function() {

        $t = $("#title").val();

        $.ajax({
            type: "POST",
            url: "http://www.example.com/task.php",
            data: "t="+t
        }).done(function(results) {
            $("#results").html(results).hide().fadeIn();
        })
    });

</script>

There is also a div-element with id #results in the HTML, to show the resultant data.

Now, the task.php being called looks like as follows (simplified for readibility):

<?php
class Task {
    private $title;
    private $description;

    function SetTitle($t) {
        $this->title = $t;
    }

    function GetTitle() {
        return $this->title;
    }

    function SetDescription($d) {
        $this->description = $d;
    }

    function GetDescription() {
        return $this->description;
    }
}

How would I go about calling the different member functions of this class via jQuery/AJAX and getting their return values for input to DOM? I take I'll have to create an intermediary class like TaskHandler that initiates the object and so on, but I'm at a complete loss. Been at it almost the whole day, but I've failed to find an answer that would've lead me to a working solution. Ever so thankful for your help!

edit: I have now edited the jQuery and it looks as follows:

<script type="text/javascript">

    $("#ajaxTest").click( function() {

        var t = $("#title").val();

        $.ajax({
            type: "POST",
            url: "http://www.example.com/taskHandler.php",
            data: {"t": t},
            success: function(response) {
                 $("#results").html(response);
            }
        });
    });

</script>

and taskHandler.php is below

<?php
    require_once("task.php");

    $t = new Task();
    $t->SetTitle($_POST['t']);

    $output = $t->GetTitle();
    echo $output;

Still don't get anything to show up, though. What's it I'm doing wrong here?

Answer 1

As of the long comment list on this question just one thing which is probably messing up the AJAX call:

<form name="form" action="" method="POST">
    Title: <br> <input type="text" id="title"> <br>
    Description: <br> <input type="text" id="description"> <br>
    Priority: <br> <input type="number" id="priority"> <br> <br>
    <input type="submit" id="ajaxTest" value="Submit">
</form>

The submit button usually submits the entire form. As an empty action parameter is provided, the post action goes to the current page. This will immediately reload, and interrupt a probably issued but not completely sent AJAX request.

Change:

<form name="form" action="" method="POST">
    Title: <br> <input type="text" id="title"> <br>
    Description: <br> <input type="text" id="description"> <br>
    Priority: <br> <input type="number" id="priority"> <br> <br>
    <input type="button" id="ajaxTest" value="Send">
</form>