{"id":22790730,"url":"https://github.com/zachalam/formsync","last_synced_at":"2025-03-30T16:45:17.737Z","repository":{"id":17620228,"uuid":"20424418","full_name":"zachalam/formsync","owner":"zachalam","description":"formsync.js is a ultra lightweight jQuery add on that allows a developer to asynchronously submit forms without understanding or writing javascript.","archived":false,"fork":false,"pushed_at":"2014-06-23T20:14:40.000Z","size":216,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-05T18:39:19.785Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zachalam.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-06-03T00:25:32.000Z","updated_at":"2014-06-23T20:14:40.000Z","dependencies_parsed_at":"2022-08-04T20:16:04.596Z","dependency_job_id":null,"html_url":"https://github.com/zachalam/formsync","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zachalam%2Fformsync","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zachalam%2Fformsync/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zachalam%2Fformsync/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zachalam%2Fformsync/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zachalam","download_url":"https://codeload.github.com/zachalam/formsync/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246350939,"owners_count":20763228,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":[],"created_at":"2024-12-12T02:28:49.756Z","updated_at":"2025-03-30T16:45:17.718Z","avatar_url":"https://github.com/zachalam.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"formsync.js 1.0\r\n-----------------------------\r\nformsync.js is a ultra lightweight jQuery add-on that allows developers to asynchronously submit forms without understanding or writing a single line of javascript.\r\n\r\nInstallation\r\n-----------------------------\r\nAdd jQuery then formsync to any HTML document.\r\n\r\n```javascript\r\n\u003cscript src=\"//code.jquery.com/jquery-latest.min.js\"\u003e\u003c/script\u003e\r\n\u003cscript src=\"/js/formsync/formsync.js\"\u003e\u003c/script\u003e\r\n```\r\n\r\nBuilding the Form: Frontend\r\n-----------------------------\r\nIf you've written a HTML form in the past then there isn't anything new. Simply build your form as usual and add the \"formsync\" class to the **form** tag. For error reporting: add one div layer inside your form with a class of \"error\". This should be styled by you using an external stylesheet.\r\n\r\n```HTML\r\n\u003cform class=\"formsync\" method=\"GET\" action=\"submit.php\"\u003e\r\n\u003cdiv class=\"error\" style=\"display:none;\"\u003e\u003c/div\u003e\r\n\r\n\u003cinput type=\"text\" name=\"hello\"\u003e\r\n\u003cinput type=\"submit\" value=\"Submit Form\"\u003e\r\n\u003c/form\u003e\r\n```\r\n\r\nThat's all. You're ready to go!\r\n\r\n\r\n\r\nReceiving Data: Backend\r\n-----------------------------\r\nData from the form is sent to your server normally. No extra work is needed.\r\n\r\nAssume we have an input called \"first_name\" sent using the GET method.\r\n```HTML\r\n\u003cinput type=\"text\" name=\"first_name\" value=\"\"\u003e\r\n```\r\n\r\nThe data contained in this input can then be accessed using your frameworks GET accessor.\r\n```PHP\r\n\u003c?php \r\n\r\n$first_name = $_GET[\"first_name\"];\r\n\r\n?\u003e\r\n```\r\n\r\n\r\nSending Response: Backend\r\n-----------------------------\r\nThe URL specified in the form action must always send back a JSON response. For simplicity formsync.js expects only one variable called \"error\" to be returned. In the case of a success \"error\" should be set to 0, NULL, or false.\r\n\r\nMost frameworks have built in support for JSON, here is a sample case for \"submit.php\".\r\n```php\r\n\u003c?php\r\n\r\n// an error occured. \r\necho json_encode(array(\"error\"=\u003e\"Invalid Email Address\"));\r\n\r\n?\u003e\r\n```\r\n\r\n```php\r\n\u003c?php\r\n\r\n// the form data was okay.\r\necho json_encode(array(\"error\"=\u003efalse));\r\n\r\n?\u003e\r\n```\r\n\r\nformsync.js will automatically inject this error message into your error div. See \"Success Actions\" to learn how successful events are handled.\r\n\r\n\r\nForm Attributes\r\n-----------------------------\r\n**formsync_method**:\r\nOverrides the method (if any) specified in the form.\r\n```HTML\r\n\u003cinput type=\"hidden\" name=\"formsync_method\" value=\"http://example.com\"\u003e\r\n```\r\n\r\n**formsync_action**:\r\nOverrides the action (if any) specified in the form.\r\n```HTML\r\n\u003cinput type=\"hidden\" name=\"formsync_action\" value=\"http://example.com\"\u003e\r\n```\r\n\r\n\r\nSuccess Actions \r\n-----------------------------\r\n**formsync_redirect**:\r\nRedirect user to http://example.com if server returns no error on form submission.\r\n```HTML\r\n\u003cinput type=\"hidden\" name=\"formsync_redirect\" value=\"http://example.com\"\u003e\r\n```\r\n\r\n**formsync_show**:\r\nShows a specified selector by sliding it down into view.\r\n```HTML\r\n\u003cinput type=\"hidden\" name=\"formsync_show\" value=\"#success_message\"\u003e\r\n```\r\n\r\n**formsync_alert**:\r\nUses the javascript alert function to display a message\r\n```HTML\r\n\u003cinput type=\"hidden\" name=\"formsync_alert\" value=\"Thanks for your feedback.\"\u003e\r\n```\r\n\r\n**formsync_callback**:\r\nThe name of a user written function to call after success\r\n```HTML\r\n\u003cinput type=\"hidden\" name=\"formsync_callback\" value=\"myFunctionName\"\u003e\r\n```\r\n\r\n**formsync_clear**:\r\nClear all input fields of data on success\r\n```HTML\r\n\u003cinput type=\"hidden\" name=\"formsync_clear\" value=\"true\"\u003e\r\n```\r\n\r\n**formsync_hide**:\r\nHides entire form (by sliding up) including everything between \"form\" tags.\r\n```HTML\r\n\u003cinput type=\"hidden\" name=\"formsync_hide\" value=\"true\"\u003e\r\n```\r\n\r\n\r\nNotices\r\n----------------------------\r\n\"formsync\" is a restricted keyword.\r\nDo not use the text \"formsync\" to define variables or inputs outside the ones listed here.\r\nDoing so may unintentionally cause loss of data.\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzachalam%2Fformsync","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzachalam%2Fformsync","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzachalam%2Fformsync/lists"}