{"id":13403573,"url":"https://github.com/claviska/jquery-ajaxSubmit","last_synced_at":"2025-03-14T08:32:01.208Z","repository":{"id":57102409,"uuid":"58486312","full_name":"claviska/jquery-ajaxSubmit","owner":"claviska","description":"Effortlessly submit forms using AJAX and JSON.","archived":true,"fork":false,"pushed_at":"2017-10-11T19:47:17.000Z","size":27,"stargazers_count":39,"open_issues_count":0,"forks_count":15,"subscribers_count":8,"default_branch":"master","last_synced_at":"2024-09-24T06:35:40.525Z","etag":null,"topics":["ajax","forms","javascript","jquery"],"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/claviska.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-05-10T18:59:35.000Z","updated_at":"2023-11-07T12:42:21.000Z","dependencies_parsed_at":"2022-08-20T23:20:20.613Z","dependency_job_id":null,"html_url":"https://github.com/claviska/jquery-ajaxSubmit","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/claviska%2Fjquery-ajaxSubmit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/claviska%2Fjquery-ajaxSubmit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/claviska%2Fjquery-ajaxSubmit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/claviska%2Fjquery-ajaxSubmit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/claviska","download_url":"https://codeload.github.com/claviska/jquery-ajaxSubmit/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221449549,"owners_count":16823612,"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":["ajax","forms","javascript","jquery"],"created_at":"2024-07-30T19:01:31.805Z","updated_at":"2024-10-25T18:32:11.402Z","avatar_url":"https://github.com/claviska.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# jquery.ajaxSubmit.js - Effortlessly submit forms using AJAX and JSON\n\nDeveloped by Cory LaViska for A Beautiful Site, LLC\n\nLicensed under the MIT license: http://opensource.org/licenses/MIT\n\n## Overview:\n\nThis plugin provides a minimal, lightweight solution to submit forms using AJAX and JSON. There is no client side validation included, as that is outside the scope of this plugin. All validation is expected to happen on the server.\n\nFeatures:\n\n- Makes regular HTML forms AJAX-capable.\n- Minimal markup.\n- Handles form serialization so you don't have to.\n- Shows/hides a loader and message if you provide them.\n- Highlights invalid fields.\n- Callbacks for success, error, before, and after.\n- API to disable/enable form inputs.\n- API to reset the form (including loader, message, and invalid fields)\n- Compact! (about 240 lines)\n\n## Installing\n\nInclude the minified version of this plugin in your project or install via NPM:\n\n```\nnpm install --save @claviska/jquery-ajaxSubmit\n```\n\n## Form syntax\n\nCreate a form as you normally would in HTML. By default, the `action` and `method` attributes will be used as the target URL and method for the AJAX request. Alternatively, you can specify them as options (see below for details).\n\nYou can optionally add a loader container anywhere _inside_ the form that will be shown/hidden automatically when the form is submitted:\n\n```html\n\u003cdiv class=\"form-loader\"\u003e\n  \u003cimg src=\"loader.gif\"\u003e\n\u003c/div\u003e\n```\n\nYou can optionally add a message container anywhere _inside_ the form that will be shown/hidden and populated automatically when the form receives a message from the server:\n\n```html\n\u003cdiv class=\"form-message\"\u003e\u003c/div\u003e\n```\n\n## Attaching the plugin\n\nMinimal example that logs the server's response if successful:\n\nMinimal example with success callback:\n\n```javascript\n$('form').ajaxSubmit({\n  success: function(res) {\n    console.log(res);\n  }\n});\n```\n\nExample with all possible options and callbacks:\n\n```javascript\n$('form').ajaxSubmit({\n    // Options (default values shown)\n    data: function() {\n      return $(this).serialize();\n    },\n    headers: {\n      'My-Custom-Header': 'Value'\n    },\n    hideInvalid: function(input) {\n      $(input).closest('.form-group').removeClass('has-warning');\n    },\n    loader: '.form-loader',\n    message: '.form-message',\n    messageErrorClasses: 'message-error',\n    messageSuccessClasses: 'message-success',\n    method: function() {\n      return $(this).attr('method');\n    },\n    showInvalid: function(input) {\n      $(input).closest('.form-group').addClass('has-warning');\n    },\n    url: function() {\n      return $(this).attr('action');\n    },\n\n    // Callbacks\n    after: function(res) { ... },\n    before: function() { ... },\n    error: function(res) { ... },\n    success: function(res) { ... }\n});\n```\n\n### Options\n\n- `data`: The data to send to the server. This option can also be a function that returns data. By default, it uses the form's serialized data.\n- `headers`: Custom headers to send along with the request.\n- `hideInvalid`: A function to be called on all invalid inputs to effectively undo the changes made by the `showInvalid` function.\n- `loader`: A selector that points to the form's loader. This will be shown/hidden automatically using the HTML `hidden` property. Defaults to `form-loader`.\n- `message`: A selector that points to the form's message container. This will be shown/hidden automatically using the HTML `hidden` property. Defaults to `form-message`.\n- `messageErrorClasses`: One or more space-separated classes to attach to the message container when the response is erroneous. Defaults to `message-error`.\n- `messageSuccessClasses`: One or more space-separated classes to attach to the message container when the response is successful. Defaults to `message-success`.\n- `method`: The method to use (i.e. `GET` or `POST`). This option can also be a function that returns the method. By default, it uses the form's `method` attribute.\n- `showInvalid`: A function to be called on all invalid inputs as returned by `res.invalid`. Use it to apply error styles, etc. The default behavior is compatible with Bootstrap 4 beta and will add the `is-invalid` to the input.\n- `url`: The URL to send the request to. This option can also be a function that returns the URL. By default, it uses the form's `action` attribute.\n\nYou may also update the default options *before instantiation*:\n\n```javascript\n$.ajaxSubmit.defaults.optionName = yourValue;\n```\n\n### Callbacks\n\nAll callbacks are called in the context of the respective form (i.e. refer to the form using `this` inside your callbacks).\n\nThe `success` and `after` callbacks return the server's JSON response as their first argument.\n\n- `after(res)`: runs after the request has completed and your server returns a response.\n- `before()`: runs before the request is sent. Returning `false` will cancel submission.\n- `error(res, err)`: runs when your server returns an unsuccessful response (e.g. `400 BAD REQUEST`).\n- `success(res)`: runs when your server returns a successful response (e.g. `200 OK`).\n\n### Methods\n\nMethods are called using this syntax:\n\n```javascript\n$('form').ajaxSubmit('method', arg);\n```\n\nThe following API methods are supported:\n\n- `busy`: sets the form's busy state. Pass in `true` or `false`.\n- `create` (default): initializes the plugin.\n- `destroy`: returns the form to its pre-initialized state.\n- `disable`: disables/enables all inputs. Pass in `true` or `false`.\n- `reset`: resets the form to its original state, including input values, loaders, and messages.\n\n## Responding from the server\n\nYour server should return a well-formed JSON response with an appropriate HTTP status code. The response can contain any data you want, but there are a couple reserved properties:\n\n```javascript\n{\n  \"invalid\": [\"username\", \"password\"],\n  \"message\": \"Invalid username or password\"\n}\n```\n\n- `invalid`: Optional. An array of field names to be marked erroneous by the plugin.\n\n- `message`: Optional. A string of plain text that will be injected into the message container.\n\n### Node.js + Express\n\n```js\nres.status(400).json({\n  invalid: ['username', 'password'],\n  message: 'Invalid username or password'\n});\n```\n\n### PHP\n\nIn PHP, you can return a JSON response like this:\n\n```php\n\u003c?php\nhttp_response_code(400); // Bad Request\nheader('Content-Type: application/json'); // Send as JSON\nexit(json_encode([\n  'invalid': ['username', 'password'],\n  'message': 'Invalid username or password'\n]));\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fclaviska%2Fjquery-ajaxSubmit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fclaviska%2Fjquery-ajaxSubmit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fclaviska%2Fjquery-ajaxSubmit/lists"}