Call 2+ functions with Javascript and AJAX

Question

I have a page.php and a func.php. I know that the request that I can do is with AJAX, but I don't know how do it. I searched here and I found this, but I don't understand how it works exactly.

This is my files:

page.php

<html>
<head>
<script src="func.php" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">

        function hello(){
             $.ajax({ 
         url: 'func.php',
         data: {action: 'hello'},
         type: 'post',
         success: function(output) {
              alert(output);
        }
           });
        }

        function bye(){
              $.ajax({ 
              url: 'func.php',
              data: {action: 'bye'},
              type: 'post',
              success: function(output) {
                alert(output);
            }
            });
            }
</script>
</head>
<body>

<form action method="post" name="form" id="form" action="javascript:hello();"  >
<button type="input">Hello</button>
</form>

<form action method="post" name="form" id="form" action="javascript:bye();"  >
<button type="input">Bye</button>
</form>
</body>
</html>

func.php

<?
if(isset($_POST['action']) && !empty($_POST['action'])) {

$action = $_POST['action'];
    switch($action) {
        case 'hello' : hello();break;
        case 'bye' : bye();break;
    }

function hello(){
    echo "Hello";
}

function bye(){
    echo "bye";
}
}
?>

The code is very simple, I only want that when a user click the button "hello" or "bye", the javascript call the function and print the result. This is a example of my real code, I know that if I want print "hello/bye" I don't need ajax or other file.

Thanks a lot!

No, the code doesn't work. Don't print any, only recarge the page — GRQuest, May 12 '14 at 10:23

score 0 · Answer 1 · answered May 12 '14 at 10:23

0

You need to set up click handlers for your buttons. Give each button a unique ID and set up the lick listeners as in the example below.

jQuery:

$(document).ready(function() {
    $("#hello").click(hello);
    $("#bye").click(bye);        
});

HTML:

<button type="button" id="hello">Hello</button>
<button type="button" id="bye">Bye</button>

DEMO

answered May 12 '14 at 10:23

martynas

12,120
3
55
60

This solve my problem to call the functions. But I need call the function on func.php from page.php. The content of alert has to come from func.php, not from the same file. Thanks! :) – GRQuest May 12 '14 at 10:36
This is what your code does :) You don't see the output because you are on page.php. – martynas May 12 '14 at 10:39
I know, but the original code have Selects, inserts and more php code, hence need call the functions on func.php. Thanks! – GRQuest May 12 '14 at 10:41
@GRQuest but that is what your code is doing! You are calling the functions in func.php – martynas May 12 '14 at 10:42
If you want func.php to return something, look up http://www.php.net/manual/en/function.json-encode.php – martynas May 12 '14 at 10:43

score 0 · Answer 2 · answered May 12 '14 at 10:28

You can do this way:

Jquery:

$(document).ready(function() {
    $('#bye').bind('click', bye);
    $('#hello').bind('click', hello);
});

HTML:

<form action method="post" name="form" id="form"  >
  <a id="hello">hello</a>
  <a id="bye">bye</a>
</form>

Call 2+ functions with Javascript and AJAX

2 Answers2

DEMO