kflorence/jquery-deserialize

Decodes serialized form data and populates a form with that data.

jquery-deserialize's Issues

Multiple selects with same name are not deserialized properly

The reason is here:

type = ( len = element.length ) ? element[ 0 ] : element;

len is either amount of options or amount of selects and should be processed differently.

Can be fixed by splitting rselect on rselect and roption and fixing rselect case by something like:

...
} else if ( rselect.test( type ) ) {
    if ( len ) {
        j = names[ name ];
        element = element[ names[ name ] = ( j == undefined ) ? 0 : ++j ];
        len = element.length
    }
    property = "selected";
} else if ( roption.test( type ) ) {
    property = "selected";
}
...

I'm to lazy to make a pull request about this, sorry.

checkboxes are only checked, not unchecked

In case there are several checkboxes with the same name, and their default is "checked", but only one of them appears in the query string - the other checkboxes will remain checked.

Deserialize data to be used in script.

Hi :)

Could you agregate a method to deserialize the form or a serialized string, returning a json object to be used in script?

eg:

var formDataObj = $.fn.deserialize( formElement );

var formDataObj = $.fn.deserialize( '&name=Charlie&age=12' );

I think that would be very useful.

how about npm?)

Please man publish this package to npm)

Could we get it to deserialize complex objects

If I want to deserialize an object like this one:

customer { customerDetails: { name: "John", id: 2 }, orderCount: 3 }`

Could I get it to deserialize into a form like this?

<input name="customerDetails.name">
<input name="customerDetails.id">
<input name="orderCount">

Bower component

Would be great if this were a bower component.

jquery-deserialize does not remove selection before deserialization multiple select

Version

1.3.5

Steps to reproduce

• Make html form like the following:

<form>
	<select name="selectMultiple" multiple="multiple">
		<option value="1" selected="selected">1</option>
		<option value="2">2</option>
		<option value="3">3</option>
	</select>
</form>

• Run javascript code like the following:
  $("form").deserialize({selectMultiple:[2,3]});

Expected result

Select has selected options with values "2" and "3"

Actual result

Select has selected options with values "1", "2" and "3"

Dual licence

I see that project has GPLv2 and MIT dual license.I would like to use this in a commercial project ? Does this mean I can choose MIT licence and ignore GPLv2 ?

Thank you

Does not work with nested field names

Nice script but only seems to work with simple names , something like this does not work

<form>
  <input type="text" name="foo[bar]" value="a value">
  <input type="text" name="foo[baz][quux]" value="another value">
</form>

Add support for inputs without a form

Fire onChange event

Do you think it's acceptable to fire change event when the field value is changed?
In line 76 and 92, add: $(element).change();
Or execute a callback once the value get changed?

npm install: missing files

Hi, npm install outputs only /src dir, package.json and readme.md.
No /dist so no minified file.

$ npm -v
3.10.3

$ npm install jquery-deserialize --save
******************
`-- [email protected]

Thanks!

Add support to create inputs if they don't exist

Currently jquery-deserialize does a great of taking an input and "remapping" the form.
What I would like is to add a case where my form could be empty and deserialize creates the needed input fields (for example hidden) in the specified formId.

RFE: deserialize function should fire change events

I have some users interface components (i.e. divs) that are shown or hidden according to the value of a select.
After form deserialization the selected value changes but the change event isn't triggered.
You could add something like $(element).change(); after the update of the select.

$.each( fields, function( index, field ) {
        if ( field.value == value ) {
          field[ property ] = true;
          callback.call( field, value );
        }
});
$(element).change();

To reproduce:

jQuery(document).ready(function () {
  jQuery('#selectid').change(function () {
    console.log(jQuery(this).val());
  });
});

You don't see the log if there is no the $(element).change(); action.
Thank you.

checking for undefined with typeof

I would recommend using typeof in line 28.

elementsByName[ element.name ] = typeof current === "undefined" ? element :

This way all the browsers will convert the undefined as a string to compare against, because some old browsers would throw an error.

As they don't recognise undefined as a datatype but as a string.

checkboxes without value are not properly deserialized

In my current project I used a checkbox like this:

<input type="checkbox" name="setting1" checked="checked">

The deserialize code doesn't handle this checkbox as I intended it because of the if ( current.value == value ) line in the code. My checkbox doesn't have a value, so the current code just skips it.

According to http://stackoverflow.com/q/11424037, the HTML above seems standard-conformant to me, so it would be nice if your deserializer could handle it, or document it explicitly that only checkboxes with value are supported.

By the way, current Chrome and Firefox handle it well (reporting element.value === "on" if it is missing), but my old Safari has the above problem.

Will there be a new release?

Latest release is 1.3.7 and the "release candidate" (2.0.0-rc1) made in 2017 has still not been released.

In the notes of 2.0.0-rc1 it says:

Note that this is a release candidate, it will be marked stable once users have confirmed that there are no regressions.

Is there any news about this?

Thanks! 😄

Request: refactor deserialize into reusable function so that it returns an object

I have a use case where I need to be able to deserialize a string (produced from $(form.serialize)) without updating a form. This way I can post the data using an AJAX call (and the server will be able to do proper model binding).
It would be great if you could make "deserialize" work as a static method on jQuery.

Document the usual use-case

After many trials and errors, I found out that the correct way to use this excellent plugin, for converting the query string to form elements, is:

$(document).ready(function() {
$('form').deserialize(location.search.substr(1));
});

Replace + in values with space on decodeURIComponent

Minified version does not properly deserialize some selects

Sorry that I can not provide a full example right now. My select has URLs as its options values and a name. Tried with serialize() and serializeArray() serialization methods but no luck deserializing.

As soon as I included the non-minified version of the plugin it started working

Error when loading the plugin

I'm getting the following error when loading:

jquery.deserialize.js:241 Uncaught TypeError: Cannot read property 'noop' of undefined
at jquery.deserialize.js:241
at jquery.deserialize.js:30
at jquery.deserialize.js:32
(anonymous) @ jquery.deserialize.js:241
(anonymous) @ jquery.deserialize.js:30
(anonymous) @ jquery.deserialize.js:32

with disabled the deserialize not working

Hi
I try you use the deserialize function it is working fine, but when I added disabled, the deserialize is not working anymore.

Lone checkboxes never checked

<input type="checkbox" name="mybox" value="myval"/>

Is not correctly checked by the call:

$(selector).deserialize("mybox=myval");

But bizarrely it works if I add another checkbox with the same name:

<input type="checkbox" name="mybox" value="myval"/>
<input type="checkbox" name="mybox" value="myotherval"/>

handle JSON boolean values for checkboxes true/false values

I think you could add the following to support JSON boolean values for checkboxes.
This is currently a string comparison only @~line 208

    // Handle select menus, checkboxes and radio buttons
    } else if ( property == "checked" || property == "selected" ) {
      var fields = [];
      var type; 

...

$.each( fields, function( index, field ) {
      
        //next 2 lines added to fix JSON boolean values for checkboxes true/false values
        type = typeof value;
        if ((type === 'boolean' && value.toString() === field.value) || ( field.value == value )) {
          field[ property ] = true;
          callback.call( field, value );
        }
      });

Support CakePHP checkbox

When using the CakePHP framework and their FormHelper you see that when creating checkboxes it produces the following HTML:

<input type="hidden" name="data[Post][Published]" id="PostPublished_" value="0" />
<input type="checkbox" name="data[Post][Published]" value="1" id="PostPublished" />

When a form is submitted, the server receives data[Post][Published] as false when the checkbox is unchecked. The "problem" with deserialize() it will skip/ignore the actual checkbox. I've created a specific solution for this CakePHP form problem (insert at line 106):

// Exception for CakePHP framework
if ( type == "hidden" && element.length == 2 && element[ 1 ].type == "checkbox" && element[ 0 ].id == element[ 1 ].id + '_') {
    // The hidden element should be unchanged
    type = "checkbox";
}

1: Check if the current type is hidden.
2: Check if the element array has length 2.
3: Make sure the second element is the checkbox.
4: Compare the element ids (with underscore).

When these conditions are true, the type should be "checkbox" so the hidden value stays the same but the actual checkbox is handled by serialize().

When a field is not found, the change callback is not called

Hi !

Nice plugin but I guess it lacks a function :)

I have some ajax loaded fields, so when I call deserialize they aren't found. Then the change callback isn't called.

1. Do you think I'd be possible either to add a new callback (e.g. fieldNotFound(name, value)) , or to trigger the change callback even if the value is not found.
2. Another solution - cleaner I guess - would be to add an option dynamicFields : [ 'name1, name2,...'] which contains all dynamic fields.
   Then when the loading is complete you can use a callback to retur a map with these fields and their values : { 'name1' : "value1", ... }

Thanks before for the great work ;)

Jonathan

Force adding options to multi select

Hi!
I am using the select2 box in combination with jquery Deserialize, which works perfectly when not using ajax.
When using the ajax plugin, the options arent in the < select>< /select>, because they are not loaded yet (you have to search first).

Is it possible to make an 'force option', where the option is added to the like: < option value="{ID}"> The name would be empty, since its not safed with serializing. When its in the < select>, i can use select2 to load the name again. Thnx!