I want the left side of the div to remain unchanged when the form is submitted with the right client and after the client log is created, update the client list (dropped out) on the left side of the div (invoice)
Based on your description, it sounds like you want to POST the data asynchronously and then reload the containing div without doing a full postback:
First of all, use jQuery
Include this line in your HTML: <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
POST asynchronously with $ .ajax ()
$('#yourForm').submit(function(event) {
event.preventDefault();
$.ajax({
type: 'POST',
url: 'php/yourPHPScript.php',
data: $(this).serialize(),
dataType: 'json'
});
});
$(this).serialize()
will POST all inputs on the form, so you can access them in your php codebase something like this: $yourField = $_POST['yourField];
Load data dynamically with $ .load ()
So you've sent your data back to the server, and now you want to reload the div to reflect the server side changes without doing a full postback. We can do this with jQuery $.load()
:
Let's write a simple function to call $.load()
:
function reloadDiv(){
$('#divToReload').load('scriptWithThisDivContent.php');
}
We can send it to the previous function $.ajax()
, which will be executed after the async POST returns to the server with the deferred object :
$('#yourForm').submit(function(event) {
event.preventDefault();
$.ajax({
type: 'POST',
url: 'php/yourPHPScript.php',
data: $(this).serialize(),
dataType: 'json'
}).done(function() {
reloadDiv();
});
});