PHP OnClick Returning undefined

Question

I've got a while loop to build a table of data and onclick I want to call a function but when I the function is called it's not getting the info from the onclick being passed.

HTML:

echo "<td width='25%' align='center'><a href='javascript:void(0)' id='{$row['id']}' class='{$row['status']}' onclick='hello()'> {$row['status']} </a></td>";

JS:

//onclick function
function hello()
{
   // Get the ID of the button that was clicked on
   var id_of_status_to_update = $(this).attr("id");
   var status_to_be_updated = $(this).attr("class");
   var varData = 'id=' + id_of_status_to_update + '&UserStatus=' + 
   status_to_be_updated;
   console.log(varData);

   // Make an AJAX request
   $.ajax({
      url: "php/processor.php", //This is the page where you will handle your SQL insert
      type: "POST",
      data: varData, //The data your sending to processor.php
      async: false, 
      success: function(){
          // location.reload();
          alert("Hello Function");
      },
      error: function(){
          alert("There was a problem, please try again or contact the admin for assistance.");
      }   
    });
};

but when I check the console log I'm seeing the id and userstatus are undefined instead of what should be the passed attributes of id and class. Any help? I know the function is being called properly because I'm getting the success alert.

try taking a variable in the function arg, likefunction hello(event), and replace the this with event — delboy1978uk
– delboy1978uk, Commented Jul 5, 2018 at 14:36
The HTTP response might be 2xx, but that doesn't mean that the PHP script is doing what you expect. Could you share that, too? — Cameron Hurd
– Cameron Hurd, Commented Jul 5, 2018 at 14:36
I'd suggest removing the ancient onclick method, and use a proper jquery .click event handler, and then your use of $(this) will work properly. — IncredibleHat
– IncredibleHat, Commented Jul 5, 2018 at 14:37

IncredibleHat · Accepted Answer · 2018-07-05 14:44:58Z

1

To fix your undefined issue, remove the ancient onclick method, and use a proper jquery .click event handler, and then your use of $(this) will work properly.

First adjust your html build to this:

echo "<td width='25%' align='center'><a href='#' id='{$row['id']}' class='clicker {$row['status']}'> {$row['status']} </a></td>";

Then adjust the javascript a bit to this:

$(document).ready(function() {
    $(".clicker").click(function(e){
        e.preventDefault(); // new line to stop the anchor click default behavior
        var id_of_status_to_update = $(this).attr("id");
        var status_to_be_updated = $(this).attr("class");
        // ... the rest you had is fine as is ...
    });
});

This attaches a click event handler to the class if "clicker", so it applies to all buttons with that class.

answered Jul 5, 2018 at 14:44

IncredibleHat

4,1024 gold badges18 silver badges29 bronze badges

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

3 Comments

Nrrrdfather Over a year ago

I had it like that originally - but then I need a unique id - because there is like 70 rows that would have the same id and I could only get the first row working.

Nrrrdfather Over a year ago

I'll try your suggestions and let you know how that works.

IncredibleHat Over a year ago

This is why you use the class for the event hook, not the id. And when a button is clicked then $(this) refers to only the button that was clicked to fire off that event :)

mehlichmeyer · Accepted Answer · 2018-07-05 14:44:20Z

1

Use this instead:

$('#id').on('click', function(){
//Do something
//console.log(this)
})

Of course you would need to pass the element a fixed id, alternatively you can use $('.class') and pass it a class instead!

answered Jul 5, 2018 at 14:44

mehlichmeyer

1543 silver badges18 bronze badges

Comments

owen · Accepted Answer · 2018-07-05 14:48:02Z

0

because the this inside function hello points to the window object. you can pass an event parameter to the hello function like onclick="hello(event)" and inside this function, you can use event.target.getAttribute('id') to access this element's id, don't forget to change the function definition function hello(){...} to function hello(event){...}

answered Jul 5, 2018 at 14:48

owen

111 bronze badge

Collectives™ on Stack Overflow

PHP OnClick Returning undefined

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related