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?

Solution

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;
            }
        }
    });
}

Comments

[Trufa]

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

[user3167101]

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

[GolezTrol]

@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.

[mVChr]

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

[FeRtoll]

well then attach it to that 2 :)

[Trufa]

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?

[Trufa]

@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]

@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?

[mVChr]

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

[Trufa]

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

[Radek Benkel]

@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.

[hhh]

-1 sorry I am just starting to smell rat with 3.*school, wasted so much time on it. If you look how many people are wasting time due to inaccuracies/errors in the site, like 4 questions about similar topic [here](www.google.com/search?ie=UTF-8&q=XmlHttpRequest+link%‌​3Ahttp%3A%2F%2Fw3foo‌​ls.com%2F) and more questions continuoustly, it is starting to feel irresponsible to share the site. The site is spam, dot. I am happy to remove downvote if you explicitly mention some better site or warn about inaccuracies and errors in the site.