Add Field
Add Field dynamic fields creation.
Cara Pakai
Copy-paste script berikut sebelum tag penutup <body>:
<script>
(function() {
// INITIALIZATION OF ADD FIELD
// =======================================================
new NueAddField('.js-add-field')
});
</script>
Basic example
<!-- Form -->
<div class="js-add-field row mb-4"
data-nue-add-field-options='{
"template": "#addEmailFieldTemplate",
"container": "#addEmailFieldContainer",
"defaultCreated": 0
}'>
<label for="phoneLabelEg1" class="col-sm-3 col-form-label form-label">Email</label>
<div class="col-sm-9">
<input type="email" class="js-input-mask form-control" name="email" id="phoneLabelEg1" placeholder="Enter email" aria-label="Enter email">
<!-- Container For Input Field -->
<div id="addEmailFieldContainer"></div>
<a href="javascript:;" class="js-create-field form-link">
<i class="bi-plus-circle me-1"></i> Add field
</a>
</div>
</div>
<!-- End Form -->
<!-- Add Phone Input Field -->
<div id="addEmailFieldTemplate" style="display: none;">
<div class="input-group-add-field">
<input type="email" class="js-input-mask form-control" data-name="email" placeholder="Enter email" aria-label="Enter email">
</div>
<a class="js-delete-field input-group-add-field-delete" href="javascript:;">
<i class="bi-x-lg"></i>
</a>
</div>
<!-- End Add Phone Input Field -->
Modal example
File attachment
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">Open modal</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">File attachment</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form>
<!-- Form -->
<div class="js-add-field row mb-4"
data-nue-add-field-options='{
"template": "#addEmailFieldTemplateModal",
"container": "#addEmailFieldContainerModal",
"defaultCreated": 0
}'>
<label for="phoneLabelEg2" class="col-sm-3 col-form-label form-label">Email</label>
<div class="col-sm-9">
<input type="email" class="js-input-mask form-control" name="email" id="phoneLabelEg2" placeholder="Enter email" aria-label="Enter email">
<!-- Container For Input Field -->
<div id="addEmailFieldContainerModal"></div>
<a href="javascript:;" class="js-create-field form-link">
<i class="bi-plus-circle me-1"></i> Add field
</a>
</div>
</div>
<!-- End Form -->
<!-- Add Phone Input Field -->
<div id="addEmailFieldTemplateModal" style="display: none;">
<div class="input-group-add-field">
<input type="email" class="js-input-mask form-control" data-name="email" placeholder="Enter email" aria-label="Enter email">
</div>
<a class="js-delete-field input-group-add-field-delete" href="javascript:;">
<i class="bi-x-lg"></i>
</a>
</div>
<!-- End Add Phone Input Field -->
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-white" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- End Modal -->
Methods
| Parameters | Description | Default value |
|---|---|---|
createTrigger | Trigger for add fields. | .js-create-field |
deleteTrigger | Trigger for delete field. | .js-delete-field |
limit | Limit of the fields. | 10 |
defaultCreated | Count created by default fields. | 1 |
nameSeparator | Separator for name attribute. | _ |
addedField | Call when field is added. | function() {} |
deletedField | Call when field is removed. | function() {} |