run php file on button click ajax

Question

Entry level user here. I've seen countless AJAX\PHP examples with data being passed via POST or GET and modified one of their examples. When clicking the button (id="clickMe) I want it to execute advertise.php and nothing more (no variables need to be passed) without refreshing the page and a notification that says success. When I click the button with my current code nothing happens.

<button type="button" id="clickMe">CLICK ME TO RUN PHP</button>

<script type="text/javascript">
$(document).ready(function(){
$('#clickMe').click(function(event){ // capture the event
event.preventDefault(); // handle the event
$.ajax({
    url: 'advertise.php',
    data: {
        'ajax': true
    }, 
    success: function(data) {
        $('#data').text(data);
    }
});
});
});
</script>

Updated, but still isn't executing.

try to add $(function(){ at first then your script and at the end }) — Kiran LM
– Kiran LM, Commented Jul 8, 2015 at 17:45

hmak · Accepted Answer · 2015-07-08 19:03:58Z

1

Here is your editted version code:

$(document).ready(function(){
    $('#clickMe').click(function(){
        $.post("PHP_FILE.php",{ajax: true},function(data, status){
             alert(data);
         });
    });
});

edited Jul 8, 2015 at 19:03

answered Jul 8, 2015 at 17:52

hmak

3,9981 gold badge23 silver badges33 bronze badges

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

6 Comments

hmak Over a year ago

No. It down voted instantly. Maybe somebody were trying to get a new badge. :D

Jay Blanchard Over a year ago

I didn't DV but the likely explanation is that a.) it didn't handle the click event as the OP asked and b.) has no explanation for what is done. A post containing only code is not considered to be a "good" answer no matter how accurate it may be.Many code only answers are typically commented on with something like, "Why should the OP try this"? Please add an explanation of what you did and why you did it that way, not only for the OP but for future visitors to SO."

michelle Over a year ago

I updated my code as you suggested (see above), but it's still not executing. Any idea what would be the issue?

michelle Over a year ago

Still doesn't work. Maybe it needs event.preventDefault();

hmak Over a year ago

As I use this in my projects. It doesn't need that. Can you test the document.ready and your click function with putting some alerts in them?

|

Jay Blanchard · Accepted Answer · 2015-07-08 17:48:06Z

2 things - you need a document ready handler and to prevent the default click action.

$(document).ready(function() {
    $('#clickMe').click(function(event){ // capture the event
         event.preventDefault(); // handle the event
         $.ajax({ // remainder of code...
});

When loading jQuery scripts at the top of the page you need to make sure they do not run until the DOM has loaded, that is what the document ready handler is for. The you capture the click event by including it as an argument for your click's callback function and handle the click with the preventDefault() method.

Since this request is "simple" you may want to consider using one of the shorthand methods, like $.post()

Collectives™ on Stack Overflow

run php file on button click ajax

2 Answers 2

6 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Related