Forum Moderators: open
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function(){
$("form#submit").submit(function() {
var fname = $('#fname').attr('value');
var lname = $('#lname').attr('value');
$.ajax({
type: "POST",
url: "#",
data: "fname="+ fname +"& lname="+ lname,
success: function(){
$('form#submit').hide(function(){$('div.success').fadeIn();});
}
});
return false;
});
});
</script>
</head>
<body>
<?php
echo 'fname:' . $_POST['fname'] . '<br/>';
echo 'lname:' . $_POST['lname'];
?>
<div class="container">
<form id="submit" method="post">
<fieldset>
<legend>Enter Information</legend>
<label for="fname">Client First Name:</label>
<input id="fname" class="text" name="fname" size="20" type="text">
<label for="lname">Client Last Name:</label>
<input id="lname" class="text" name="lname" size="20" type="text">
<button class="button positive"> <img src="../images/icons/tick.png" alt=""> Add Client </button>
</fieldset>
</form>
<div class="success" style="display: none;">Client has been added.</div>
</div>
</body>
</html> 
success: function (data) {
alert(data);
}
<?php
echo 'fname:<span id="postedfname">' . $_POST['fname'] . '</span><br/>';
echo 'lname:<span id="postedlname">' . $_POST['lname'] . '</span>';
?>
success: function() {
$('#postedfname').html(fname);
$('#postedlname').html(lname);
$('form#submit').hide(function(){$('div.success').fadeIn();});
}
