Download the PHP package jagfx/form-js without Composer

FormJS

jQuery plugin submit a form without reloading the page. It send a customizable feedback after sending

DEMO

Install

NPM

• Install: npm install --save jagfx-formjs

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:

• 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

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

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:

• <i></i> balise
• <span></span> balise
• <img /> balise
• Text also (You need to embrace the text with html balise)

`

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() method ajaxPending: (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 error message: (String) The message of the error data: (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:

• AjaxSuccessCallback: An error during the ajax success callback
• AjaxFailCallback: An error during the ajax fail callback
• PreSubmit: An error during the submitting process

`

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:

• _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 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:

• Copyright © SMITH Emmanuel

and licensed under:

• GNU General Public License v3.0 only