Adding extra parameters to Jquery $.extend

Question

I have written a jQuery plugin to trigger an modal on click or on Change of an element.

$.fn.showInformationOverlay = function(options){
        var defaults = {
           fragments: "myfrag",
           ajaxSource: true,
           _eventId: "myfragEvent",
           formId: "#myform",
           event: "click"
        }

       var params = $.extend({},defaults, options);
       var $url = $(params.formId).attr("action");
       var $this = $(this);

       return $this.each(function(){
          $this.on(params.event,function(e){
               e.preventDefault();
               $.ajax({
                  type: "POST",
                  url:$url,
                  data:params,
                  success: function(data){
                    if (!!data) {
                           //Do something with data
                    }
                  }
              });
          });
       });
  },

I am calling this plugin by passing parameters as below.On some occasions I have additional parameters been passed in.

$("#mydropdownElement").showInformationOverlay({
        fragments: "myfragmentforthissection",
        ajaxSource: true,
        _eventId: "myfragmentforthissectionEvent",
        includeChangedValue: true, //Additional Param
        nameForChangedValue: "mychangedValueKey",//Additional Param
        event: "change"
}); 

My question is

How can I "push" an object to the params with the key being nameForChangedValue and the value being the val() of $("#mydropdownElement").

So my expected array of objects should look like.

    {
      fragments: "myfragmentforthissection",
      ajaxSource: true,
      _eventId: "myfragmentforthissectionEvent",
      formId: "#myform",
      event: "change",
      mychangedValueKey : "mydropdownvalue" //Key as the name I've passed in and the value is the value from the change event of the dropdown
   }

Hope the question is clear. Many Thanks in advance.

Answer 1

Try

$.fn.showInformationOverlay = function(options){
        var defaults = {
           fragments: "myfrag",
           ajaxSource: true,
           _eventId: "myfragEvent",
           formId: "#myform",
           event: "click"
        }

       var params = $.extend({},defaults, options);
       var $url = $(params.formId).attr("action");
       var $this = $(this);

       return $this.each(function(){
          $this.on(params.event, function(e){
               var data;
               if(params.includeChangedValue){
                   data = $.extend({}, params);
                   data[params.nameForChangedValue] = $(this).val();
                   delete data.includeChangedValue;
                   delete data.nameForChangedValue;
               } else {
                   data = params;
               }
               e.preventDefault();
               $.ajax({
                  type: "POST",
                  url:$url,
                  data:data,
                  success: function(data){
                    if (!!data) {
                           //Do something with data
                    }
                  }
              });
          });
       });
}

Update:
As you can see the only change I made is

           var data;
           if(params.includeChangedValue){
               data = $.extend({}, params);
               data[params.nameForChangedValue] = $(this).val();
               delete data.includeChangedValue;
               delete data.nameForChangedValue;
           } else {
               data = params;
           }

and use data as the data for ajax request.

If includeChangedValue is not set the request work as it was working before.

Else we create a copy of the params object as we do not want the changes to be copied to other instances using data = $.extend({}, params). Then we add an additional property based on the value passed to nameForChangedValue and with the input control's value using data[params.nameForChangedValue] = $(this).val();.
At the end we remove the unwanted keys includeChangedValue and nameForChangedValue from the data object.