In this article, you will learn about the j object FormGen used to create and manage Forms.
JavaScript Form Builder
introduce
This article is about the j object () that FormGen uses to create and manage forms [1]; FormGen has gone from creating simple message boxes to relatively complex forms with text fields, combo boxes, radio buttons, etc. [2] It is universal enough to create various forms. In addition, it is only an informal and non exhaustive introduction to packaging.

Using the program
The form generator is located in the formgen.js script, which contains the object function formGen; You can call this function or use it to create a new object:

 formGen(idContainer[,control_list])fGenObject = new formGen(idContainer[,control_list])12

Where is the ID of the HTML tag used by the idContainer to host the generated form? It is the control list used to manage the form's control list and other possible information (pseudo control); If this parameter is omitted, formGen assumes that the list is in a label container.

Each control description is characterized by comma separation of attribute list: Type, Field Name, Field Label, Length and Extra:

Type is the control type, independent of the situation.
Name is the name of the control, and the case is meaningful (usually the name and id of the control).
Label is the label of the control.
Length is the length of the control.
Extra is an additional field for adding information to the control (depending on the type).
Each description is separated by a semicolon.

Among these controls, there are different types of text controls, lists, buttons, sliders, radio buttons, and check boxes. The list can also contain some pseudo controls (with slightly different semantics):

Form tells how to manage the form when submitting. Its syntax is: Form, name，caption，uri，function，
Defaults is used to insert values on the control;
Control checks the fields before submitting the form;
Below and After The button moved from the default position, at the bottom of the form, is lower than or controlled by the back (right);
Get is used to obtain data and is useful for filling in forms or updating lists.
The formGen plug-in has three standard button buttons: Ok, Reset and Cancel. According to the control in the form, for example, if there is only one combination or radio button group, no button is a gift because of the selection of the item. Try to exit the form:

 Form,frm,,echo.php;CMB,Unit,Measure Unit,,,|=Linear, mm=millimeter,cm=centimeter,m=meter,km=kilometer,|=Weight,g=gram,kg=kilogram,t=ton;123

However, we can replace the standard button with the custom button, or change the title, or use the graphic button (whose names are fg_Ok, respectively),

 Fg_Cancel and fg_Reset) function infoPSW(frm) { aleet("Password from 6 to 12 characters.nand at least one number and             one capital letter and one letter")}formGen('fg');... P,psw,Password,15,Insert password; B,Info,?,25,infoPSW;B,fg_Cancel,&#x2718,30,,Cancel form; B,fg_Reset,&#x21B6,30,,Reset form; B,fg_Ok,&#x270E,30,,Go!;After,psw,Info;Control,psw,required,pattern=(? x3D.*d)(? x3D.*[A-Z])(?x3D.*[a-z]). {6x2C12};

...123456789101112131415161718

Note that the button title uses Unicode characters, such as&# x270E (?).

Table Introduction
The data appears in the parameter list according to them, except that the order of the custom buttons appearing together presents the standard buttons at the bottom of the form by inserting FormGen; Therefore, you can insert custom buttons and check boxes to the right or below the controls (through the Below and After pseudo controls).

Using CSS style, we can control the presentation, because the form is displayed using the fg_Table tag with the class name in table, and the button has the fg_Button or fg_Gbutton with the class name. Td The first tag of each line has the class name fg_Label.

Data control
Pseudo controls Control or Check allow certain controls to be executed on data:

More or less value
Official and correct email address
Non empty field
Match regular expression
These controls occur when:

Control lost focus
User enters a numeric field
Form submitted
In the following example, an attempt is made to check a numeric floating point field during input, when the focus is lost, and when the form is submitted

 ...NF,Number,,12,Insert Floating number; Control,Number,min=-200,max=200,pattern=^[-+]? d{1x2C3}(.d{1x2c2})?$;... one thousand two hundred and thirty-four

Handling Controls and Events
We can use the ID of the control (that is, the ID of the control) to enter the management name of the event. In addition, in the extra fields of the button, we can set a function that will be called when we click the parameters of the form itself (see the following fragment) (try).

 ...Fgen = new formGen("fg")$("Agree").addEventListener("click",function() {$('Start').disabled = !this.checked;},true);$('Start').disabled = true;... GB,Info,images/info.png,,infoPSW,Info;CKB,Agree,Consent cookies?,, I agree; B,Start; one trillion and two hundred and thirty-four billion five hundred and sixty-seven million eight hundred and ninety-one thousand and eleven

When submitting the form
Check the data according to the instructions in the pseudo type Check (if any). If an error occurs, the form will not be submitted, and the error field is displayed with a red border; It also generates alerts.

Submission depends on the parameter URL and function pseudo type Form:

URL Only: Response Replace Source Page（ https://www.xiaoyuani.com/ ）
URLand function: function uses the built-in Ajax module to
Only function: function is called as a parameter, which obviously needs to be described in detail locally
Submit in a new page
In the above case to be displayed in the new page 1), we inserted a custom button in the additional field, which contains the name of the function that will process the submission:

 ...Fgen = new formGen("result")... function myHandler(frm) {		                // the function receive the form	 var aErrors = Fgen.check(frm); if (aErrors.length > 0) {aleet("Errors:n"+aErrors.join("n"));return;} frm.encoding = "multipart/form-data"; 		// if there is a file to upload frm.target = "_blank"; 				        // in new window frm.submit();}... Form,frm,Complete Control form, x.php;B,Start,,,myHandler;...1234567891011121314

Please note that the user must perform any checks on the fields, and if there is a file upload, the attribute code must be set.

Advanced use
The pseudo type Get can be used to retrieve data from INTERNET through an internal Ajax function to fill (or change) values in a combo box or list, or to fill a form with default values (for example, data from a database).

Get requires a URI, that is, a script on an Internet site. The data provided by the script must have the expected syntax of the additional fields of CMB or L, or the expected structure of the pseudo type DEFAULTS by default (see the following example):

 Form,frmg2,Form Generator 2,echo.php;CMB,WidgetType,Widget Type; CMB,Hellas,Greek letters; List,Town;B,fg_Ok,?,40;B,fg_Cancel,?,40,,Cancel Form; B,fg_Reset,?,40,,Reset Form; Get,*,getSample.php?Type=Defaults;Get,WidgetType,getSample.php?Type=Type;Get,Town,getSample.php?Type=Towns;Get,Hellas,getSample.php?Type=Hellas;1234567891011

This is the PHP script that handles the request:

 twelve thousand three hundred and forty-five trillion and six hundred and seventy-eight billion nine hundred and ten million one hundred and eleven thousand two hundred and thirteen

In addition, the pseudo type GET has been enhanced, and a timeout parameter has been added to allow regular updating of comments, text and new control type Image:

 Form,frm,,echo.php,receiveData;C,Time,Clock;T,wField,IT Cite,200; Image,Image,,200;GET,Time,getSample.php?Type=Time,60000;GET,wField,getITCite.php,10000;Get,Image,getImage.php,11000;1234567

be careful
^This is one of the form generators (for Autoit, Powershell, Basic4Android) that can be found on my website.
^Some functions require HTML5 (the input type is data).
^There are some simple styles:

 .fg_Button {font-size:10pt;width:70px;height:22px;cursor:pointer;margin:0px 3px;     background:silver; line-height: 1.25;} fg_GButton {border:0; cursor:pointer;vertical-align:middle;padding:5px;} table {border: 1px solid #111;padding:3px} th {font: bold 9pt Arial;text-align: center; padding:5px;     vertical-align:top; background-color:#eee;}