Skip to content

Instantly share code, notes, and snippets.

@RuanAragao
Created January 4, 2017 13:55
Show Gist options
  • Save RuanAragao/5b5678d0fad4fb7b52e0041ccc6bfbfd to your computer and use it in GitHub Desktop.
Save RuanAragao/5b5678d0fad4fb7b52e0041ccc6bfbfd to your computer and use it in GitHub Desktop.
Dynamic jQuery Custom Form Example // source http://jsbin.com/qizuve
#form-wrapper,
#field-samples {
border: 1px solid #e3e3e3;
display: block;
width: 320px;
min-height: 200px;
float: left;
margin: 10px;
padding: 10px;
}
#field-samples .field {
cursor: pointer;
}
.field {
border: 1px solid #e7e7e7;
padding: 10px;
display: block;
margin-bottom: 10px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Dynamic jQuery Custom Form Example</title>
</head>
<body>
<div id="form-wrapper">
</div>
<div id="field-samples">
<div class="field" id="field-text">
<label for="text">text</label>
<input type="text" id="text" placeholder="text" disabled="disabled">
</div>
</div>
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
</body>
</html>
// Non much elegant way.
$(document).ready(function(e) {
var i_id = 1;
$('#field-samples #field-text').on('click', function(e) {
var field_id = 'field-' + i_id++;
var $new_input = $(this).clone();
$('#form-wrapper').append($new_input);
$('#form-wrapper #field-text').attr('id', field_id);
$('#form-wrapper #'+field_id).find('label').attr('for', 'a-'+field_id).text(field_id);
$('#form-wrapper #'+field_id).find('input').attr('id', 'a-'+field_id).removeAttr('disabled');
$('#form-wrapper #'+field_id).append('<button class="delete-field" onclick="$(this).parent(\'.field\').remove()">x</button>');
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment