每当表单输入字段发生更改时，都会发送一个ajax请求

我需要创建一个表单，每当使用jQuery更改事件更改表单元素时，该表单都会发送ajax请求。通过这样做，我能够获得以跨度显示的表单输入值：

<form id="TestForm" class="form-horizontal">
    <div class="form-group">
        <label for="namefirst" class="col-sm-2 control-label">First Name</label>
        <div class="col-sm-6">
            <input id="firstname" type="text" name="firstname" class="form-control" placeholder="Enter your first name" /><span id="spanfirstname"></span>
        </div>
    </div>
    <div class="form-group">
        <label for="namelast" class="col-sm-2 control-label">Last Name</label>
        <div class="col-sm-6">
            <input id="lastname" type="text" name="lastname" class="form-control" placeholder="Enter your last name" /><span id="spanlastname"></span>
        </div>
    </div>
    <div class="form-group">
        <label for="email" class="col-sm-2 control-label">Email</label>
        <div class="col-sm-6">
            <div class="left-inner-addon"> <i class="glyphicon glyphicon-envelope"></i>
                <input id="email" type="text" name="email" class="form-control" placeholder="Enter your email" /><span id="spanemail"></span>
            </div>
        </div>
    </div>
    <div class="form-group">
        <label for="phone" class="col-sm-2 control-label">Phone</label>
        <div class="col-sm-6">
            <div class="left-inner-addon"> <i class="glyphicon glyphicon-phone-alt"></i>
                <input id="phone" type="text" name="phone" class="form-control" placeholder="Enter your phone number" /><span id="spanphone"></span>
            </div>
        </div>
    </div>
    <div class="form-group">
        <label for="password" class="col-sm-2 control-label">Password</label>
        <div class="col-sm-6">
            <input id="password" type="password" name="password" class="form-control" placeholder="Enter a password" /><span id="spanphone"></span>
        </div>
    </div>
    <div class="form-group">
        <label for="password" class="col-sm-2 control-label"></label>
        <div class="col-sm-6">
            <button class="button green major beeboop" name="button" type="submit">This is a test</button>
        </div>
    </div>
</form>
<div id="result"></div>
<div class="row spacer"></div>
</div>
<!-- /container -->
<script src="//code.jquery.com/jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#firstname').change(function() {
            $('#output_firstname').val($(this).val());
            $('#spanfirstname').html('<b> TestForm: firstname:' + $(this).val() + '</b>');
        });
        $('#lastname').change(function() {
            $('#output_lastname').val($(this).val());
            $('#spanlastname').html('<b>' + $(this).val() + '</b>');
        });
        $('#email').change(function() {
            $('#output_email').val($(this).val());
            $('#spanemail').html('<b>' + $(this).val() + '</b>');
        });
        $('#phone').change(function() {
            $('#output_phone').val($(this).val());
            $('#spanphone').html('<b>' + $(this).val() + '</b>');
        });
        $('#password').change(function() {
            $('#output_password').val($(this).val());
            $('#spanpassword').html('<b>' + $(this).val() + '</b>');
        });
    });
</script>

我尝试在更改事件函数中包装ajax请求，但没有成功：

<script>
    $(document).ready(function() {
        $('#firstname').change(function() {
            jQuery.post("ajax-process.cfm", {
                firstname: jQuery('#firstname').val()
            }, function(data) {
            });
            return false;
        });
    });
</script>

@omar ali@Anil Namde更新了代码。但现在我只得到控制台中的第一个值：

$("input[type='text']").change(function() {
var firstname = $("#firstname").val();
var lastname = $("#lastname").val();
var email = $("#email").val();
$.ajax({
url : "ajax-process.cfm",
type: "POST",
data: {
    firstname: firstname,
    lastname: lastname,
    email: email
},
success: function(data) {
$("#simple-msg").html('<pre><code>' + data +  '</code></pre>');
}
});
});