form.serialize() breaks when using valueMember

[tmcneillParticipant]

I have an issue similar to the one discussed in this thread, which does not contain a satisfactory resolution:
http://www.jqwidgets.com/community/topic/jqxinput-doesnt-return-value/

The problem is that the jQuery .serialize() function breaks when using the valueMember property on a jqxInput.

The setup is something like this:

<form id='form1'>
  <input type='text' id='text_input' name='input1'/>
  <div id='dropdown_input' name='input2'></div>
</form>

var settings = {
  source: [
    {value: 45, label: 'apple'},
    {value: 46, label: 'banana'},
    {value: 47, label: 'coconut'}
  ],
  valueMember: 'value',
  displayMember: 'label
}

$('#text_input').jqxInput(settings);

$('#dropdown_input').jqxDropDownList(settings);

Notice that after selecting the ‘banana’ option on each field, the result of .val is different for each field:

$('#text_input').val(); // {value: 46, label: 'banana'}
$('#dropdown_input').val() // 46

My application uses ajax form submission via a fairly standard practice set up something like this:

$('#form1').submit(function(){
    // Serialize the form data.
    var form = $('#form1');
    var form_data = form.serialize();

    // Contact the web service to insert the record.
    $.ajax({
      url: 'http://webserviceurl',
      method: 'PUT',
      data: form_data,
      dataType: 'json',
      ....
    })
   
   // Prevent default form submission.
   return false;
});

The line, var form_data = form.serialize();, throws the error, Uncaught TypeError: c.replace is not a function(…), if any selection is made. This is because inside the .serialize() function, the .replace() function is applied to the value of the field, which is an object rather than the expected string.

Note that the dropdown input behaves correctly and as expected, returning only the specified valueMember.

The current behavior of the valueMember property on the jqxInput widget is both inconsistent with that of the jqxDropDownListWidget (and possibly others) as well as breaking the jQuery .serialize() function. Is there a recommended workaround for this? Or are there any changes soon planned to this widget?

[Peter StoevKeymaster]

Hi tmcneill,

We don’t support form.serialize and never did. Our suggestion is to use a different approach for getting and serializing values.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts