未捕获的ReferenceError：HTMLButtonElement.onclick中未定义checkin

Question

I am facing a problem with js function on button click.

<button class="checkin_button btn-block" onclick="checkin(345)"><i class="fa fa-map-marker"></i> Check In</button>

My jQuery function is:

var CheckIn;
$(document).ready(function() {
  CheckIn = function checkin(id) {
    jQuery.ajax({
      type: 'POST',
      url: ajaxurl,
      data: {
        action: 'foody_checkin',
        'restaurant' = id,
      },
      beforeSend: function() {},
      success: function() {}
    });
  }
});

But its not working.

Answer 1

checkin(345) is a function, so do like below:-

function checkin(id){
   var ajaxurl = "abc.com" //an example that you have to define ajaxurl before using it
    jQuery.ajax({
        type : 'POST',
        url  : ajaxurl, // now you can use ajaxurl happily
        data : {
            action : 'foody_checkin',
            'restaurant': id,  // : needed instead of =
        },
        beforeSend : function(){},
        success : function(){}
    });
}

Notes:-

1.Please take care of comments written inside quote.

2.Also check that jQuery library added before you script code

Answer 2

Try to using data-id method html

<button class="checkin_button btn-block" data-id='345'><i class="fa fa-map-marker"></i> Check In</button>

jquery

$(document).on('click', '.checkin_button', function () {
  var id = $(this).data('id');
  console.log(id);
  // write your ajax below
});

Here is the working jsfiddle: https://jsfiddle.net/nuxtw2ft/

Answer 3

You need to use this keyword to assign value to the var declared. Call the same on click of button.

Also assign value to ajaxurl as AlivetoDie stated in his answer.

You can run the code snippet below and verify.

 var CheckIn; $(document).ready(function() { var ajaxurl="yourservice.com" this.CheckIn = function checkin(id) { console.log("CheckIn function called on click"); jQuery.ajax({ type: 'POST', url: ajaxurl, data: { action: 'foody_checkin', 'restaurant': id, }, beforeSend: function() {}, success: function() {} }); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="checkin_button btn-block" onclick="CheckIn(345)"><i class="fa fa-map-marker"></i> Check In</button> 

Hope this helps!