Load php content with jQuery AJAX

Question

My problem:

I have index.html:

Input: 

        

Answer 1

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

Answer 2

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

Answer 3

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)