JSFiddle - React, Tailwind, and code Playground
HTML
<form id="form" method="post" action="url-to-server.php"></form>
JavaScript
(function($){
$.fn.textbox = function(options) {
var ADD_TMPL = '<a class="add" href="#">add new</a>';
var SAVE_TMPL = '<input class="save" type="submit" value="save" />';
var LIST_TMPL = '<ul class="list"></ul>';
// default settings
var settings = {
values: [], // collection of values
name: "field", // field name
maxNum: 5 // max number of elements
};
// renders text item
function renderItem(name, value) {
return '<li><input type="text" name="' + name + '[]" value="' + value + '" /> <a class="remove" href="#">remove</a></li>';
}
return this.each(function() {
// extend settings with options
if (options) {
$.extend(settings, options);
}
var form = $(this);
var add = $(ADD_TMPL);
var save = $(SAVE_TMPL);
var list = $(LIST_TMPL);
var items = "";
var curNum = 0;
// render items
$.each(options.values, function (i, v) {
if (curNum < settings.maxNum) {
items += renderItem(settings.name, v);
curNum += 1;
}
});
form.append(add)
.append(list)
.append(save);
list.append(items);
// events
$('.remove', this).live('click', function (e) {
$(this).parent().remove();
e.preventDefault();
curNum -= 1;
});
$('.add', this).bind('click', function (e) {
if (curNum < settings.maxNum) {
list.append(renderItem(settings.name, ""));
curNum += 1;
e.preventDefault();
}
});
$('.save', this).bind('click', function (e) {
settings.onSubmit && settings.onSubmit($(form).serialize());
e.preventDefault();
});
});
}
})(jQuery);
// example usage
$('#form').textbox({
maxNum: 2,
values: ["test1"],
name: "textbox",
onSubmit: function(data) {
console.log(data);
}
});