How to run jQuery onClick? Need to pass a variable to run .ajax

Question

I'm trying to run .ajax and insert a data element from the onClick of an item from the page. Whats the best way to do this?

Something like this:

function grabinfo(foo){

      $.ajax({
      url: "infospitter.php",
      method: "GET",
      data: "id="+foo,
      success: function(html){
       $(#showstuff).html(html);
       }
      });

}

  <input onClick="javascript:grabinfo(18343)" />
// and on page each item will have this button input

Answer 1

This link is pretty good about explaining whay you want to do. http://elijahmanor.com/webdevdotnet/post/Embedding-HTML-from-jQuery-AJAX-Call-Into-Your-Page.aspx

Answer 2

Remove the "javascript:" from your onclick attribute. That's only needed when running code outside a javascript event attribute.

Answer 3

It's usually best to keep your javascript unobtrusive, and out of the DOM.

<input type="button" value="18434"/>

In your javascript file:

$('input[type=button]').click(function(){
    $.ajax({
        url: 'infospitter.php',
        method: 'GET',
        data: 'id=' + $(this).attr('value'),
        success: function(returnData){
            // Do something with returnData
        }
    });
});