Execute PHP script onclick with jQuery

Question

Hello I'm struggling to get this to work:

I'm trying to get jQuery to execute a PHP Script for me, at the moment it looks pretty much like this:

html

<button id="element">Click me!</button>

php

$string = "Hello Earth!";
echo $string;

jQuery

$('#element').click(function() {
    $.load('.../script.php', function(e){
        console.log(e);
    });
});

That is not were the load function is for from the jQuery manual: Description: Load data from the server and place the returned HTML into the matched element. — Daan
– Daan, Commented Feb 18, 2015 at 15:33
the only error I have in my console is ReferenceError: $ is not defined (test.html:11) which is the line $('#element').click(function() { — aley
– aley, Commented Feb 18, 2015 at 15:36
That's a pretty important error :) It means that you haven't correctly imported jQuery, so absolutely none of your code will work. — Pointy
– Pointy, Commented Feb 18, 2015 at 15:37
Oh right I'm sorry I forgot to put it into my test script x) now im getting: TypeError: $.load is not a function — aley
– aley, Commented Feb 18, 2015 at 15:39

Dan Smith · Accepted Answer · 2015-02-18 15:42:55Z

3

.load() must be called on an element, like this:

$('#element').click(function() {
   $('#element').load('.../script.php', function(e){
        console.log(e);
    });
});

answered Feb 18, 2015 at 15:42

Dan Smith

5,67534 silver badges33 bronze badges

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

Comments

lmarcelocc · Accepted Answer · 2015-02-18 15:46:31Z

1

The load() method loads data from a server and puts the returned data into the selected element. from http://www.w3schools.com/jquery/jquery_ajax_load.asp

Correct sintax:

$( "#result" ).load( "ajax/test.html" );

And you have to correct your code, you have .../script.php instead of ../script.php

answered Feb 18, 2015 at 15:46

lmarcelocc

1,37112 silver badges21 bronze badges

5 Comments

aley Over a year ago

Question: Is it possible instead of replacing the content of my element, to append/prepend the value?

lmarcelocc Over a year ago

Shure. Something like this example: code$('#element').click(function() { $.get('retrieve.html', function(data, status){ // data is retrieve.html, then you can append/prepend it wherever you want alert("Data: " + data + "\nStatus: " + status); }); }); code

aley Over a year ago

Is it possible with .load? I'd like to prevent to use get if I I'm not going to submit any value.

aley Over a year ago

Also you seem to stuggle with the ´code´ tags code, just place them around your code like this: ´stuff´ => stuff (I used to reverted tags to display it) And I just Googled a bit and found the solution here: forum.jquery.com/topic/load-but-append-data-instead-of-replace

lmarcelocc Over a year ago

Sorry about the tags. Nice to hear you googled it. You could use it this way to: $('#element').click(function() { $("#returnedResult").load("retrieve.html", function(responseTxt, statusTxt, xhr){ console.log(responseTxt); }); });

winston86 · Accepted Answer · 2015-02-18 15:48:15Z

0

<button id="element">Click me!</button>

<?php $string = "Hello Earth!"; echo $string; ?>

$('#element').live('click',function() {
 $.ajax({
    method:'POST',
    success:fuction(data){
          'your coe here';
    }
 })
});

answered Feb 18, 2015 at 15:48

winston86

1591 silver badge8 bronze badges

Collectives™ on Stack Overflow

Execute PHP script onclick with jQuery

3 Answers 3

Comments

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related