Add content to div with php dynamically - php

Question

So I'm making a contact form. When the form is submitted I want to add a success or error message to a Bootstrap modal.
Here is the button that submits the form and opens the modal.
<input class="btn btn-info" type="submit" value="Submit" name="Submit" data-toggle="modal" href="#contactModal"/>
So when the button is clicked it submits the form and opens the modal. Is there a way to add a string of text to the modal dynamically upon success or failure of the script?
Here is the PHP success/failure action currently
if ($success){
print "<meta http-equiv="refresh" content="0;URL=contactthanks.html">";
}
else{
print "<meta http-equiv="refresh" content="0;URL=error.html">";
}
But I want it to add content to the modal instead of adding a <meta> tag that redirects the page
Here is the modal code
<div id="contactModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Thanks!</h3>
</div>
<div class="modal-body">
<p>I'm pretty busy sometimes but I'll try my best to message you back <strong>ASAP</strong>!</p>
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
So how would I print to the inside of a <div> within the modal without refreshing the page or redirecting?
I don't know any PHP or AJAX and I'm just not starting to begin JS and jQuery (two days to be exact)

Answer 1

You cannot submit a form and not have the page refresh. What you most likely want to do is use an AJAX request to your php instead, which will return the success/failure status as JSON, which you will then use to conditionally add content to your div with javascript.
Instead of a form, you will just use a normal <input type="button" /> with an onclick="someFunction" where someFunction makes the AJAX call.
You will want to use jQuery.
Your php would look like
//do something with submitted values
if ($success){
echo json_encode(True);
}
else{
echo json_encode(False);
}
and the AJAX call would be something like
$.ajax({
type: "POST",
url: "dosomething.php",
data: { formValue1 = <get value using jquery>, etc... }
dataType: "json",
success: processData,
error: function(){ alert("failed"); }
});
function processData(data)
{
if(data) {
$("div#divid").html("what you want to add inside the div");
}
}