Download the PHP package jagfx/form-js without Composer
On this page you can find all versions of the php package jagfx/form-js. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download jagfx/form-js
More information about jagfx/form-js
Files in jagfx/form-js
Package form-js
Short Description Envoie de formulaire en AJAX avec feedback utilisateur
License MIT
Informations about the package form-js
FormJS
jQuery plugin submit a form without reloading the page. It send a customizable feedback after sending
DEMO
Install
- Install:
npm install --save jagfx-formjs
- 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
andview
, the response was process as a feedback - Bootstrap 3/4 (
theme-bs.css
) - Custom (
theme-cust.css
) - Flat (
theme-flat.css
) <i></i> balise
<span></span> balise
<img /> balise
- Text also (You need to embrace the text with html balise)
AjaxSuccessCallback
: An error during the ajax success callbackAjaxFailCallback
: An error during the ajax fail callbackPreSubmit
: An error during the submitting process_variables.scss
: Contain YOUR theme variable. It uses to override core variablesyour-theme-name.scss
: Contain all customisation for type of alert:Success
,Info
,Warning
andError
. Use preset from one of existing templates- Copyright © SMITH Emmanuel
Usage
Quick use
Minimal code
`
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
:
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
You have 3 themes available for the alert:
You can choose it by including corresponding CSS
Custom settings
Alert message
You can customise the default error message (Unexpected for example)
`
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
`
Icons
You can change the icon, set html icon as you want and use icons pack as you want:
`
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.
`
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
`
Callback
At the end of precess, a callback is called. You can set. The current alert is passed to function parameter.
`
Events
You have some event that you can handle:
Event name | Params | When ? |
---|---|---|
formjs:submit | ajaxSettings : (JsonObject) Options pass to $.ajax() methodajaxPending : (Boolean) If an ajax request is in progress |
At the start of submitting the form and before sending the ajax request |
formjs:ajax-success | feedback : (JsonObject) Raw data returned by the successful $.ajax() request |
On the success ajax callback, after the parsing returned data |
formjs:error | place : (String) The origin of the errormessage : (String) The message of the errordata : (Mixed) The additionnal data of the error |
When an error occurred during the submit process |
formjs:write-alert | currentAlert : (JsonObject) The feedback data returned from the ajax request |
When an alert is rendered on the DOM |
For the formjs:error
, you can know the origin of the error:
`
Trigger
If you need to use this plugin from the outside of it, you can trigger some event
Event name | Params | Action |
---|---|---|
formjs:send-form | Start the form sending processing |
`
Full default settings
`
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:
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 commands
Remove old css files `
Generate css files `
Launch scss watcher to generate css file at change `
Generate css dist files `
Generate js dist files `
Generate css and js dist files `
License
Unless stated otherwise all works are:
and licensed under: