How to send FormData objects with Ajax requests in jQuery?

HTML5 introduces FormData to allow developers to build forms objects dynamically and then to send this form object via AJAX. You can easily use FormData() with an XMLHttpRequest by passing the FormData instance as the parameter to xhr. send()

<form id="form">
    <div class="row">
        <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
            <div class="form-group">
                <label>First Name</label>
                <input type="text" name="txt_firstname" class="form-control" id="txt_firstname" data-parsley-required-message="Enter Your First Name" required="" pattern="[a-zA-Z ]*$" data-parsley-pattern-message="Letters Only" data-parsley-whitespace="trim" value="@ViewBag.txt_firstname" />
            </div>
        </div>
        <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
            <div class="form-group">
                <label>Middle Name</label>
                <input type="text" name="txt_middlename" class="form-control" id="txt_middlename" pattern="[a-zA-Z ]*$" data-parsley-pattern-message="Letters Only" data-parsley-whitespace="trim" value="@ViewBag.txt_middlename" />
            </div>
        </div>
        <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
            <div class="form-group">
                <label>Last Name</label>
                <input type="text" name="txt_lastname" class="form-control" id="txt_lastname" pattern="[a-zA-Z ]*$" data-parsley-pattern-message="Letters Only" data-parsley-whitespace="trim" value="@ViewBag.txt_lastname" />
            </div>
            <input type="submit" name="btn_form_submit" id="btn_form_submit" value="Submit" class="btn btn-danger" />
        </div>
    </div>
</form>

<script type="text/javascript">
    $("#btn_form_submit").click(function () {
        $("#btn_form_submit").val('Wait...');
        var fd = new FormData();
        fd.append("txt_firstname", $("#txt_firstname").val());
        fd.append("txt_middlename", $("#txt_middlename").val());
        fd.append("txt_lastname", $("#txt_lastname").val());
        $.ajax({
            url: '/home/FormSubmit',
            type: "POST",
            dataType: "JSON",
            data: fd,
            contentType: false,
            processData: false,
            success: function (result) {


            }
        })
    });
</script>

Tag

How to send FormData objects with Ajax requests in jQuery?
minify code