12

Before someone has a go at me or marks this down, I have looked all over the internet to find out how to do this (including the same question on stackoverflow). I'm new, and I am finding it very hard to learn new concepts so please be easy on me.

What I want to do is call a php script/function on a button click. I have this running in WAMP if that helps. Here's my code:

<?php include 'the_script.php'; ?>

<button type="button" onclick="the_function()">Click Me</button>

the_script.php has this in it:

the_function() {
    echo "You win";
}

Why isn't this working? I've heard about the button being client side etc. and PHP being server-side, which means that you cannot link the two together. I know that you have to use AJAX to make this work, however I legitimately have absolutely no clue how to do it. I've tried googling it etc., however I can't find anything. I know how to use AJAX and call events with it, however I still have no idea how to make it call a PHP script.

Can you please make your answers as clear and simple as possible, I'm new to this

Thanks for the help :)

EDIT ***

For some reason wherever I go everyone's code is different. The way I have been taught AJAX looks completely different. Can you please write it this way so I can understand? Thanks, here's an example:

var request;

if (window.XMLHttpRequest) {
    request = new XMLHttpRequest();
} else {
    request = new ActiveXObject("Microsoft.XMLHTTP");
}

request.open('GET', 'file.php', true);

request.onreadystatechange = function() {

    if (request.readyState===4 && request.status===200) {
        do stuff
    }
}

request.send();
4
  • is the_function() surrounded by <script> //javascript// </script>?
    – bart2puck
    Commented Dec 31, 2014 at 5:21
  • Like @bart2puck asked, is the_function is Javascript function? If yes then only you can call it. But like you shown in your question it seems PHP function so you can't call it in HTML button's click event.
    – Smile
    Commented Dec 31, 2014 at 5:24
  • Php runs on server While js runs on client side, you can not just call php through js. For this you need to make an ajax call Commented Dec 31, 2014 at 5:25
  • I have described here please check i hope you will be happy. Commented Dec 30, 2015 at 7:17

7 Answers 7

41

Just try this:

<button type="button">Click Me</button>
<p></p>
<script type="text/javascript">
    $(document).ready(function(){
        $("button").click(function(){

            $.ajax({
                type: 'POST',
                url: 'script.php',
                success: function(data) {
                    alert(data);
                    $("p").text(data);

                }
            });
   });
});
</script>

In script.php

<?php 
  echo "You win";
 ?>
22
  • why do you pass in "data" into the function, I understand everything else except that
    – Daniel
    Commented Dec 31, 2014 at 5:55
  • @DanielSpajic : when the ajax return with text "You win",it will appear in <p> tag,the tag which i wrritten after button
    – Priyank
    Commented Dec 31, 2014 at 5:58
  • @DanielSpajic : you can try once then you understand thoroughly
    – Priyank
    Commented Dec 31, 2014 at 6:00
  • what am i supposed to pass in as "data"
    – Daniel
    Commented Dec 31, 2014 at 6:02
  • @DanielSpajic : mo need to pass any things.you just put my first code in index.php and second code in your script.php thats it.and then click the button.it 'll automatically work.just try once.
    – Priyank
    Commented Dec 31, 2014 at 6:04
13

Of course AJAX is the solution,

To perform an AJAX request (for easiness we can use jQuery library).

Step1.

Include jQuery library in your web page

a. you can download jQuery library from jquery.com and keep it locally.

b. or simply paste the following code,

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

Step 2.

Call a javascript function on button click

<button type="button" onclick="foo()">Click Me</button>

Step 3.

and finally the function

 function foo () {
      $.ajax({
        url:"test.php", //the page containing php script
        type: "POST", //request type
        success:function(result){
         alert(result);
       }
     });
 }

it will make an AJAX request to test.php when ever you clicks the button and alert the response.

For example your code in test.php is,

<?php echo 'hello'; ?>

then it will alert "hello" when ever you clicks the button.

4
  • what does success:function(result) mean? and why do you pass in 'result' as one of the arguments? I don't understand
    – Daniel
    Commented Dec 31, 2014 at 5:44
  • 1
    result is the variable of what is returned by test.php in his example. in this case it would be the word hello. so alert(result) actuall means alert('hello'). if you put echo "Happy new Year" in test.php alert(result) would show Happy New Year.
    – bart2puck
    Commented Dec 31, 2014 at 5:47
  • "success" is a callback function, and it will invoked immediately after we got a success full response. the "result" parameter contains the result of test.php (so in this case "hello")
    – akhil.cs
    Commented Dec 31, 2014 at 6:38
  • @akhil.cs could this be done to output the result in the webpage instead of in an alert? All the answers on this page suggests an alert which I find being a strange choice. Commented Jan 14, 2018 at 9:12
6

You can also use

   $(document).ready(function() {

    //some even that will run ajax request - for example click on a button

    var uname = $('#username').val();
    $.ajax({
    type: 'POST',
    url: 'func.php', //this should be url to your PHP file
    dataType: 'html',
    data: {func: 'toptable', user_id: uname},
    beforeSend: function() {
        $('#right').html('checking');
    },
    complete: function() {},
    success: function(html) {
        $('#right').html(html);
    }
    });

    });
And your func.php:

  function toptable()
 {
  echo 'something happens in here';
 }

Hope it helps somebody

2

Use jQuery.In the HTML page -

<button type="button">Click Me</button>

<script>
$(document).ready(function() {
$("button").click(function(){
  $.ajax({
    url:"php_page.php", //the page containing php script
    type: "POST", //request type
    success:function(result){
    alert(result);
    }
  });
});
})
</script>

Php page -

echo "Hello";
1
First understand that you have three languages working together.

PHP: Is only run by the server and responds to requests like clicking on a link (GET) or submitting a form (POST). HTML & Javascript: Is only run in someone's browser (excluding NodeJS) I'm assuming your file looks something like:

<?php
function the_function() {
echo 'I just ran a php function';
 }

 if (isset($_GET['hello'])) {
  the_function();
  }
   ?>
  <html>
 <a href='the_script.php?hello=true'>Run PHP Function</a>
 </html>

Because PHP only responds to requests (GET, POST, PUT, PATCH, and DELETE via $_REQUEST) this is how you have to run a php function even though their in the same file. This gives you a level of security, "Should I run this script for this user or not?".

If you don't want to refresh the page you can make a request to PHP without refreshing via a method called Asynchronous Javascript and XML (AJAX).

1
  • @DanielSpajic : one more thing you can also try my this answer for other concept if you want
    – Priyank
    Commented Dec 31, 2014 at 6:38
0
the_function() {

$.ajax({url:"demo_test.php",success:function(result){

   alert(result); // will alert 1

 }});

}

// demo_test.php

<?php echo 1; ?>

Notes

  1. Include jquery library for using the jquery Ajax
  2. Keep the demo_test.php file in the same folder where your javascript file resides
2
  • Sorry but I can't understand what you wrote, everywhere I go everyone writes code differently so it's incredibly confusing. The way I have been taught AJAX is completely different, I'll include an example so that people can see how to write it so I can understand
    – Daniel
    Commented Dec 31, 2014 at 5:40
  • You can call Ajax using javascript and jquery. Simpler is jquery ajax. Jquery is javascript library for making the things easy. You are using javascript conventional Ajax. Any way the code is different concept is same.
    – Kiren S
    Commented Dec 31, 2014 at 6:02
0

Modify the_script.php like this.

<script>
the_function() {
    alert("You win");
}
</script>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.