Trying to call PHP function using jQuery.post()

Question

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.

Firstly, you need to define "it isn't working". What do you observe? What were you expecting? Secondly, I'm pretty sure there are tons of good answers on SO highlighting the difference between client-side and server-side script, which is what this question seems to be about. — light
– light, Commented Jul 11, 2015 at 14:11
Your PHP code says login() instead of type_my_text() - where is type_my_text() ever called? Secondly, this is an AJAX call - you didn't show the code to process the return data, or did you not even have it? — light
– light, Commented Jul 11, 2015 at 14:36
Fixed the login() thing. And sorry, I didn't understand your second question. — João Paulo
– João Paulo, Commented Jul 11, 2015 at 14:40
Then use $_POST. And your function call_typer() is only sending 1 value, it is missing your 2nd value. Also, it won't do anything since you don't have the 3rd parameter set to a function, on $.post(). — Ismael Miguel
– Ismael Miguel, Commented Jul 11, 2015 at 14:47

light · Accepted Answer · 2015-07-11 15:44:03Z

2

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:

Give your form an ID so you can find it in jQuery efficiently. No action/anything else required.
I presume you'd do something with your textfield input after AJAX.
Avoid using inline JS.

edited Jul 11, 2015 at 15:44

answered Jul 11, 2015 at 14:58

light

4,3173 gold badges28 silver badges39 bronze badges

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

7 Comments

Adib Aroui Over a year ago

This should be marked as accepted before the whole solution implemented fully. It contains main idea behind and said in a good manner. plus one.

João Paulo Over a year ago

That's really nice, but that's not so different of what I'm doing, except by 3rd arg at post() function. I think in this case, this won't make difference. When I print_r($_POST); using your example, I don't have a [action] => 'typer' as expected.

light Over a year ago

Where did you put your print_r? Frankly, I'm surprised that you don't think you are doing anything different from what I have written - one, you're ignoring your AJAX return; two, even if you do, your AJAX returns a whole unnecessary chunk of HTML; three, you're mixing HTML + PHP.

João Paulo Over a year ago

I gave you a +1.But I put print_r before the if. I tested your example with the 3rd arg too.

light Over a year ago

Passing the form serialized wouldn't help. Sounds like the POST variables are somehow not received on the server-side.

|

Collectives™ on Stack Overflow

Trying to call PHP function using jQuery.post()

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related