marioizquierdo / jquery.serializejson Goto Github PK

View Code? Open in Web Editor NEW

1.7K 63.0 436.0 643 KB

Serialize an HTML Form to a JavaScript Object, supporting nested attributes and arrays.

License: MIT License

JavaScript 97.47% CSS 1.86% HTML 0.67%

unchecked-checkboxes javascript parsed-values nested-keys jquery serializejson

jquery.serializejson's Issues

.js fails to load on linux (ubuntu) due to filename mismatch

Hi Mario.

in your example you give the following snippet to include the .js:

  <script type="text/javascript" src="jquery.serializeJSON.min.js"></script>

but the file in the download is actually named :

  jquery.serializejson.min.js

Fails to load (at least on ubuntu 14) most probably 'cause since linux FS is context sensitive.

I'am actually wondering why this works on mac osx ??? It does, I run it without problems. Windows is fine (Windows7), too.

npm publish

could you npm publish to push the latest version 2.7.2 to npm?

Thx

How can I de-serialize back into the form?

How can I deserializing object back into form inputs?

html:
<input type="checkbox" name="test" value="1" checked="checked" /> <input type="checkbox" name="test" value="2" checked="checked" /> <input type="checkbox" name="test" value="3" checked="checked" />

jquery.serializeJson result:
{test:3}

desired result:
{test:[1,2,3]}

Data types

Is it possible to define the type of the form fields in the attribute (e.g. data-type="number") instead of put it part of the name of the field? It's much easier to populate data back to the form, and it will work better with other libs?

Empty multiple select

So I have a select sg like this:

<select name="camel[]" multiple>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

When I try to serialize with serializeJSON and no one option is selected, the camel array is missing from the result, but I check any of the options, the camel array is appearing in the result.

Can I miss something? I searched, but I not found any options for serializeJSON to give me back the empty camel array.
Or if this is not possible at this time could implement this feature?

I temporary bypass the problem with a hidden input, but I really don't like this solution.

`checkboxUncheckedValue` and arrays

I ran into an issue with combining checkboxUncheckedValue and array-like checkboxes

<label class="checkbox-inline">
  <input type="checkbox" name="flags[]" value="input1"> Input 1
</label>
<label class="checkbox-inline">
  <input type="checkbox" name="flags[]" value="input2"> Input 2
</label>

It's currently getting treated as hash, i.e.

{ 
  "flags": {
    "input1": false,
    "input2": true
  }
}

It would make sense if they were defined as name="flags[input1]" but in this case it should rather be parsed as an array.

Expected result

No checked boxes:

{ 
  "flags": []
}

Checked boxes:

{ 
  "flags": ["input2"]
}

switching from SerializeObject

I'm switching from using this code (https://github.com/hongymagic/jQuery.serializeObject) to using your serializeJSON instead. In both cases, I'm trying to send JSON to a java backend. My application was developed with the SerializeObject in mind, but I'd like to switch over to using your code here.

Can you see any reason why SerializeJSON would produce a different data structure than SerializeObject? I'm comparing the outputs of [ form -> SerializeObject ] vs. [ form -> serializeJSON -> JSON.stringify ]. I feel stumped.

Parsing Error, second ] is ignored.

Greetings,

In a certain set of circumstances the second ] in a input name is incorrectly parsed.

An example here:

    <!DOCTYPE html>
    <html>
      <head>
        <script src="/javascript/jquery-1.11.1.min.js"></script>
        <script src="/javascript/serializeJSON/jquery.serializeJSON.min.js"></script>
        <script>
        //<![CDATA[
        jQuery(document).ready(function() {
            // save the form
            jQuery('.js-submit-button').on('click', function(e) {
                e.preventDefault();
                $('#fart').replaceWith(JSON.stringify($('#my_form').serializeJSON(), undefined, 2));
            });
        });
        //]]>
        </script>
      </head>
      <body>
        <form id="my_form">
          <input name="guide[section[abcd]][anchor_target]" value="41268" type="hidden">
          <input name="guide[section[defg]][anchor_target]" value="170805" type="hidden">

          <button class="js-submit-button">Save Guide</button>
        </form>
        <div id="fart">
          testing
        </div>
      </body>
    </html>

Generates this result:

    { "guide": { "section": { "abcd]": { "anchor_target": "41268" }, "defg]": { "anchor_target": "170805" } } } }

Note that the key name is "abcd]", the ']' bracket should not be part of the key.

When I run this though the rails parser, I get the following:
(reference: http://codefol.io/posts/How-Does-Rack-Parse-Query-Params-With-parse-nested-query )

[RAILS_ENV=development deployer@local current]$ irb
irb(main):001:0> require 'rack'
=> true
irb(main):002:0> def p(params)
irb(main):003:1>   Rack::Utils.parse_nested_query(params)
irb(main):004:1> end
=> :p
irb(main):005:0> p("guide[section[abcd]][anchor_target]=41268&guide[section[defg]][anchor_target]=170805")
=> {"guide"=>{"section"=>{"abcd"=>{"anchor_target"=>"41268"}, "defg"=>{"anchor_target"=>"170805"}}}}
irb(main):006:0>

I get the expected output.

Let me know if there is anything I can do to help!

-daniel

2.6.0 release?

Hiya, (first off thanks for the very handy plugin) I could really use the new "customTypes" option but it seems the 2.6.0 version has not been tagged yet so I cant pull it via bower (properly) unless i go to the latest commit. Would very much appreciate a new tag. Cheers!

Uncaught TypeError: Cannot assign to read only property 'include' of latlong

line 186 in the js file:

  o[key] = [];

I am not sure what does that.

Add jquery.serializeJSON to bower

Hello, it could be great if you can add jquery.serializeJSON to bower repository, in order to include it easily in heavy projects.

File attachement

i use jquary serializeJson ,but i have one troulbe i can't post File how i can do this ?

my code

var courseType = $('#main-form').serializeJSON();

    $.post("/course/types/save",
        courseType, function(data){}

form action="#" class="form-horizontal" id="main-form" enctype="multipart/form-data">

input type="file" name="photo"

form

Does it sanitize inputs?

Hello,

I am using your script to get data from a from and make them a JS object, all works fine but I'm wondering if I can "sanitize" the input from nasty tags, formatting, script tags etc...

Empty fields values are converted to zero when {parseNumbers:true}

Hello!
If I i need to parse numbers and have some empty fields in the form at the same time, I get incorrect result. Why not use str.match(/^\d+$/) instead of !isNaN(str)?

How to replace key

I want to replace the key

I know how to replace the value, but not the key.
parseWithFunction

Option to parse only non-text fields

So frequently, the fields we wish to parse are actually number fields, checkboxes, or radio buttons--maybe selects. But we don't want to parse, say, a plain text field just because the user happened to enter a number. An option to specify what input types you would like parsed would be very helpful. I'd be glad to help implement this.

lowercase filenames

Please consider lowercase filenames; lowercase is standard thanks UNIX, plus npm makes it mandatory, others have mixedcase issues, & IIRC jsDelivr CDN files must be lowercase also.

Support parse comma separated value as Array.

Consider some HTML select tag replacement (such as dropdown component of semantic-ui) allow multiple selection. And it will write multiple selection as comma separated string to a hidden field's value property.

Values with quotes

Hi,

Is this a bug of the plugin that it can't handle double quotes in strings?

It doesn't escape them at all, when I'm trying to JSON a form with tinyMCE inside it. In the textarea from tinyMCE I have images with attibutes like class="" etc.

Is there any way I could escape the double quotes?

Problem with names with array-style numerical keys

Say you've got a form like:

<form>
    <input type="hidden" name="status[1]" value="1">
    <input type="hidden" name="status[3]" value="0">
    <input type="hidden" name="status[6]" value="1">
</form>

$('form').serializeJSON() gives you:

{
    "status": [ // Array[3]
        1: "1",
        3: "0",
        6: "1"
    ]
}

which on many backends will get converted into a non-associative array, delinking the keys. This means you can't use things like IDs as keys.

However, both https://github.com/danheberden/jquery-serializeForm and https://github.com/serbanghita/formToObject.js get this right, and $('form').serializeForm() gives you:

{
    "status": { // Object
        "1": "1",
        "3": "0",
        "6": "1"
    }
}

IMO, anytime an explicit value is given in the form array-syntax, that element should be an object. So given status[1], status would be an object, whereas given status[], status would be an array.

Ability to read disabled input values

I'm very happy to find this library. It really helps me to solve the unchecked checkbox issues.

However, It seems it doesn't have an option to read disabled input values. Any ideas or suggestions?

obj is undefined

I am getting this error message in firefox console 27 :(

TypeError: obj is undefined jquery.serializeJSON.js:87

Array of Objects with dot (.) syntax

Hi,

I'm currently using this stuff to populate array of objects. This is on ASP.NET MVC
http://ivanz.com/2011/06/16/editing-variable-length-reorderable-collections-in-asp-net-mvc-part-1/.

What it does is something like this :

<ul>
<li>
<input name="Ingredients.Index" type="hidden" value="425b56ca-5c9c-4d49-b30b-346b6d0bff6f">
<input name="Ingredients[425b56ca-5c9c-4d49-b30b-346b6d0bff6f].IngredientSubTitle" type="text" value="">
<input name="Ingredients[425b56ca-5c9c-4d49-b30b-346b6d0bff6f].IngredientName" type="text" value="cauliflower">
</li>


<li style="padding-bottom:15px">

<input name="Ingredients.Index" type="hidden" value="d5422e9d-7cec-4b01-9378-d71f2ea9b188">
<input name="Ingredients[d5422e9d-7cec-4b01-9378-d71f2ea9b188].IngredientSubTitle" type="text" value="">
<input name="Ingredients[d5422e9d-7cec-4b01-9378-d71f2ea9b188].IngredientName" type="text" value="apples">
</li>


<li>
<input autocomplete="off" name="Ingredients.Index" type="hidden" value="5f9dda33-4be4-4f21-a249-3c291af03153">
<input name="Ingredients[5f9dda33-4be4-4f21-a249-3c291af03153].IngredientSubTitle" type="text" value="">
<input name="Ingredients[5f9dda33-4be4-4f21-a249-3c291af03153].IngredientName" type="text" value="red onion">

</li>
</ul>

Basically, it is indexing an array with the use of GUID instead of int.

I've used useIntKeysAsArrayIndex:true but what it does is it is only removing the label in front of the GUID.

What I would like to achieve is some thing like this :

"Ingredients": [
         { "IngredientSubtitle": "", "IngredientName": "cauliflower" },
         { "IngredientSubtitle": "", "IngredientName": "apples" },
         { "IngredientSubtitle": "", "IngredientName": "red onion" },
]

Thanks

option/callback/something to remove properties

how about an option or condition or callback or something to remove properties if they match a condition?

maybe something like this:

var data = someForm.serializeJSON({parseWithFunction: function(val){
    if (val === "") return; // removes the property from the returned object
    return val;
}});

so this would mean returning nothing wouldnt lead to "undefined", but to remove the property

or maybe an additional option like parseCondition?

or is this already possible and i just didnt find it?

really great library, thanks :)

Problem with checkbox checked

Hi, I have the next checkbox:

<input type="checkbox" name="show" value="true" checked>

if I uncheck the checkbox, continues send true on the object.

What i should do for this work right?

Serialize select with multiple attribute

I try to serialize form with select with multiple attribute and i got only one value from this field.

For example http://jsfiddle.net/0sn3ppof/1/

Json object is {"name":"text","values":"3"}
But $('select').val() is ["1","3"]

thx u for your plugin.

serializeArray in IE on non form element

Hello,

I discovered that in in IE11 and probably Edge using a serializeArray will not get the data if the selector is not a form.

I made a simple test changing from:
formAsArray = $form.serializeArray();
To
formAsArray = $form.find(':input').serializeArray();

and it seems to work also on IE.

Is this a valid approach or it might have any side effects.

I'm actually trying to serialize a div element.
Maybe i should call serializeJSON with this find instead?
e.g: $('#myDiv').find(':input').serializeJSON();

Any suggestions would help.

Thanks in advance!

Breaks when dealing with a property ending in '='

The '=' gets misinterpreted and ends up as ': '

Page source:
<input name="authenticity_token" type="hidden" value="UHomjpa8+9ljdfbUqGhQ9NGFUSONCzFZE66bicpLGjU=">

AJAX header:
X-CSRF-Token:UHomjpa8+9ljdfbUqGhQ9NGFUSONCzFZE66bicpLGjU=

Serialized JSON:
{"utf8":"✓","_method":"put","authenticity_token":"UHomjpa8 9ljdfbUqGhQ9NGFUSONCzFZE66bicpLGjU:","vote":{"up":"false"}}

`parseXYZ` options

I don't like that the parseNumbers option automagically parses everything that looks like a number to numbers, it gets confusing as the backend receiving the data can be type sensitive and won't like to receive a number for a string field, just because you inputted something that looks like a number in a string field. I have the same issue with parseBooleans/parseNulls.

Possible alternatives:

having a data attribute on inputs, i.e.

<input type="text" name="Numeric -2.25" value="-2.25" data-serialize-number="true" />`

passing an Array of the names you want to parse as numbers, i.e.

obj = $form.serializeJSON({parseNumbers: ['Numeric -2.25'/*[, otherName ] [, .. ] )*/});

What do you think? Either solution could be added with backwards compatibility.

Multiple select with default property

Hi,

thanks for plugin, helped me alot.

I have 2 select multiple, is it posibble to serialize it with default property value for each one

  <select name="users[][id]" data-typeid="1" multiple>
        <option value="1">a</option>
        <option value="2" selected>b</option>
        <option value="3" selected>c</option>
    </select>


    <select name="users[][id]" data-typeid="2" multiple>
        <option value="4">d</option>
        <option value="5" selected>e</option>
        <option value="6" selected>f</option>
    </select>

expected result

{"users":[{"id":"2","typeid":"1"},{"id":"3","typeid":"1"},{"id":"5","typeid":"2"},{"id":"6","typeid":"2"}]}

serializeJSON ignoring <select>

I'm kind of puzzled - I've created a simple select in MVC as follows:
<%:Html.DropDownList("PersonJobDescription", new SelectListItem[] {
new SelectListItem { Text = null, Value = null },
new SelectListItem { Text = "Administrator", Value = "Administrator" },
new SelectListItem { Text = "Nurse", Value = "Nurse" },
new SelectListItem { Text = "Teacher", Value = "Teacher" },
new SelectListItem { Text = "Secretary", Value = "Secretary" },
new SelectListItem { Text = "Health Aide/UAP", Value = "Health Aide/UAP" },
new SelectListItem { Text = "Other", Value = "Other" }
})%>

The name "PersonJobDescription" is rendered correctly in HTML. However upon using the following:

var formData = $("#myForm").serializeJSON();
var jsonstring = JSON.stringify(formData);

Everything else is scooped up into json nicely but the selector "PersonJobDescription" is ignored even though it has a name property being rendered. I also tinkered with Selected=true which is rendered as Selected="selected" it is still being ignored.
Thoughts?

Ignoring empty form fields

As far as I could understand, there is no way to ignore empty form fields, excluding them from the resulting object. If so, is this feature on the roadmap or are you open to a pull request?

Incorrect JSON generation for nested attribute.

Hey,

I was using your jQuery plugin and have encountered this weird behaviour.

<!DOCTYPE html>
<html>

<head>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="jquery.serializejson.js"></script>
</head>

<body>
    <form id= "new_form">
        User Email:
        <input type="text" name = "agent_signup[user_user_emails_attributes[0][email]]">
        <button>Submit</button>
    </form>
</body>

</html>

To serialize the form, I ran

$("#new_form").serializeJSON()

The returned object was

"{"agent_signup":{"user_user_emails_attributes":{"0":{"email]":""}}}}"

whereas the expected object is

"{"agent_signup":{"user_user_emails_attributes":{"0":{"email":""}}}}"

"select multiple options, just name it as an array[]" is not worling for me

Hello marioizquierdo,

Apart from the fact that adding the brackets in the name is not very suitable for me it also is not working.
When I include "multiple" in the select tag the tag is not included in the element array. If I put [] after the name or not.

Is there another option to get a multiple select element included?

Kind regards,
Mario

Problem with parsing array of nested objects

Hello!

I've found not quite correct behavior (compared to php's parsing algo).
Better to explain with an example:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="js/lib/zepto.min.js"></script>
    <script src="js/lib/jquery.serializejson.min.js"></script>
  </head>
  <body>
    <pre><?php
      if (! empty ($_POST)) {
        print_r ($_POST);
        echo json_encode ($_POST, JSON_NUMERIC_CHECK);
      }
    ?></pre>

    <form id="test" method="post">
      <!--
      <select name="users[id][]" multiple>
      js: {"users":{"id":[["2","3"]]}}
      php: {"users":{"id":[2,3]}}
      -->

      <select name="users[][id]" multiple>
      <!-- 
      js: {"users":[{"id":["2","3"]}]}
      php: {"users":[{"id":2},{"id":3}]}
      -->
        <option value="1">a</option>
        <option value="2">b</option>
        <option value="3">c</option>
      </select>
      <button type="submit">submit</button>
    </form>

    <script>
      $ (function () {
        $ ('#test').on ('submit', function (event) {
          console.log ( JSON.stringify ($ (this).serializeJSON ({ parseNumbers : true })) );
        });
      });
    </script>
  </body>
</html>

That is i get array of ids instead of array of key/value objects pairs.

Extra array items when using data-unchecked-value

In this form example:

<input type="text"     name="question" value="Favorite color?">

<input type="checkbox" name="answers[][correct]:boolean" value="true" data-unchecked-value="false">
<input type="text"     name="answers[][text]" value="Blue">

<input type="checkbox" name="answers[][correct]:boolean" value="true" data-unchecked-value="false">
<input type="text"     name="answers[][text]" value="Green">

<input type="checkbox" name="answers[][correct]:boolean" value="true" data-unchecked-value="false">
<input type="text"     name="answers[][text]" value="Red">

If all checkboxes are ticked (checked), it returns the correct JSON:

{
  "question": "Favorite color?",
  "answers":[
    {"correct":true,"text":"Blue"},
    {"correct":true,"text":"Green"},
    {"correct":true,"text":"Red"}
  ]
}

But if none of the checkboxes are ticked, it returns invalid JSON:

{
  "question": "Favorite color?",
  "answers": [
    {"text":"Blue"},
    {"text":"Green"},
    {"text":"Red","correct":false},
    {"correct":false},
    {"correct":false}
  ]
}

Doesn't handle multiple select

I tried the plugin on my form but it failed to render a multiple select with multiple selections as an array. It just showed one value.

Incorrect git tag

Looks like you incorrectly tagged the most recent release as 2.1.1 instead of 1.2.2, which confuses bower.

Auto-index with unchecked checkboxes problem

If I have some HTML like this:

<input type="checkbox" name="rows[][replicate]" value="1" />
...
<input type="checkbox" name="rows[][replicate]" value="1" checked />
...
<input type="checkbox" name="rows[][replicate]" value="1" />

I expect the result to be this:

{
  rows:  [
    { replicate: "0" },
    { replicate: "1" },
    { replicate: "0" },
  ]
}

Instead, I get something like this:

{
  rows:  [
    {},
    { replicate: "1" },
    {},
    { replicate: "0" },
    { replicate: "0" },
  ]
}

Instead of adding the unchecked values to the correct dynamic indexes, it adds them to new array indices at the end of the array. Am I doing something wrong, or is this a bug?

Is there a demo? How to output the results?

Is there a demo? How to output the results?
I want to output the result to a "pre" to see the result.

I want also create a addon to this plugin to convert json to css markup.

Update: Hi, i finally did a basic working demo on jsfiddle.
http://jsfiddle.net/onigetoc/azoxeLLv/2/

Throws error if using `checkboxUncheckedValue` and any checkbox has no name

PR coming up

This is not an issue, it's a word of thanks!

Man, you saved my sanity! the feature of data types in your plugin saved me today. thank you for the wonderful plugin.

Array of object ?

Hi,

In your example you create an array of projects :

<!-- textareas, checkboxes ... -->
  <textarea              name="projects[0][name]">serializeJSON</textarea>
  <textarea              name="projects[0][language]">javascript</textarea>
  <input type="hidden"   name="projects[0][popular]" value="0" />
  <input type="checkbox" name="projects[0][popular]" value="1" checked />

  <textarea              name="projects[1][name]">tinytest.js</textarea>
  <textarea              name="projects[1][language]">javascript</textarea>
  <input type="hidden"   name="projects[1][popular]" value="0" />
  <input type="checkbox" name="projects[1][popular]" value="1"/>

And result is :

  projects: {
    '0': { name: "serializeJSON", language: "javascript", popular: "1" },
    '1': { name: "tinytest.js",   language: "javascript", popular: "0" }
  },

I'd like to get an array of result like this :

  projects: [
     { name: "serializeJSON", language: "javascript", popular: "1" },
     { name: "tinytest.js",   language: "javascript", popular: "0" }
  ],

Is it possible ?

readCheckboxUncheckedValues: function (formAsArray, $form, opts) {
   // ...
        dataUncheckedValue = $el.attr('data-unckecked-value');
        if(dataUncheckedValue) { // data-unchecked-value has precedence over option opts.checkboxUncheckedValue
          formAsArray.push({name: el.name, value: dataUncheckedValue});
        } else {
          if (!f.isUndefined(opts.checkboxUncheckedValue)) {
            formAsArray.push({name: el.name, value: opts.checkboxUncheckedValue});
          }
        }
      });
    }

Is there a way to ignore empty input?

Is there a way to ignore empty input?
I mean ignore the empty text input like de :skip do

By the way, I just create a plugin who use your SerializeJSON.
It convert form to css.
https://rawgit.com/onigetoc/FormToCSS/master/example/demo.html

Can I serialize radio input types?

From the readme file, there is no mention of radio input types and it doesn't work either. Will be nice if the functionality is added too, or is there any reason why it isn't added?

marioizquierdo / jquery.serializejson Goto Github PK

jquery.serializejson's Issues

Expected result

Recommend Projects

Recommend Topics

Recommend Org