CODEWITHSUNDEEP
javascriptphpjqueryajax
João Paulo
João Paulo

Reputation: 6670

Trying to call PHP function using jQuery.post()

Here is my index.php:

<?php
function type_my_text(){
    echo filter_input(INPUT_POST, 'textfield')
}

$action = filter_input(INPUT_POST, 'action');
if($action == "typer"){
    type_my_text();
}
?>

<html>
    <head>
        <script src="js/jquery.js"></script>
        <script>
            function call_typer(){
                $.post('index.php', {action : "typer"});
            };
        </script>
    </head>
    <body>
        <form name="form" method="POST" action="index.php">
            <input type="text" name="textfield">
            <input type="submit" value="type" onclick="call_typer()">
        </form>
    </body>
</html>

With this code, I'm trying to call type_my_text PHP function using ajax (post(), in the case) when I click the submit button. I mounted this code based on other answers, but It isn't working and I don't know what I'm missing.

The process:

html button click -> call js call_typer() function -> make jQuery.post() ajax request -> php var $action receive "typer" -> call php function type_my_text()

I'm expecting that this code writes on page what I wrote in the textfield. When I submit the button, nothing happens. I think the ajax request is happening, but filter_input(INPUT_POST, 'action') is receiving nothing or not what I'm expecting ("typer" as value).

No error is being raised.

Upvotes: 0

Views: 4283

Answers (1)

light
light

Reputation: 4287

Your $.post() is an AJAX request to index.php. Whenever you make an AJAX request, or any HTTP request at all, the browser sends out a HTTP request to the server (the one hosting index.php), and gets some data back in return. In the special case of HTTP AJAX requests, the browser sends HTTP request asynchronously without refreshing the page, and the response is received behind the scenes from server.

A typical AJAX POST call in jQuery should look like this:

$.post("index.php", {action: 'typer'}, function( data ) {
    // do something with data, e.g.
    console.log(data);
});

Your server file (index.php) should then return some data to the AJAX request. Because you have used index.php to serve AJAX data as well as normal HTML, it should look something like this:

<?php
function type_my_text() { ... }

// Either serve data to AJAX call, or serve HTML of index page.
if ($_POST['action'] == "typer"){
    // serve AJAX call
    type_my_text();
}
else {
    // serve HTML
?>

<html>
 ...
</html>
<?php
}

But this is messy.

It would be preferable to apply some separation of concerns - use HTML files purely for serving HTML, and PHP purely for serving AJAX content. In other words, take your HTML and put it into index.html, then create ajax.php (or whatever name you want), and put your PHP code in it. You then wouldn't need to do ugly things like the above - mixing HTML code inside your PHP file. And of course, remember to change the URL in your JS.

Additional:

In your JS making the AJAX request, make sure you prevent the default browser action of submitting the form - which is a fresh page request. Otherwise, you aren't doing AJAX at all.

The cleanest way to do this in jQuery:

$('#my-form').on('submit', function(e) {
    e.preventDefault(); // important - to prevent page refresh
    $.post(...);        // the AJAX call here
});

Then in your HTML:

<form id="my-form">
    <input type="text" name="textfield">
    <input type="submit">
</form>

Main things to note:

  1. Give your form an ID so you can find it in jQuery efficiently. No action/anything else required.

  2. I presume you'd do something with your textfield input after AJAX.

  3. Avoid using inline JS.

Upvotes: 2

Related Questions