Jquery ajax not working in function

Question

I have a simple <button type="submit" onClick="dothis();">Click</button>.

This script below have no problem,

$(document).ready(function() {
  action = 'test';
  $.ajax({
    url:'ajax.php',
    data: 'action='+action,
    type:'GET',
    dataType:'json',
    timeout:7000,
    error:function(){ alert('Error!'); return false; },
    success:function(json){ alert('ok'); }
  });
});

but when I put it into function then it doesn't work,

function dothis(){
  action = 'test';
  $.ajax({
    url:'ajax.php',
    data: 'action='+action,
    type:'GET',
    dataType:'json',
    timeout:7000,
    error:function(){ alert('Error!'); return false; },
    success:function(json){ alert('ok in function'); }
  });
}

What was the correct way to put ajax into a function ?

Are you calling account_register() somewhere? FYI, your first example is in a function too. — jfriend00
– jfriend00, Commented May 7, 2014 at 1:56
<button type="submit" onClick="dothis(); return false;">Click</button> — Darren
– Darren, Commented May 7, 2014 at 1:58
Try a normal button, then use a jQuery $("#button").click(function() { //ajax code here }); — Jane S
– Jane S, Commented May 7, 2014 at 1:58

jfriend00 · Accepted Answer · 2014-05-07 01:58:19Z

2

You likely have to cancel the default action on your submit button because it is probably sending a form and reloading the page. Your ajax call is getting sent, but then the page is getting reloaded immediately so you don't see any results from it.

You can cancel the default action by either adding

return false;

to the end of doThis().

function dothis(){
  action = 'test';
  $.ajax({
    url:'ajax.php',
    data: 'action='+action,
    type:'GET',
    dataType:'json',
    timeout:7000,
    error:function(){ alert('Error!'); return false; },
    success:function(json){ alert('ok in function'); }
  });
  return false;
}

Or, change your button to be a normal button, NOT a submit button.

answered May 7, 2014 at 1:58

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

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

Comments

Se0ng11 · Accepted Answer · 2014-05-07 02:00:31Z

1

either change your button from type "submit" to "button" or you need preventDefault()

$('someform').on('submit', function(ev){
  ev.preventDefault();
  action = 'test';
  $.ajax({
    url:'ajax.php',
    data: 'action='+action,
    type:'GET',
    dataType:'json',
    timeout:7000,
    error:function(){ alert('Error!'); return false; },
    success:function(json){ alert('ok'); }
  });

});

check this http://api.jquery.com/event.preventdefault/

answered May 7, 2014 at 2:00

Se0ng11

2,3342 gold badges29 silver badges45 bronze badges

Collectives™ on Stack Overflow

Jquery ajax not working in function

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related