PHP access name of javascript function that fired in AJAX onclick event

Question

I have several buttons that the user may press to see results from a MySQL database. The onclick event on the button fires an AJAX call that goes out and retrieves the data that coincides with which button was pressed.

One of the following functions is called, depending on which button is pressed.

<script language="JavaScript">
   function ChangeText1() { 
      $("#ajax_content").load("zone_code.php #zone_code1");}
   function ChangeText2() {
      $("#ajax_content").load("zone_code.php #zone_code2");}
   function ChangeText3() {
      $("#ajax_content").load("zone_code.php #zone_code3");}
</script>

Following are the buttons on zones.php:

<button type="button" class="active zone" name="z1" onclick="ChangeText1()">Zone 1</button>
<button type="button" class="active_zone" name="z2" onclick="ChangeText2()">Zone 2</button>
<button type="button" class="active_zone" name="z3" onclick="ChangeText3()">Zone 3</button>

Here is the php code that is retrieved from zone_code.php when a button is pressed:

<div id="zone_code1">
    <?php echo '<p>' . $all_results[0]['zone_desc'] . '</p>'; ?>
</div>

<div id="zone_code2">
    <?php echo '<p>' . $all_results[1]['zone_desc'] . '</p>'; ?>
</div>

<div id="zone_code3">
    <?php echo '<p>' . $all_results[2]['zone_desc'] . '</p>'; ?>
</div>

And here is the div on zones.php that is populated by the ajax call:

<div id="ajax_content">
    <p>Choose a zone</p>
</div>

Right now, the code works beautifully to call in the zone description for whichever button was pressed, either zone 1, zone 2, or zone 3. But I would also like to know which of the buttons was pressed, whether it was number 1, 2, or 3. There are more operations I would like to do with PHP, based on which of the buttons they pressed.

For various reasons, I cannot make the button into a submit button, or put it between form tags. Nor can I embed a link in the button. The reasons are too complicated to go into here. So I would like to be able to access either the name of the function that fired, or the name of the button that was clicked.

It may seem like a simple thing, but I am a javascript newbie, and am much more comfortable with php. I have tried various if statements in PHP, which of course didn't work, because javascript is client side and PHP is server side. I have been Googling this for a couple of hours, but haven't been able to find anything close enough to my situation to solve this. I'm not including those failed attempts here, for the sake of keeping this as short as I can. Suffice it to say I tried... I really tried.

I would very much appreciate help with this. Thank you, in advance, for your kindness and consideration.

You can send data to php with jQuery load so you can send the number of the button or the name of it, then your if statement in php may work. Let's have a look [here](http://api.jquery.com/load/) — goupil, Nov 28 '15 at 05:27
Thank you, @Christian. I didn't realize you could do that. But when I add the name of the button to the function like this: — Lori, Nov 28 '15 at 05:49
Thank you, @Christian. I didn't realize you could do that. But when I add the name of the button to the function like this: function ChangeText1() { $("#ajax_content").load(zone_code.php #zone_code1, "z1"); } then try to access z1 by: I don't get anything. My understanding, by reading the docs, is that you put another element into the load statement, separated by a comma. — Lori, Nov 28 '15 at 05:55
You should try using a json object like this : function ChangeText1() { $("#ajax_content").load("zone_code.php #zone_code1", {name='z1'})}, in php you can catch the param with post like this $_POST['name'] — goupil, Nov 28 '15 at 06:06
I think you could simplify and having only one js function with a param for the number of the button — goupil, Nov 28 '15 at 06:12
The {name='z1'} whacked out the function of the button. And if I simplify, and just grab the number of the button, I won't get the zone description, which is an important piece of information the function already retrieves. — Lori, Nov 28 '15 at 06:19
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/96404/discussion-between-christian-meneux-and-lori). — goupil, Nov 28 '15 at 07:19

score 1 · Answer 1 · answered Nov 28 '15 at 06:18

1

<script language="JavaScript">
   function ChangeText1() { 
      $("#ajax_content").load("zone_code.php?zone=1 #zone_code1");}
   function ChangeText2() {
      $("#ajax_content").load("zone_code.php?zone=2 #zone_code2");}
   function ChangeText3() {
      $("#ajax_content").load("zone_code.php?zone=3 #zone_code3");}
</script>

then it should be in zone_code.php's $_GET['zone'] , "1" or "2" or "3" ^^

answered Nov 28 '15 at 06:18

hanshenrik

19,904
4
43
89

Thank you, @hanshenrik. I'll give it a try. – Lori Nov 28 '15 at 06:24
This really looked like it should work, but it whacked out my existing code that brought in the description. Still exploring. – Lori Nov 28 '15 at 06:39
It's late. I'll have to try again in the morning. Thank you so much. – Lori Nov 28 '15 at 07:39
Thank you @hanshenrik. Your answer was good, and helped me to understand the structure of these requests. – Lori Nov 28 '15 at 20:12

score 1 · Answer 2 · answered Nov 28 '15 at 06:24

1

You can simplify your code like this -

<script language="JavaScript">
  function ChangeText(code) { 
     $("#ajax_content").load("zone_code.php?zoneCode="+code+" #zone_code"+code);
   }
</script>

In the HTML now -

 <button type="button" class="active zone" name="z1"  onclick="ChangeText(1)">Zone 1</button>
 <button type="button" class="active_zone" name="z2" onclick="ChangeText(2)">Zone 2</button>
 <button type="button" class="active_zone" name="z3" onclick="ChangeText(3)">Zone 3</button>

In your PHP code, you can get the zoneCode as follows -

$zoneCode = $_GET["zoneCode"]

answered Nov 28 '15 at 06:24

Chandan

1,128
9
11

I can't get this to work either. Thanks for the offering. – Lori Nov 28 '15 at 06:57
This code is sound, @Chandan. I'll have to get some sleep and go at it in the morning. Still not working, but I have some code cleanup to do first. – Lori Nov 28 '15 at 07:38
Thank you @Chandan. Your code worked for what I asked it to do. – Lori Nov 28 '15 at 20:11

score 0 · Accepted Answer · edited May 23 '17 at 11:52

as we said before (see comment) i will do something like that, buttonName is then with post process:

<script language="JavaScript">
   function ChangeText(value) { 
      $("#ajax_content").load("zone_code.php #zone_code"+value, {buttonName:"z"+value});
   }

</script>

or like that, buttonName is then send with get process

 <script language="JavaScript">
       function ChangeText(value) { 
          $("#ajax_content").load("zone_code.php #zone_code"+value, "buttonName=z"+value);
       }

</script>

in both of the upper code you can use $("#zone_code"+value).load("zone_code.php") instead of $("#ajax_content").load("zone_code.php #zone_code"+value)

there is another post about this here

and in your html

<button type="button" class="active zone" name="z1"  onclick="ChangeText(1)">Zone 1</button>
 <button type="button" class="active_zone" name="z2" onclick="ChangeText(2)">Zone 2</button>
 <button type="button" class="active_zone" name="z3" onclick="ChangeText(3)">Zone 3</button>

Very late. Must get some sleep. I'll pick this back up in the morning. I can see that my own code needs some cleaning up. Then I'll try this on after that. — Lori, Nov 28 '15 at 07:36
Thank you, @Christian. I finally got it to work. It turns out that my question didn't tell the whole story. You thought I wanted to send the button number, when I really wanted to receive it. But I wasn't clear about that. Your code was perfect for what I asked, and allowed me to get rid of inefficient code. Thank you for hanging in there with me from start to finish. I appreciate it. — Lori, Nov 28 '15 at 20:10

PHP access name of javascript function that fired in AJAX onclick event

3 Answers3