Skip to content

Javascript events

This widget has following events:

  • afterInit: triggered after initialization
  • afterAddRow: triggered after new row insertion
  • beforeDeleteRow: triggered before the row removal
  • afterDeleteRow: triggered after the row removal
  • afterDropRow: triggered after drop the row when sortable mode is on

Example

jQuery('#multiple-input').on('afterInit', function(){
    console.log('calls on after initialization event');
}).on('beforeAddRow', function(e, row, currentIndex) {
    console.log('calls on before add row event');
}).on('afterAddRow', function(e, row, currentIndex) {
    console.log('calls on after add row event');
}).on('beforeDeleteRow', function(e, row, currentIndex){
    // row - HTML container of the current row for removal.
    // For TableRenderer it is tr.multiple-input-list__item
    console.log('calls on before remove row event.');
    return confirm('Are you sure you want to delete row?')
}).on('afterDeleteRow', function(e, row, currentIndex){
    console.log('calls on after remove row event');
    console.log(row);
}).on('afterDropRow', function(e, item){       
    console.log('calls on after drop row', item);
});

JavaScript operations

add

Adding new row with specified settings.

Input arguments:

  • object - values for inputs, can be filled with tags for dynamically added options for select (for ajax select).

Example:

$('#multiple-input').multipleInput('add', {first: 10, second: '<option value="2" selected="selected">second</option>'});

remove

Remove row with specified index.

Input arguments:

  • integer - row number for removing, if not specified then removes last row.

Example:

$('#multiple-input').multipleInput('remove', 2);

clear

Remove all rows

$('#multiple-input').multipleInput('clear');

option

Get or set a particular option

Input arguments:

  • string - a name of an option
  • mixed - a value of an option (optional). If specified will be used as a new value of an option;

Example:

$('#multiple-input').multipleInput('option', 'max');
$('#multiple-input').multipleInput('option', 'max', 10);