Input Widget

accept

The accept array contains the file types which are accepted by the file upload field.

$A.newInput({
    type:'file',
    accept: ['.csv', '.rar', '.zip', '.tar', '.gz']
}).draw();
            

$A.newInput().accept(['.csv', '.rar', '.zip', '.tar', '.gz']).draw();
            

var input = $A.newInput().draw();
//Setter
input.accept(['.csv', '.rar', '.zip', '.tar', '.gz']); //returns input

//Getter
console.log(input.accept()); //returns value of accept
            

breakInput

If true the input field will appear in a new row, below the label.

$A.newInput({
    label: 'title',
    breakInput: true
}).draw();
            

$A.newInput().breakInput(true).label('title').draw();
            

var input = $A.newInput().label('title').draw();
//Setter
input.breakInput(true); //returns input

//Getter
console.log(input.breakInput()); //returns value of breakInput
            

checked

Shows if the radio button or checkbox input is checked.

$A.newInput({
    type: 'radio',
    checked: true
}).draw();
            

$A.newInput({type: 'radio'}).checked(true).draw();
            

var input = $A.newInput({type: 'radio'}).draw();
//Setter
input.checked(true); //returns input

//Getter
console.log(input.checked()); //returns value of checked
            

height

Setting the height of the input field.

$A.newInput({
    height:"100px"
}).draw();
            

$A.newInput().height("100px").draw();
            

var input = $A.newInput().draw();
//Setter
input.height(100); //returns input

//Getter
console.log(input.height()); //returns the height
            

help

If set, an icon appears next to the particular input showing a hint when mouse is hovered.

$A.newInput({
    help: "Tell the user what to do",
}).draw();
            

$A.newInput().help("Tell the user what to do").draw();
            

var input = $A.newInput().draw();
//Setter
input.help("Tell the user what to do"); //returns input

//Getter
console.log(input.help()); //returns the help string
            

items

This option is an alias for the options method.

label

If set, a label appears beneath the input.

$A.newInput({
    label: 'Name:'
}).draw();
            

$A.newInput().label('Name:').draw();
            

var input = $A.newInput().draw();
//Setter
input.label('Name:'); //returns input

//Getter
console.log(input.label()); //returns value of label
            

labelPosition

Setting the position of the label.
Allowed values: 'left', 'right'

$A.newInput({
    label: 'Name:',
    labelPosition: 'right'
}).draw();
            

$A.newInput().label('Name:').labelPosition('right').draw();
            

var input = $A.newInput().label('Name:').draw();
//Setter
input.labelPosition('right'); //returns input

//Getter
console.log(input.labelPosition()); //returns value of labelPosition
            

labelWidth

Setting the width of the label.

$A.newInput({
    label: 'Name:',
    labelWidth: '100'
}).draw();
            

$A.newInput().label('Name:').labelWidth(100).draw();
            

var input = $A.newInput().label('Name:').draw();
//Setter
input.labelWidth('100px'); //returns input

//Getter
console.log(input.labelWidth()); //returns value of labelWidth
            

multiple

This option can modify the function of a select input element.
If true: the select element will be set so, that you can select multiple options.
If false: the select element will be set so, that you can select only one option.

$A.newInput({
    type: 'select',
    options: [
        [0, '--- Nothing ---'],
        [12, 'First Segment'],
        [15, 'Second Segment']
    ],
    multiple: true,
}).draw();
            

$A.newInput().type('select').multiple(true).options([[0, '--- Nothing ---'],[12, 'First Segment'],[15, 'Second Segment']]).draw();
            

var input = $A.newInput({type: 'select'}).options([[0, '--- Nothing ---'],[12, 'First Segment'],[15, 'Second Segment']]).draw();
//Setter
input.multiple(true); //returns input

//Getter
console.log(input.multiple()); //returns value of multiple
            

multiselect

By setting it true you can apply the jQuery UI Multiselect Widget on your select fields.
Else the default HTML skin will be applied on the fields.

$A.newInput({
    type: 'select',
    options: [
        [0, '--- Nothing ---'],
        [12, 'First Segment'],
        [15, 'Second Segment']
    ],
    multiselect: true
}).draw();
            

$A.newInput().multiselect(true).draw();
            

var input = $A.newInput().draw();
//Setter
input.multiselect(true); //returns input

//Getter
console.log(input.multiselect()); //returns value of multiselect
            

name

Sets the name attribute of the particular input element in the DOM.

$A.newInput({
    name: 'address'
}).draw();
            

$A.newInput().name('address').draw();
            

var input = $A.newInput().draw();
//Setter
input.name('address'); //returns input

//Getter
console.log(input.name()); //returns value of name
            

needModify

This option is in close connection with the form module.
If needModify is set, the particular input won't be serialized and sent in case it's value is the same as its previous value.

$A.newInput({
    needModify: true
}).draw();
            

$A.newInput().needModify(true).draw();
            

var input = $A.newInput().draw();
//Setter
input.needModify(true); //returns input

//Getter
console.log(input.needModify()); //returns value of needModify
            

newRow

If true the input element (including the label) will appear in a new row. Then no other elements can be inserted in that row.
If false the input element (including the label) will appear in the same row, next to the previous element.

$A.newInput({
    newRow: false
}).draw();
            

$A.newInput().newRow(false).draw();
            

var input = $A.newInput().draw();
//Setter
input.newRow(false); //returns input

//Getter
console.log(input.newRow()); //returns value of newRow
            

options

The array or object containing the options which can be selected when using a select or multiselect as input.
If previously defined, setter will replace the old array with the one given as argument. To add further options use the addItem or addOption methods.
If using an array, you can set which option should be selected by default. (Shown in example)

//Using object as argument:
$A.newInput({
    type: 'select',
    options:{
        1: 'option1',
        two: 2,
        three: 'option three'
    }
}).draw();

//Using an array of arrays as argument:
$A.newInput({
    type: 'select',
    options:[
        [1, 'option1'],
        ['two', 2, true], //this element will be selected by default, as we gave 'true' a third parameter of the option.
        ['three', 'option three']
    ]
}).draw();
            

$A.newInput({type: 'select'}).options([[1, 'option1'], ['two', 2, true], ['three', 'option three']]).draw();
            

var input = $A.newInput({type: 'select'}).draw();
//Setter
input.options([[1, 'option1'], ['two', 2, true], ['three', 'option three']]); //returns input

//Getter
console.log(input.options()); //returns the options array
            

placeholder

Use this option on input fields to write predefined text which can give the user some hints.
Actually sets the placeholder attribute of an input field.

$A.newInput({
    type: 'text',
    placeholder: 'Name'
}).draw();
            

$A.newInput({type: 'text'}).placeholder('Name').draw();
            

var input = $A.newInput({type: 'text'}).draw();
//Setter
input.placeholder('Name'); //returns input

//Getter
console.log(input.placeholder()); //returns the value of placeholder
            

readonly

Set this option true to make an input read-only.

$A.newInput({
    readonly: true
}).draw();
            

$A.newInput().readonly(true).draw();
            

var input = $A.newInput().draw();
//Setter
input.readonly(true); //returns input

//Getter
console.log(input.readonly()); //returns value of readonly

            

type

Use this option to set the type attribute of the input element.

$A.newInput({
    type: 'textarea'
}).draw();
            

$A.newInput().type('textarea').draw();
            

var input = $A.newInput().draw();
//Setter
input.type('textarea'); //returns input

//Getter
console.log(input.type()); //returns value of type
            

value

Use this option to set the value of any input.

$A.newInput({
    type: 'text',
    value: 'Default text'
}).draw();
            

$A.newInput({type: 'text'}).value('Default text').draw();
            

var input = $A.newInput().draw();
//Setter
input.value('Default text'); //returns input

//Getter
console.log(input.value()); //returns value

            

validator

AutomizyJS has bulit-in validators for various types of input, using this option you can set which one you would like to use.
For further details check the Validator Module documentation.

$A.newInput({
    validator: 'email'
}).draw();
            

$A.newInput().validator('email').draw();
            

var input = $A.newInput().draw();
//Setter:
input.validator('email'); //returns input

//Getter
console.log(input.validator()); //returns validator

            

addItem(key, value)

Use this method to add a new option to your select or multiselect input.
The new option will be added to the end of the options array.

• key
  Type: String | Number
  The key of the new option.
• value
  Type: String | Number
  The value of the new option.

var input=$A.newInput({type: 'select'}).draw();
input.addItem(1, 'First option');
            

addItemBefore(key, value)

Use this method to add a new option to your select or multiselect input.
The new option will be added to the beginning of the options array.

• key
  Type: String | Number
  The key of the new option.
• value
  Type: String | Number
  The value of the new option.

var input=$A.newInput({type: 'select'}).addItem(2, 'Second option').draw();
input.addItemBefore(1, 'First option');
            

addItems(arr, before)

Use this method to add an array of new options to your select or multiselect input.
The new options will be added to the beginning or to the end of the options array depending on the value of the before parameter.

• arr
  Type: Array | Object
  The array or object of new options.
  If using an array, you can set which option should be selected by default. (Shown in example)
• before
  Type: Boolean
  If true the new options will be added to the beginning of the original options array.
  If false the new options will be added to the end of the original options array.

var input=$A.newInput({type: 'select'}).draw();
//Using an object as argument:
input.addItems({
    1: 'option1',
    two: 2,
    three: 'option three'
});  //no second parameter given -> These options will be added to the end of the original 'options' array.

//Using an array of arrays as argument:
input.addItems([
    [1, 'option1'],
    ['two', 2, true], //this element will be selected by default, as we gave 'true' a third parameter of the option.
    ['three', 'option three']
], true); //'true' parameter given -> These options will be inserted before the first element of the original 'options' array.
            

addOption(key, value)

This method is an alias for the addItem(key, value) method.

addOptionBefore(key, value)

This method is an alias for the addItemBefore(key, value) method.

addOptions(arr, before)

This method is an alias for the addItems(arr, before) method.

datepicker()

Use this method to apply a datepicker on the particular input.
Please note that jQuery UI plugin is needed for this feature.

var input=$A.newInput().draw();
input.datepicker();
            

datetimepicker()

Use this method to apply a datetimepicker on the particular input.
Please note that jQuery UI plugin is needed for this feature.

var input=$A.newInput().draw();
input.datetimepicker();
            

disable()

Use this to disable the particular input element.
Disabled inputs cannot be selected, edited or copied.

var input=$A.newInput().draw();
input.disable();
            

enable()

Use this to enable the particular input element.

var input=$A.newInput().disable().draw();
setTimeout(function(){
    input.enable();
},1000);
            

errorBox()

Returns the JQuery object that represents the error box of the particular input element.
errorBox is the element which appears when the user types invalid value in an input field.

var input=$A.newInput({
    label: 'Email address:',
    value: 'Type here an invalid email address!', //invalid email address given
    validator: 'email'
}).draw().validate();
input.errorBox(); //returns [<span class="automizy-input-box-error">Invalid email address</span>]
            

focus()

Use this option to set the focus of the given input.

var input=$A.newInput({
    label: 'Email address:',
}).draw()
setTimeout( function(){
    input.focus();
},1000);
            

input()

Returns the JQuery object that represents the particular input element.

var input=$A.newInput({name: 'asd', type: 'textarea', id:'txtarea01'}).draw();
console.log(input.input()); //returns [<textarea id="txtarea01" name="asd" style="display: inline-block;"></textarea>]
            

timepicker()

Use this method to apply a timepicker on the particular input.
Please note that jQuery UI plugin is needed for this feature.

var input=$A.newInput().draw();
input.timepicker();
            

val()

Sets or gets the value of any input element. Works the same as the jQuery .val() function.

var input = $A.newInput().draw();
//Setter
input.val('Default text'); //returns input

//Getter
console.log(input.val()); //returns value
            

validate(func)

Use this method to run the set validator to validate the particular input field.
If invoked without parameter the function returns true or false depending on the result of validation.
If invoked with parameter returns with the particular input module.

• func
  Type: function
  The function which will be invoked after validation is over.

var input=$A.newInput({label: 'Age:', value: 14, validator: {num: true, min: 18, max: 130}}).draw();
//Invoke without parameter
input.validate(); //returns result of validation (true|false)

//Invoke with parameter
input.validate(function(){
    alert('Validation over!');
});
            

change(event)

By setting this event you can give a function which will be invoked after any changes on the Input widget.

• event
  Type: function
  The event which will be triggered on the change of the Input widget.

var input=$A.newInput({label: 'Type something here, then click out of the input field!'}).draw();
input.change(function (){
    alert('Input widget changed!');
})
            

check()

Sets the checked property of particular checkbox or radio button true.

var input=$A.newInput({type: 'checkbox'}).draw();
setTimeout(function(){
    input.check();
},1000);
            

click(event)

You can set the event you want to be triggered when clicking on the particular input.

• event
  Type: function
  The event to be triggered

var input=$A.newInput().label('Click in the input field!').draw();
input.click(function(){
    alert('Clicked!');
})          
            

enter(event)

You can set the event you want to be triggered when clicking on the particular input.

• event
  Type: function
  The event to be triggered

var input=$A.newInput().label('Click in the input field, then press enter!').draw();
input.enter(function(){
    alert('Pressed enter!');
})