Load php content with jQuery AJAX

Question

My problem:

I have index.html:

<form action="toload.php" method="post">
Input: <input type="text" name="something" value="" /><br />
<input type="submit" value="Submit!" />
</form>

toload.php is something like:

<?php

echo "Your input was: " . $_POST["something"];

?>

The question is quite simple.

When I press the Submit! button, I would like to dynamically load the content toload.php in index.html without the need of a refresh.

Thanks in advance! please comment for any needed clarification.

EDIT, a more verbose explanation:

I'm not sure I'm being clear (or maybe I'm not understanding the answers do to my lack of technical skills) so I'll give it another go. (re-write)

I have an HTML for with a submit button that sends a variable through POST method.

This variable is used by a PHP file and after a certain process, it inserts and update a MySQL database and echoes out some other stuff.

This is working JUST FINE.

But now I want to improve it by avoiding the page "reload" (going to the .php).

I want the HTHL that comes as an output of my HTML file to be dynamically shown in my HTML page.

Is it more clear now?

$("#divname").load(url, { something: $("something").val(); }) should do it — Pekka
– Pekka, Commented Jan 29, 2011 at 23:01

Zeroic · Accepted Answer · 2013-04-23 13:17:18Z

3

something like this with jQuery!:

<form action="toload.php" method="post">
Input: <input type="text" id="something" name="something" value="" /><br />
<input type="submit" value="Submit!" onclick="submitme()" />
<div id="something2"></div>
</form>

and function to submit:

function submitme(){
var tosend=document.getElementById("something").value;
$.ajax({
        type: 'POST',
        url: 'toload.php',
        data: 'something='+tosend,
        success: function(msg){
            if(msg){
                document.getElementById("something2").innerHTML=msg;
            }
            else{
                return;
            }
        }
    });
}

edited Apr 23, 2013 at 13:17

Zeroic

2511 gold badge4 silver badges16 bronze badges

answered Jan 29, 2011 at 23:06

FeRtoll

1,26711 silver badges27 bronze badges

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

2 Comments

mVChr Over a year ago

If you attach it to onclick then it won't fire when the user hits enter to submit.

FeRtoll Over a year ago

well then attach it to that 2 :)

Radek · Accepted Answer · 2011-01-29 23:02:39Z

0

You must use AJAX (XMLHttpRequest) for that - http://www.w3schools.com/XML/xml_http.asp.

(You've said simply - as long loading 100KB of jQuery is not simply IMHO, I suggested pure JavaScript solution)

answered Jan 29, 2011 at 23:02

Radek

8,3614 gold badges34 silver badges42 bronze badges

6 Comments

alex Over a year ago

BTW, you may want to mention that jQuery is not 100kB.

GolezTrol Over a year ago

@Trufa, XMLHTTPRequest is actually not that hard. It allows you to programmatically send a request in the same way that a browser does when you load a page. And you can capture the return value (the output of your PHP) and use it as you need. But this object is wrapped in JQuery which makes it more easy and better cross-browser compatible.

Trufa Over a year ago

@singles I Trying this out but I don't know how to make the for POST the values to the .php so that the data is available when you load the page. This is as far as I've got.

Trufa Over a year ago

@singles what I meant is that right know the content of the generar.php is being loaded, this is good. But the variables are not being sent, is that more clear?

Radek Over a year ago

@Trufa you must set valid content type and send data. Look at this: pastie.org/1511263 - I've added two lines and it's working now - data is sent by post and available on PHP side within $_POST.

|

mVChr · Accepted Answer · 2011-01-30 01:04:18Z

0

In your case you can use $.post()^DOCS. If you gave your form an id="myForm" then you could load the return data into the form's parent in the callback as follows:

$('#myForm').submit(function(e){
  e.preventDefault();
  $.post("toload.php", $("#myForm").serialize(), function(data) {
    $(this).parent().html(data);
  });
});

edited Jan 30, 2011 at 1:04

answered Jan 29, 2011 at 23:05

mVChr

50.3k11 gold badges111 silver badges105 bronze badges

4 Comments

Trufa Over a year ago

I think this is EXACTLY what I was looking for, I'll give it a try and come back in a sec! (Thanks) :)

Trufa Over a year ago

I can't seem to make it work, I've tried this and this. But they all redirect the .php page as usual. AM I doing something wrong?

mVChr Over a year ago

Sounds like you need to add e.preventDefault() to the function, I'll update my code.

Trufa Over a year ago

Now I have this: pastie.org/1510427 but there is no reaction after the button click, thanks!!

Collectives™ on Stack Overflow

Load php content with jQuery AJAX

3 Answers 3

2 Comments

6 Comments

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

6 Comments

4 Comments

Linked

Related