jFormz Documentation

jFormz is written as a simple JavaScript prototype class.

The idea is to make it easier to generate and inject HTML forms using javaScript.

Installation: Include a script tag with the src linking to a copy of jFormz.js

Then instantiate an instance of the jFormz class.

            
            ⟨script src='jFormz.js'⟩⟨/script⟩
            var jf = new Jformz()
            

Now you can call any of the jFormz methods as shown below.

While JavaScript is very forgiving about not passing arguments. It's best to always pass the total number of arguments the method expects and either use an empty string '' or jf.empty for tag attributes you don't need.

Build a form.

        
        ⟨div id="formView" ⟩ ⟨/div⟩
        
        ⟨script src='jFormz.js'⟩⟨/script⟩
        
        ⟨script⟩
        //INSTANTIATE
        var jf = new Jformz();
        
        //BUILD A FORM
        var view  = '';
        var e = jf.empty;    
        view += jf.openForm(e,e,e,jf.dClass,e);
        view += jf.formLabel('Name','label'); 
        view += jf.inputText('text','test',jf.dClass,'testa','Placeholder',e);
        view += jf.br();
        view += jf.formLabel('Message','label'); 
        view += jf.textArea('test',jf.dClass,'test','test text');
        view += jf.br();
        view += jf.formLabel('Options','label'); 
        view += jf.selectList(e,jf.dClass,e,[['1', 'Option 1'],['2', 'Option 2']]);
        view += jf.br();
        view += jf.submitBtn(e,e,jf.priBtn,'Save');
        view += jf.closeForm();
        

        //SHOW THE FORM
        jf.showView('formView', view);
        
        ⟨/script⟩
            

jFormz Methods

OPENING FORM TAG: openForm(jAction, jMethod, jId, jClass, jName) 5 Args

Takes in 5 arguments, returns an opening form tag.

 
        jAction: The form action
        jMethod: The form method POST or GET
        jId: The form id
        jClass: The form class
        jName: The form name
        
        jf.openForm(jAction, jMethod, jId, jClass, jName);
        
CLOSING FORM TAG: closeForm() 0 Args

Takes in nothing returns a closing form tag.

jf.closeForm();

BREAK TAG: br() 0 Args

Takes in nothing returns a break (br) tag.

jf.br();

LABEL: formLabel(jText, jClass) 2 Args

Takes in 2 arguments, returns a form label.

 
        jText: The label text
        jClass: The label class
        
        jf.formLabel(jText, jClass);
        
GENERIC INPUT: genInput(jId,jClass,jName,jPh,jVal,jRequire) 6 Args

Takes in 6 arguments, returns an input of the type specified.

 
        jType: Input Type
        jId: Input Id
        jClass: Input Class
        jName: Input Name
        jPh: Input Placeholder
        jVal: Input Value
        jRequire: Input Required
        
        jf.genInput(jId,jClass,jName,jPh,jVal,jRequire)
        
TEXT INPUT: textInput(jId,jClass,jName,jPh,jVal,jRequire) 6 Args

Takes in 6 arguments, returns a text input.

 
        jId: Input Id
        jClass: Input Class
        jName: Input Name
        jPh: Input Placeholder
        jVal: Input Value
        jRequire: Input Required
        
        jf.textInput(jId,jClass,jName,jPh,jVal,jRequire);
        
DATE INPUT: dateInput(jId,jClass,jName,jMin,jMax,jRequire) 6 Args

Takes in 6 arguments, returns a date input.

 
        jId: Input Id
        jClass: Input Class
        jName: Input Name
        jMin: expects date string ex: min="1979-12-31"
        jMax: expects date string ex: min="1979-12-31"
        jRequire: Input Required
        
        jf.dateInput(jId,jClass,jName,jMin,jMax,jRequire);
        
COLOR INPUT: colorInput(jId,jClass,jName,jRequire) 4 Args

Takes in 4 arguments, returns a color input.

 
        jId: Input Id
        jClass: Input Class
        jName: Input Name
        jRequire: Input Required
        
        jf.colorInput(jId,jClass,jName,jRequire);
        
MONTH INPUT: monthInput(jId,jClass,jName,jRequire) 4 Args

Takes in 4 arguments, returns a month input.

 
        jId: Input Id
        jClass: Input Class
        jName: Input Name
        jRequire: Input Required
        
        jf.monthInput(jId,jClass,jName,jRequire);
        
WEEK INPUT: weekInput(jId,jClass,jName,jRequire) 4 Args

Takes in 4 arguments, returns a month input.

 
        jId: Input Id
        jClass: Input Class
        jName: Input Name
        jRequire: Input Required
        
        jf.weekInput(jId,jClass,jName,jRequire);
        
RANGE INPUT: rangeInput(jId,jClass,jName,jMin,jMax,jRequire) 6 Args

Takes in 6 arguments, returns a range input.

 
        jId: Input Id
        jClass: Input Class
        jName: Input Name
        jMin: expects date string ex: min="1979-12-31"
        jMax: expects date string ex: min="1979-12-31"
        jRequire: Input Required
        
        jf.rangeInput(jId,jClass,jName,jMin,jMax,jRequire);
        
TIME INPUT: timeInput(jId,jClass,jName,jRequire) 4 Args

Takes in 4 arguments, returns a time input.

 
        jId: Input Id
        jClass: Input Class
        jName: Input Name
        jRequire: Input Required
        
        jf.timeInput(jId,jClass,jName,jRequire)
        
NUMBER INPUT: numInput(jId,jClass,jName,jMin,jMax,jStep,jRequire) 7 Args

Takes in 7 arguments, returns a number input.

 
        jId: Input Id
        jClass: Input Class
        jName: Input Name
        jMin: Input Min
        jMax: Input Max
        jStep: Input Step
        jRequire: Input Required
        
        jf.numInput(jId,jClass,jName,jMin,jMax,jStep,jRequire);
        
RADIO BUTTON: radioInput(jId,jClass,jName,jVal,jChkd,jRequire) 6 Args

Takes in 6 arguments, returns a radio button.

 
        jId: Input Id
        jClass: Input Class
        jName: Input Name
        jMVal: Input Value
        jChkd: Input Checked
        jRequire: Input Required
        
        jf.radioInput(jId,jClass,jName,jVal,jChkd,jRequire);
        
CHECKBOX: checkBoxInput(jId,jClass,jName,jVal,jChkd,jRequire) 6 Args

Takes in 6 arguments, returns a checkbox.

 
        jId: Input Id
        jClass: Input Class
        jName: Input Name
        jMVal: Input Value
        jChkd: Input Checked
        jRequire: Input Required
        
        jf.checkBoxInput(jId,jClass,jName,jVal,jChkd,jRequire);
        
TEXTAREA: textArea(jId,jClass,jName,jHtchml,jRequire) 5 Args

Takes in 5 arguments, returns a textarea tag.

 
        jId: Input Id
        jClass: Input Class
        jName: Input Name
        jHtchml: Inner HTML
        jRequire: Input Required
        
        jf.textArea(jId,jClass,jName,jHtchml,jRequire)
        
SELECT LIST: selectList(jId,jClass,jName,jVals,jRequire) 5 Args

Takes in 5 arguments, returns a select list.

 
        jId: Input Id
        jClass: Input Class
        jName: Input Name
        jVals: Array of arrays. [['value','text'],['value','text']]
        jRequire: Input Required
        
        jf.selectList(jId,jClass,jName,jVals,jRequire);
        
SUBMIT BUTTON: submitBtn(jName,jId,jClass,jVal) 4 Args

Takes in 4 arguments, returns a submit button.

 
        jId: Input Id
        jClass: Input Class
        jName: Input Name
        jVal: Button Text
     
        jf.submitBtn(jName,jId,jClass,jVal);
        

HTML Element Methods

Get Element By Id getElem(jId) 1 Arg

Takes in 1 argument, returns the element.

 
        jId: Element Id
        
        jf.getElem(jId);
        
Get Elements By Class Name getByClass(jClass) 1 Arg

Takes in 1 argument, returns an array of elements.

 
        jId: Element Id
        
        jf.getByClass(jClass);
        
        
Get Elements By Tag Name getByTag(jTag) 1 Arg

Takes in 1 argument, returns an array of elements.

 
        jId: Element Id
        
       jf.getByTag(jTag);
        
        

Show View Method

Show View showView(jId,jView) 2 Args

Takes in 2 arguments, injects view object into inner HTML of element with id.

 
        jId: Element Id to inject into
        jView: HTML to show.
        
        jf.showView(jId,jView);