{"id":21083201,"url":"https://github.com/zhoukekestar/form-json","last_synced_at":"2026-04-24T20:07:28.438Z","repository":{"id":83127566,"uuid":"88812260","full_name":"zhoukekestar/form-json","owner":"zhoukekestar","description":"A ajax submiter with json for form","archived":false,"fork":false,"pushed_at":"2017-08-21T08:09:42.000Z","size":23,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-07-02T03:05:19.298Z","etag":null,"topics":["ajax-submiter","application-json","form","form-json","json"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zhoukekestar.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-04-20T02:33:23.000Z","updated_at":"2020-11-03T02:19:30.000Z","dependencies_parsed_at":null,"dependency_job_id":"7c4c976b-98e6-4a0c-9bbf-64725ffc7c4b","html_url":"https://github.com/zhoukekestar/form-json","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/zhoukekestar/form-json","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zhoukekestar%2Fform-json","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zhoukekestar%2Fform-json/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zhoukekestar%2Fform-json/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zhoukekestar%2Fform-json/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zhoukekestar","download_url":"https://codeload.github.com/zhoukekestar/form-json/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zhoukekestar%2Fform-json/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32238798,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-24T13:21:15.438Z","status":"ssl_error","status_checked_at":"2026-04-24T13:21:15.005Z","response_time":64,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ajax-submiter","application-json","form","form-json","json"],"created_at":"2024-11-19T20:16:55.102Z","updated_at":"2026-04-24T20:07:28.422Z","avatar_url":"https://github.com/zhoukekestar.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# form-json\nA ajax submiter with json for form. This project is based on [modules/formJSON](https://github.com/zhoukekestar/modules/tree/master/src/formJSON). Online [mocha test](https://zhoukekestar.github.io/form-json/test/index.html).\n\n# Quick Start\nImport `form-json.js`, and set your form enctype to `application/form-json`. That's all what you need to do.\n```html\n\u003cscript src='form-json.js'\u003e\u003c/script\u003e\n\u003cform action=\"/server\" method=\"post\" enctype=\"application/form-json\"\u003e\n  \u003cinput name=\"key\" value=\"value\"\u003e\n  \u003cinput type=\"submit\"\u003e\n\u003c/form\u003e\n```\n\n# Input Syntax\n[Try it Online!](https://zhoukekestar.github.io/form-json/public/input-syntax.html)\n\n| syntax | input | output |\n| -- | -- | -- |\n| `a` | `\u003cinput name=\"a\" value=\"a\" /\u003e` | { \"a\": \"c\" } |\n| `a.` | `\u003cinput name=\"a.\" value=\"a.\" /\u003e` | {\u003cbr\u003e\u0026nbsp;\u0026nbsp;\"a\": [\u003cbr\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\"a.\"\u003cbr\u003e\u0026nbsp;\u0026nbsp;]\u003cbr\u003e} |\n| `a.b` | `\u003cinput name=\"a.b\" value=\"c\" /\u003e` | {\u003cbr\u003e\u0026nbsp;\u0026nbsp;\"a\": {\u003cbr\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\"b\": \"c\"\u003cbr\u003e\u0026nbsp;\u0026nbsp;}\u003cbr\u003e} |\n| `a.NUMBER.b` | `\u003cinput name=\"a.1.a\" value=\"a1a\" /\u003e` \u003cbr\u003e `\u003cinput name=\"a.6.a\" value=\"a6a\" /\u003e` \u003cbr\u003e `\u003cinput name=\"a.6.b\" value=\"a6b\" /\u003e` | {\u003cbr\u003e\u0026nbsp;\u0026nbsp;\"a\": [\u003cbr\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;{\u003cbr\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\"b\": \"a1a\"\u003cbr\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;},\u003cbr\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;{\u003cbr\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\"a\": \"a6a\",\u003cbr\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\"b\": \"a6b\",\u003cbr\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;}\u003cbr\u003e\u0026nbsp;\u0026nbsp;]\u003cbr\u003e} |\n\n# Type Syntax\n[Try it Online!](https://zhoukekestar.github.io/form-json/public/type-syntax.html)\n\n| syntax | input | output |\n| -- | -- | -- |\n| `:string` | `\u003cinput name=\"a\" value=\"b\" /\u003e` | { \"a\": \"b\" } |\n| `:bool` | `\u003cinput name=\"a:bool\" value=\"true\" /\u003e` | { \"a\": true } |\n| `:number` | `\u003cinput name=\"a:number\" value=\"10\" /\u003e` | { \"a\": 10 } |\n| `:object` | `\u003cinput name=\"a:object\" value='{\"key\": \"value\"}' /\u003e` | {\u003cbr\u003e\u0026nbsp;\u0026nbsp;\"a\": {\u003cbr\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\"key\": \"value\"\u003cbr\u003e\u0026nbsp;\u0026nbsp;}\u003cbr\u003e} |\n| `:timestamp` | `\u003cinput name=\"a:timestamp\" value=\"2000-01-01\" /\u003e` | { \"a\": 946684800000 } |\n\nYou can register a custom type parser to FormJSON for your data. Example:\n\n```html\n\u003cform action=\"/server\" method=\"post\" enctype=\"application/form-json\"\u003e\n  \u003cinput name='date:ISOString' value='Fri, 31 Mar 2017 07:00:00' /\u003e\n  \u003cinput type='submit' /\u003e\n\u003c/form\u003e\n\n\u003cscript\u003e\n  HTMLFormJSONElement.registerType('ISOString', function (value) {\n    return new Date(value).toISOString();\n  })\n  // output will be:\n  // {\n  //   \"a\": \"2017-03-30T23:00:00.000Z\"\n  // }\n\u003c/script\u003e\n```\n\n# Form Methods (refer to jQuery.ajax)\n* `beforeSend(xhr)`\n* `beforeStringify(data)`\n* `dataFilter(data)`\n* `onsuccess(data, textStatus, xhr)` OR `success` event which include infomation in `e.detail`\n* `onerror(xhr, textStatus, errorThrown)` OR `error` event which include infomation in `e.detail`\n* `oncomplete(xhr, textStatus)` OR `complete` event which include infomation in `e.detail`\n\nExample, [Try it online](https://zhoukekestar.github.io/form-json/public/methods.html):\n```html\n\u003cform enctype=\"application/form-json\" method=\"post\"\u003e\n  \u003cinput name='a' value='b' /\u003e\n\u003c/form\u003e\n\n\u003cscript\u003e\n  var form = document.querySelector('form');\n\n  form.beforeSend = function (xhr) {\n    xhr.setRequestHeader('X-Requested-With', 'form-json');\n  }\n\n  form.beforeStringify = function (data) {\n    data.beforeStringify = true;\n    return data;\n  }\n  /**\n   * POST data:\n   * {\n   *  \"a\": \"b\",\n   *  \"beforeStringify\": true\n   * }\n   */\n  form.onsuccess = function (data) {\n    console.log('response:' + JSON.stringify(data));\n  }\n\u003c/script\u003e\n```\n\n# Form Attributes\n* [Try it online!](https://zhoukekestar.github.io/form-json/public/attributes.html)\n* `number2array=\"true|false\"`, default: true.\n* `orderby=\"number|element\"`, default: `number`. Attention: `number2array` must be `true`, otherwise it doesn't work.\n\n# Form-json in Form\n\nYes, you can have an embed form-json in `form` like this:\n\n```html\n\u003cform id='form1' method='POST' action='https://httpbin.org/post' enctype='application/form-json'\u003e\n  \u003cdiv id='form2' action='https://httpbin.org/get' enctype='application/form-json'\u003e\n    \u003cinput name='embed' value='true'\u003e\n  \u003c/div\u003e\n  \u003cinput name='key' value='value'\u003e\n\u003c/form\u003e\n\u003cbutton onclick='submit1()'\u003esubmit outter form\u003c/button\u003e\n\u003cbutton onclick='submit2()'\u003esubmit inner form\u003c/button\u003e\n\u003cscript\u003e\n  window.submit1 = function () {\n    form1.submit();\n    form1.dispatchEvent(new CustomEvent('submit', { bubbles: true }));\n  }\n  window.submit2 = function () {\n    form2.dispatchEvent(new CustomEvent('form-json-submit', { bubbles: true }));\n  }\n\u003c/script\u003e\n```\n\n# Browser compatibility\n`form-json.js` is support most modern browsers include `IE 10+, Android 3.0+, iOS 5.1+` as [`XMLHttpRequest`](http://caniuse.com/#feat=xhr2) is required.\n\n\n# FQA\n* Q: What we don't support ?\n  * Do not support fill null in array.\n    ```html\n    \u003cinput name=\"a.0\" value=\"0\"\u003e\n    \u003cinput name=\"a.3\" value=\"3\"\u003e\n    ```\n\n    ```json\n    // We won't output:\n    {\n      \"a\": [\n        \"0\", null, null, \"3\"\n      ]\n    }\n    // but output this:\n    {\n      \"a\": [\n        \"0\", \"3\"\n      ]\n    }\n    ```\n  * Do not support too complex syntax. I will keep syntax as simple as possible.\n* Q: Why you write another form-json ? \u003cbr\u003e A: I want simple syntax and easy to use module. Of course, it should be tiny size.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzhoukekestar%2Fform-json","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzhoukekestar%2Fform-json","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzhoukekestar%2Fform-json/lists"}