PHPackages jagfx/form-js - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. jagfx/form-js ArchivedLibrary[Utility & Helpers](/categories/utility) jagfx/form-js ============= Envoie de formulaire en AJAX avec feedback utilisateur v1.0(9y ago)317[5 issues](https://github.com/JAGFx/FormJS/issues)[4 PRs](https://github.com/JAGFx/FormJS/pulls)MITPHP Since Oct 31Pushed 5y ago1 watchersCompare [ Source](https://github.com/JAGFx/FormJS)[ Packagist](https://packagist.org/packages/jagfx/form-js)[ RSS](/packages/jagfx-form-js/feed)WikiDiscussions master Synced 6d ago READMEChangelog (8)Dependencies (1)Versions (1)Used By (0) FormJS ====== [](#formjs) [![NPM version](https://camo.githubusercontent.com/26814e592d6614a23e7b90330d2d1cdff0ad5ad93f8a36fea6b3cb7336f74173/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f6a616766782d666f726d6a732e737667)](https://npmjs.org/package/jagfx-formjs "View this project on NPM")[![NPM download](https://camo.githubusercontent.com/25c770720377a1f03aaa97a401c9c554fadd3a0c55acc37afd89b89eee0a7cdd/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f64742f6a616766782d666f726d6a732e737667)](https://npmjs.org/package/jagfx-formjs "View download from NPM")[![Dependency Status](https://camo.githubusercontent.com/f7ad184858c5f5f592f0e4bb49839a2ebd71c62096e5d88cccf33830f3445112/68747470733a2f2f696d672e736869656c64732e696f2f64617669642f4a414746782f466f726d4a532e737667)](https://david-dm.org/JAGFx/FormJS "View the status of this project's dependencies on DavidDM")[![Dev Dependency Status](https://camo.githubusercontent.com/a4ca65636377ceb8510efa96fd0f1d375b0187a38265487a7442a048b88da111/68747470733a2f2f696d672e736869656c64732e696f2f64617669642f6465762f4a414746782f466f726d4a532e737667)](https://david-dm.org/JAGFx/FormJS#info=devDependencies "View the status of this project's development dependencies on DavidDM")[![Build Status](https://camo.githubusercontent.com/7d52fd604ff1f17e41c30436ad67848895c0d451e85fee1d6e36fb23f8cc0ac1/68747470733a2f2f7363727574696e697a65722d63692e636f6d2f672f4a414746782f466f726d4a532f6261646765732f6275696c642e706e673f623d6d6173746572)](https://scrutinizer-ci.com/g/JAGFx/FormJS/build-status/master "Build Status")[![Scrutinizer Code Quality](https://camo.githubusercontent.com/8e0e5955e75193c515faaae93c799532228ede4a5b823612812b9614bb7d6bce/68747470733a2f2f7363727574696e697a65722d63692e636f6d2f672f4a414746782f466f726d4a532f6261646765732f7175616c6974792d73636f72652e706e673f623d6d6173746572)](https://scrutinizer-ci.com/g/JAGFx/FormJS/?branch=master "Scrutinizer Code Quality") jQuery plugin submit a form without reloading the page. It send a customizable feedback after sending ### [DEMO](http://labs.jagfx.fr/formJS/example/) [](#demo) Install ------- [](#install) [](https://npmjs.com "npm is a package manager for javascript") ### NPM [](#npm) - Install: `npm install --save jagfx-formjs` Usage ----- [](#usage) ### Quick use [](#quick-use) #### Minimal code [](#minimal-code) ``` > FormJS Submit $( '#yourForm' ).formJS(); ``` #### Response structure [](#response-structure) The response MUST be in JSON and match with this structure The distinction of response type it's on the field `data` or `view`: - If you return a response with the `data` field, the response was processed as a feedback. - If you return a response with the `view` field, the response was processed as a view - If you return a response with the `data` and `view`, the response was process as a feedback Type of response Example Infos Feedback ``` { "type": "success", "url": "yourUrl (optionally entry)", "data" : { "title": "yourTitle", "message": "yourMessage" } } ``` View ``` { "type": "success", "url": "yourUrl (optionally entry)", "view" : "A HTML response" } ``` #### Themes [](#themes) You have 3 themes available for the alert: - Bootstrap 3/4 ( `theme-bs.css` ) - Custom ( `theme-cust.css` ) - Flat ( `theme-flat.css` ) You can choose it by including corresponding CSS ### Custom settings [](#custom-settings) #### Alert message [](#alert-message) You can customise the default error message (Unexpected for example) ``` $( '#yourForm' ).formJS( { alerts: { unexpected: { title: 'Custom unexpected error title', message: 'Custom unexpected error message' }, failSend: { title: 'Custom fail send data error title', message: 'Custom fail send data error message' } } } ); ``` #### Keys [](#keys) The keys are suffix added after 'formjs' class into `alertContainer`. Its use for style customisation. > Note: If you change it, you MUST rebuild style with SCSS builder ``` $( '#yourForm' ).formJS( { keys: { success: 'success-custom', info: 'info-custom', warning: 'warning-custom', error: 'error-custom' } } ); ``` #### Icons [](#icons) You can change the icon, set html icon as you want and use icons pack as you want: - ` balise` - ` balise` - ` balise` - Text also (You need to embrace the text with html balise) ``` $( '#yourForm' ).formJS( { icons: { loading: '', success: '', info: '', warning: '', error: 'ERR' } } ); ``` #### Form [](#form) If you have a custom header request, you can pass into this setting. The `url`, `method` and `data` cannot be modified Also, you can change the formJS container and submit button identifier. > Note: If you change container, you MUST rebuild style with correct container. ``` $( '#yourForm' ).formJS( { form: { ajaxSettings: { async: false, beforeSend: function (xhr){ xhr.setRequestHeader('Authorization', make_base_auth(username, password)); } }, alertContainer: '.customContainer', btnSubmit: '.myCustomBtnID' } } ); ``` #### Redirection [](#redirection) You can redirect the user after an Ajax request. A message will be added after error title. You can change this message and delay before the redirection ``` $( '#yourForm' ).formJS( { redirection: { message: 'Custom redirect message', delay: 2500 } } ); ``` #### Callback [](#callback) At the end of precess, a callback is called. You can set. The current alert is passed to function parameter. ``` $( '#yourForm' ).formJS( { callback: function ( currentAlert ) { // Do something with currentAlert } } ); ``` #### Events [](#events) You have some event that you can handle: Event nameParamsWhen ?formjs:submit`ajaxSettings`: (JsonObject) Options pass to `$.ajax()` method `ajaxPending`: (Boolean) If an ajax request is in progressAt the start of submitting the form and before sending the ajax requestformjs:ajax-success`feedback`: (JsonObject) Raw data returned by the successful `$.ajax()` requestOn the success ajax callback, after the parsing returned dataformjs:error`place`: (String) The origin of the error `message`: (String) The message of the error `data`: (Mixed) The additionnal data of the errorWhen an error occurred during the submit processformjs:write-alert`currentAlert`: (JsonObject) The feedback data returned from the ajax requestWhen an alert is rendered on the DOMFor the `formjs:error`, you can know the origin of the error: - `AjaxSuccessCallback`: An error during the ajax success callback - `AjaxFailCallback`: An error during the ajax fail callback - `PreSubmit`: An error during the submitting process ``` var $form = $( '#yourForm' ).formJS(); $form.on( 'formjs:write-alert', function ( e, currentAlert ) { // Do something with the current alert ... } ); ``` #### Trigger [](#trigger) If you need to use this plugin from the outside of it, you can trigger some event Event nameParamsActionformjs:send-formStart the form sending processing``` var $form = $( '#yourForm' ).formJS(); $( '#anotherSendingButton' ).click( function () { $form.trigger( 'formjs:send-form' ); } ); ``` #### Full default settings [](#full-default-settings) ``` var settings = { alerts: { unexpected: { title: 'Error', message: 'Unexpected error occurred' }, failSend: { title: 'Error', message: 'Unable to send data' } }, keys: { success: 'success', info: 'info', warning: 'warning', error: 'error' }, icons: { loading: '⌛', success: '✓', info: '🛈', warning: '﹗', error: '⨯' }, form: { ajaxSettings: { contentType: false }, alertContainer: '.formJS', btnSubmit: '.btn[type="submit"]', enableWriteAlert: true }, redirection: { message: 'Automatic redirection in a second', delay: 1100 }, callback: function ( currentAlert ) { } }; ``` ### Custom style [](#custom-style) You have SCSS files to allow you to create custom styles. In `formJSFolder/scss/`, you can find `_core*.scss` files. Use it as the base structure of your custom style. Create a folder named with theme name and add to file: - `_variables.scss`: Contain YOUR theme variable. It uses to override core variables - `your-theme-name.scss`: Contain all customisation for type of alert: `Success`, `Info`, `Warning` and `Error`. Use preset from one of existing templates At the end of customisation, run `npm run scss:dist` to generate your style css file and minified too. You must include `node_module` folder into you sass converter to build a new stylesheet. If necessary, install `bourbon` ``` $ npm i --only=dev $ npm i --no-save bourbon ``` ### NPM commands [](#npm-commands) Remove old css files ``` $ npm run scss:clean ``` Generate css files ``` $ npm run scss:build ``` Launch scss watcher to generate css file at change ``` $ npm run scss:watch ``` Generate css dist files ``` $ npm run css:dist ``` Generate js dist files ``` $ npm run js:dist ``` Generate css and js dist files ``` $ npm run gulp:default ``` License ------- [](#license) Unless stated otherwise all works are: - Copyright © [SMITH Emmanuel](http://www.jagfx.fr) and licensed under: - [GNU General Public License v3.0 only](http://spdx.org/licenses/GPL-3.0.html) ### Health Score 22 — LowBetter than 21% of packages Maintenance0 Infrequent updates — may be unmaintained Popularity9 Limited adoption so far Community7 Small or concentrated contributor base Maturity61 Established project with proven stability Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Unknown Total 1 Last Release 3574d ago ### Community Maintainers ![](https://avatars.githubusercontent.com/u/12508080?v=4)[SMITH Emmanuel](/maintainers/JAGFx)[@JAGFx](https://github.com/JAGFx) --- Top Contributors [![JAGFx](https://avatars.githubusercontent.com/u/12508080?v=4)](https://github.com/JAGFx "JAGFx (73 commits)") --- Tags ajaxalertbootstrapbootstrap4feedbackformjavascriptjqueryplugin ### Embed Badge ![Health badge](/badges/jagfx-form-js/health.svg) ``` [![Health](https://phpackages.com/badges/jagfx-form-js/health.svg)](https://phpackages.com/packages/jagfx-form-js) ``` ### Alternatives [eternicode/bootstrap-datepicker A datepicker for Bootstrap 12.7k552.0k6](/packages/eternicode-bootstrap-datepicker)[vakata/jstree jsTree is jquery plugin, that provides interactive trees. 5.2k1.8M11](/packages/vakata-jstree)[eonasdan/bootstrap-datetimepicker Date/time picker widget based on twitter bootstrap 7.2k500.2k9](/packages/eonasdan-bootstrap-datetimepicker)[nicolaskruchten/pivottable Javascript Pivot Table (aka Pivot Grid, Pivot Chart, Cross-Tab) implementation with drag'n'drop. 4.4k223.4k1](/packages/nicolaskruchten-pivottable)[mottie/tablesorter tablesorter (FORK) is a jQuery plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes. tablesorter can successfully parse and sort many types of data including linked data in a cell. 2.6k234.4k](/packages/mottie-tablesorter)[components/jqueryui jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice. 1775.9M61](/packages/components-jqueryui) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)