Submit form additions or changes using AJAX, and display result I am submitting my form using ajax. Here is the actual code:

// generic ajax caller
function ajaxHandler(url, data, options)
{
    return $.ajax($.extend({
            type: 'POST',
            url: url,
            dataType: 'json',
            data: data,
            success: function (data) {
                return data;
            },
            error: function (xhr, textStatus, error) {
                return error;
            },
        }, options))

};



   // This code handles course submission form 

     $('#add-course').on('submit', function (e) {
    e.preventDefault();

    var form = $(this);

    ajaxHandler(form.url, form.serialize()).then(function (result) {

        console.log('#############');

        $('.field-error, .success, .error').remove();
        if(result.errorType == "fieldErrors")
        {
            // handle field errors
            $.each(result.data, function (key, value) {
                console.log(key, value);
                $('&lt;span class="field-error"&gt; ' + value.msg + '&lt;/span&gt;').insertBefore('#' + value.param);
            });
        }

        else if(result.errorType == "formErrors")
        {
            // handle form errors
            $('&lt;p class="error"&gt;' + result.message + '&lt;/p&gt;').insertBefore(form);
        }

        else
        {
            // success
            form[0].reset();
            $('&lt;p&gt;&lt;span class="success"&gt;' + result.message + '&lt;/span&gt;&lt;/p&gt;').insertBefore(form);
        }

    })
    .fail(function (error) {
        $('&lt;p &gt;&lt;span class="error"&gt;Error connecting server&lt;/span&gt;&lt;/p&gt;').insertBefore(form);
    });

});


// Here is code which handles update course form
$('#change-course').on('submit', function (e) {
    e.preventDefault();

    var form = $(this);

    ajaxHandler(form.url, form.serialize()).then(function (result) {

        $('.field-error, .success, .error').remove();
        if(result.errorType == "fieldError")
        {
            // handle field errors
            $.each(result.data, function (key, value) {
                console.log(key, value);
                $('&lt;span class="field-error"&gt; ' + value.msg + '&lt;/span&gt;').insertBefore('#' + value.param);
            });
        }

        else if(result.errorType == "formError")
        {
            // handle form errors
            $('&lt;p&gt;&lt;span class="form-error"&gt;' + result.message + '&lt;/span&gt;&lt;/p&gt;').insertBefore(form);
        }

        else
        {
            // success
            $('&lt;p&gt;&lt;span class="success"&gt;' + result.message + '&lt;/span&gt;&lt;/p&gt;').insertBefore(form);
        }

    })
        .fail(function (error) {
            $('&lt;p&gt;&lt;span class="error"&gt;Error connecting server&lt;/span&gt;&lt;/p&gt;').insertBefore(form);
        });
});


As you can see the structure of add/update form is almost the same. How can I refactor all this?
I think most of the code duplication can be taken care of by simply creating success and failure functions to handle the ajax response for both your forms. Additionally, if you're only sometimes going to pass a value to options in the ajaxHandler function, you should check if it's undefined.

// generic ajax caller
function ajaxHandler(url, data, options) {
  var ajaxOptions = {
    type: 'POST',
    url: url,
    dataType: 'json',
    data: data,
    success: function(data) {
      return data;
    },
    error: function(xhr, textStatus, error) {
      return error;
    }
  };
  return (options === undefined) ? $.ajax(ajaxOptions) : $.ajax($.extend(ajaxOptions, options));
};

function success(result, form, reset) {
  $('.field-error, .success, .error').remove();
  if (result.errorType == "fieldErrors") {
    // handle field errors
    $.each(result.data, function(key, value) {
      console.log(key, value);
      $('&lt;span class="field-error"&gt; ' + value.msg + '&lt;/span&gt;').insertBefore('#' + value.param);
    });
  } else if (result.errorType == "formErrors") {
    // handle form errors
    $('&lt;p class="error"&gt;' + result.message + '&lt;/p&gt;').insertBefore(form);
  } else {
    // success
    if (reset) {
      form[0].reset();
    }
    $('&lt;p&gt;&lt;span class="success"&gt;' + result.message + '&lt;/span&gt;&lt;/p&gt;').insertBefore(form);
  }
}

function failure(form) {
  $('&lt;p&gt;&lt;span class="error"&gt;Error connecting server&lt;/span&gt;&lt;/p&gt;').insertBefore(form);
}

// This code handles course submission form 
$('#add-course').on('submit', function(e) {
  e.preventDefault();
  var form = $(this);
  ajaxHandler(form.url, form.serialize())
    .then(function(result) {
      console.log('#############');
      success(result, form, false);
    })
    .fail(function(error) {
      failure(form);
    });
});

// Here is code which handles update course form
$('#change-course').on('submit', function(e) {
  e.preventDefault();
  var form = $(this);
  ajaxHandler(form.url, form.serialize())
    .then(function(result) {
      success(result, form, true);
    })
    .fail(function(error) {
      failure(form);
    });
});