Created
March 3, 2015 16:48
-
-
Save shkesar/61e4dc75b6ba752ffb4b to your computer and use it in GitHub Desktop.
Dynamic form for inputting auto-complete text fields
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div id="container" style="margin-top:30px"></div> | |
<button class="btn btn-prmiary" id="btn">Add</button> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// non-removable elements don't contain the remove button Haddon | |
function createItemBox(removable) { | |
var itemBox = $('<div>', { | |
'class': 'row item-box' | |
}); | |
var column = $('<div>', { | |
'class': 'col-md-offset-1 col-sm-6 col-md-4' | |
}); | |
var inputBox = $('<input>', { | |
'type': 'text', | |
'class': 'form-control item-text-box', | |
'placeholder': 'Your item here', | |
'aria-describedBy': 'basic-addon1' | |
}); | |
inputBox.on('focusin focusout', function() { | |
if($(".item-text-box").filter(function() { | |
return $.trim($(this).val()) == ''; | |
}).length < 2) | |
insertItemBox(); | |
}); | |
if (removable) { | |
var inputGroup = $('<div>', { | |
'class': 'input-group input_group-md' | |
}); | |
var inputGroupButton = $('<div>', { | |
'id': 'basic-addon1', | |
'class': "input-group-btn" | |
}); | |
var crossGlyphicon = $('<span>', { | |
'class': 'glyphicon glyphicon-remove', | |
'aria-hidden': 'true' | |
}); | |
var removeButton = $('<button>', { | |
'class': 'btn btn-default', | |
'type': 'button', | |
'id': 'removeItemBox' | |
}); | |
removeButton.click(function() { | |
$(this).closest('.item-box').remove(); | |
}); | |
crossGlyphicon.appendTo(removeButton); | |
removeButton.appendTo(inputGroupButton); | |
inputBox.appendTo(inputGroup); | |
inputGroupButton.appendTo(inputGroup); | |
inputGroup.appendTo(column); | |
} else { | |
inputBox.appendTo(column); | |
} | |
column.appendTo(itemBox); | |
return itemBox; | |
} | |
var insertItemBox = function() { | |
var itemBox = createItemBox(true); | |
itemBox.appendTo("#container"); | |
}; | |
(function() { | |
$("#btn").click(insertItemBox); | |
// create new element when one is being typed | |
$('#item-text-box').click(insertItemBox); | |
// non-removable item box | |
$('#container').append(createItemBox(false)); | |
$('#container').append(createItemBox(true)); | |
}()); | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
#container { | |
margin: 0px auto; | |
} | |
.item-box { | |
margin-top: 10px; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment