IO-UI-jsonform

HTML JSON form submission polyfill
based on Darobins unofficial draft.

Introduction

some paragrpah

EXAMPLE 1: Basic Keys

Some Paragraph 

<form enctype='application/json'>
  <input name='name' value='Bender'>
  <select name='hind'>
    <option selected>Bitable</option>
    <option>Kickable</option>
  </select>
  <input type='checkbox' name='shiny' checked>
  <input type='submit' value='Submit'>
</form>

// produces
{
  "name":   "Bender"
, "hind":   "Bitable"
, "shiny":  true
}

EXAMPLE 2: Multiple Values

Some Paragraph 

<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'>
  <input type='submit' value='Submit'>
</form>

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

EXAMPLE 3: Deeper Structure

Some Paragraph 

<form enctype='application/json'>
  <input name='pet[species]' value='Dahut'>
  <input name='pet[name]' value='Hypatia'>
  <input name='kids[1]' value='Thelma'>
  <input name='kids[0]' value='Ashley'>
  <input type='submit' value='Submit'>
</form>

// produces
{
    "pet":  {
        "species":  "Dahut"
    ,   "name":     "Hypatia"
    }
,   "kids":   ["Ashley", "Thelma"]
}

EXAMPLE 4: Sparse Arrays

Some Paragraph 

<form enctype='application/json'>
  <input name='hearbeat[0]' value='thunk'>
  <input name='hearbeat[2]' value='thunk'>
  <input type='submit' value='Submit'>
</form>

// produces
{
    "hearbeat":   ["thunk", null, "thunk"]
}

EXAMPLE 5: Even Deeper

Some Paragraph 

<form enctype='application/json'>
  <input name='pet[0][species]' value='Dahut'>
  <input name='pet[0][name]' value='Hypatia'>
  <input name='pet[1][species]' value='Felis Stultus'>
  <input name='pet[1][name]' value='Billie'>
  <input type='submit' value='Submit'>
</form>

// produces
{
    "pet":  [
        {
            "species":  "Dahut"
        ,   "name":     "Hypatia"
        }
    ,   {
            "species":  "Felis Stultus"
        ,   "name":     "Billie"
        }
    ]
}

EXAMPLE 6: Such Deep

Some Paragraph 

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

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

EXAMPLE 7: Merge Behaviour

Some Paragraph 

<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'>
  <input type='submit' value='Submit'>
</form>

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

EXAMPLE 8: Append

Some Paragraph 

<form enctype='application/json'>
  <input name='highlander[]' value='one'>
  <input type='submit' value='Submit'>
</form>

// produces
{
    "highlander":  ["one"]
}

EXAMPLE 9: Files

Some Paragraph 

<form enctype='application/json'>
  <input type='file' name='file' multiple>
  <input type='submit' value='Submit'>
</form>

// assuming the user has selected two text files, produces:
{
    "file": [
        {
            "type": "text/plain",
            "name": "dahut.txt",
            "body": "REFBQUFBQUFIVVVVVVVVVVVVVCEhIQo="
        },
        {
            "type": "text/plain",
            "name": "litany.txt",
            "body": "SSBtdXN0IG5vdCBmZWFyLlxuRmVhciBpcyB0aGUgbWluZC1raWxsZXIuCg=="
        }
    ]
}

EXAMPLE 10: Multiple Values

Some Paragraph 

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

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

External Resources

Some Paragraph