jEditable Custom Form submit

I am using jeditable to edit form and stuck at custom form submit to server.

There is product description box I need to edit. when some click edit it pops-up a window with product description in editable mode with a extra drop-down box (asking for reason what is user changing). However, I need only description to display on webpage but not reason.

How can I do this?

Example code

$.editable.addInputType('autogrow', {
 element : function(settings, original) {
 var hourselect = $('<select id="reason" name="reason">');开发者_高级运维
 var textarea = $('<textarea id="text" />');
 $(hourselect).append(
 $('<option />').text('Select a reason').val(''),
    $('<option />').text('Adding new Description').val('1'),
    $('<option />').text('Editing Grammar').val('2')
  );
 $(this).append(hourselect);

 if (settings.rows) {
  textarea.attr('rows', settings.rows);
  } else {
  textarea.height(settings.height);
  }
  if (settings.cols) {
   textarea.attr('cols', settings.cols);
  } else {
  textarea.width(settings.width);
  }
    $(this).append(textarea);
    /* Last create an hidden input. This is returned to plugin. It will */
    /* later hold the actual value which will be submitted to server.   */
   var hidden = $('<input type="hidden" />');
    $(this).append(hidden);

    return(hidden);
},
plugin : function(settings, original) {
    $('textarea', this).autogrow(settings.autogrow);
},
submit: function (settings, original) {
var value = $('#text').val();
    $('input', this).val(value);
 }
});

I can only send one value to server i.e. text or . I also want to send reason to server.

Has anybody came across this problem or use-case and guide me.

Viral

I got replied from tuupola [jeditable] author

"Currently Jeditable sends only one value to server. However you could write values of all your inputs as JSON encoded array to the hidden input. Then on server side decode the JSON string back to an array."

Second way is:

you can use submitdata option and pass all your extra parameter in that as well.

For example,

var bar = $('selector').val(); //extra value to server
$(".edit_area").editable(your_url, { 
event : 'click',
indicator : '<img src="/images/spinner.gif">',
type : "text",
submitdata : {foo: bar}
});

Hope this help