How to send form data in ajax

Let’s start we have a simple form.

<form id="contactForm">
    <div class="form-control">
        <label for="name">Name</label>
        <input id="name" name="name" type="text" />
    <div class="form-control">
        <label for="email">Email</label>
        <input id="email" name="email" type="email" />
    <div class="form-control">
        <label for="message">Remark</label>
        <textarea id="remark" name="remark" rows="6" cols="65"></textarea>
    <button class="btn" type="button" id="submit">Submit</button>

Below function Converting FormData to JSON

$.fn.serializeFormJSON = function () {
    var o = {};
    var a = this.serializeArray();
    $.each(a, function () {
        if (o[]) {
            if (!o[].push) {
                o[] = [o[]];
            o[].push(this.value || '');
        } else {
            o[] = this.value || '';
    return o;

Now use serializeFormJSON() function to Converting FormData to JSON and send form.

   var  data= $("#contactForm").serializeFormJSON(); // convert to json    
        url: 'http://localhost:51964/savedata',
        dataType: 'json',
        type: 'post',
        contentType: 'application/json',
        data: JSON.stringify(data),
        processData: false,
        success: function (data, textStatus, jQxhr) {
        error: function (jqXhr, textStatus, errorThrown) {

  return false;
0 0 votes
Article Rating
Notify of
Inline Feedbacks
View all comments