Support "W3C HTML JSON form submission"

[johnnychq]

As title, can we parse complex path-name like w3c suggested? http://www.w3.org/TR/2014/WD-html-json-forms-20140529/

[macek]

Below is a summary of non-compliant behaviors. These are things that would need to be fixed in order to match the W3C standard.

To be clear, the list below is not how jquery-serialize-json current works.

---

Checkboxes should encode as true/false

<form enctype='application/json'>
  <input type='checkbox' name='shiny' checked>
</form>

should produce

{
    "shiny": true
}

---

If a path is repeated, its value is captured as an array

<form enctype='application/json'>
  <input type='number' name='bottle-on-wall' value='1'>
  <input type='number' name='bottle-on-wall' value='2'>
  <input type='number' name='bottle-on-wall' value='3'>
</form>

should produce

{
    "bottle-on-wall":   [1, 2, 3]
}

---

Keys can include any character

note usage of ! here

<form enctype='application/json'>
  <input name='wow[such][deep][3][much][power][!]' value='Amaze'>
</form>

should produce

{
    "wow":  {
        "such": {
            "deep": [
                null,
                null,
                null,
                {
                    "much": {
                        "power": {
                            "!":  "Amaze"
                        }
                    }
                }
            ]
        }
    }
}

---

Merge behavior

The algorithm does not lose data in that every piece of information ends up being submitted. But given the path syntax, it is possible to introduce clashes such that one may attempt to set an object, an array, and a scalar value on the same key.

• Trying to set multiple scalars on the same key will convert the value into an array.
• Trying to set a scalar value at a path that also contains an object will cause the scalar to be set on that object with the empty string key.
• Trying to set an array value at a path that also contains an object will cause the non-null values of that array to be set on the object using their array indices as keys.

<form enctype='application/json'>
  <input name='mix' value='scalar'>
  <input name='mix[0]' value='array 1'>
  <input name='mix[2]' value='array 2'>
  <input name='mix[key]' value='key key'>
  <input name='mix[car]' value='car key'>
</form>

should produce

{
    "mix":  {
        "":     "scalar",
        "0":    "array 1",
        "2":    "array 2",
        "key":  "key key",
        "car":  "car key"
    }
}

---

Invalid keys are kept as-is

<form enctype='application/json'>
  <input name='error[good]' value='BOOM!'>
  <input name='error[bad' value='BOOM BOOM!'>
</form>

produces

{
    "error": {
        "good":   "BOOM!"
    },
    "error[bad":  "BOOM BOOM!"
}

---

File Uploads

This is not an area jquery-serialize-json can really handle; not easily anyway. Supporting file uploads would be a major undertaking. If handled at all, this would be handled last. We'll see what tools/methods are available to us at the time of considering this functionality.

[macek]

The W3C spec is not clear on a couple matters. This comment will detail those items.

---

How to treat a check box with a value attribute?

<form enctype='application/json'>
  <input type='checkbox' name='shiny' value='okay' checked>
</form>

I suspect we should encode this as

{
    "shiny": "okay"
}

instead of

{
    "shiny": true
}

---

How does foo[] work if mixed with other foo[n] inputs?

<form enctype='application/json'>
  <input name='foo[1]' value='hello'>
  <input name='foo[]' value='world'>
</form>

I suggest that foo[]-style names should encode as arr[arr.length] = value; Here's what that would look like

{
    "foo": [
        null,
        "hello",
        "world"
    ]
}

---

How should foo[][] be encoded?

<form enctype='application/json'>
  <input name='foo[][]' value='0'>
  <input name='foo[][]' value='1'>
  <input name='foo[][][]' value='2'>
  <input name='foo[][]' value='3'> <!-- no append/merge -->
</form>

Albeit a completely wacked input name, I suggest it is encoded like this

{
    "foo":
    [
        [
            0
        ],
        [
            1
        ],
        [
            [
                2
            ]
        ],
        [
            3
        ]
    ]
}

3 does not get appended to an auto-created array with 1. Despite the keys being the same (foo[][]), there's no way to look-up where the 1 is in the object and wrap both values in an array as [1, 3]

[brandonb927]

@macek I think that is the best explanation I've ever seen on Github ever why something "can't exist in a project right now".

[macek]

@brandonb927 thanks for the comment. It may seem like a small plugin, but it's easy to overlook many of the details that need to be considered. I appreciate the feedback and concerns from everyone that's been active with this project's issues.