Skip to content

Instantly share code, notes, and snippets.

@rohanthewiz

rohanthewiz/dynamic_form.html

Created September 16, 2017 14:54
Show Gist options
  • Save rohanthewiz/1fd4c04a48d2b99effe304a3a8458cb8 to your computer and use it in GitHub Desktop.
Save rohanthewiz/1fd4c04a48d2b99effe304a3a8458cb8 to your computer and use it in GitHub Desktop.
Download ZIP
jQuery Dynamic form elements with Add, Remove, Move Up, Move Down, and Serialize
Raw
dynamic_form.html
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="js/jquery.serialize-object.min.js"></script>
<style>
* box-sizing {border-box}
body {background-color: tan}
.module {margin: 2px; padding-bottom: 0.3rem}
</style>
</head>
<body>
<form id="input_fields_wrap">
<button id="btn_serialize">Serialize</button>
<button id="btn_add_field">Add Module</button>
</form>
</body>
</html>
<script type="text/javascript">
$(document).ready(function() {
var wrapper = $("#input_fields_wrap"); //Fields wrapper
var add_button = $("#btn_add_field"); //Add button ID
var count = 0;
var max_components = 8; //maximum components allowed
// Initial Components
for (var x = 0; x < 2; x++) {
$(wrapper).append(buildComponent(count++)); //add input box
}
// Can Add
$(add_button).click(function (e) { //on add input button click
e.preventDefault();
if (count < max_components) {
$(wrapper).append(buildComponent(count++)); //add input box
}
});
// Serialize
$(wrapper).on("click","#btn_serialize", function(e){
e.preventDefault();
console.log($(wrapper).serializeJSON()); // ..izeObject();
});
// Remove
$(wrapper).on("click",".remove_field", function(e){
e.preventDefault();
$(this).parent('.module').remove();
count--;
});
// Move Up
$(wrapper).on("click",".move_up", function(e){
e.preventDefault();
var parent = $(this).parent('.module');
parent.insertBefore(parent.prev('.module'));
});
// Move Up
$(wrapper).on("click",".move_down", function(e){
e.preventDefault();
var parent = $(this).parent('.module');
parent.insertAfter(parent.next('.module'));
});
});
function buildComponent(x) {
var val = "654" + x;
return $('<div class="module">' +
'<input type="text" name="mods[' + x + '][id]" value="' + val + '" />' +
checkbox('Published', 'published', x, true) +
checkbox('Main Module', 'main_module', x, false) +
'<input type="text" name="mods[' + x + '][layout_col]" value="center">' +
'<input type="text" name="mods[' + x + '][updated_by]" value="Joe">' +
'&nbsp;<a href="#" class="remove_field">Remove</a>' +
'&nbsp;<a href="#" class="move_up">&uparrow;</a>' +
'&nbsp;<a href="#" class="move_down">&downarrow;</a>' +
'</div>');
}
function checkbox(displayName, fieldName, index, isChecked) {
var str = hspace() + '<input type="checkbox" name="mods[' + index + '][' + fieldName + ']"';
if (isChecked) {
str += ' checked="checked"';
}
str += ' /> ' + displayName + hspace();
return str;
}
function hspace() {
return '&nbsp;&nbsp;'
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment