I'm trying to make from scratch a jQuery Form builder but I'm having some problems.
When you add a new field to the form generator, it works, but when you try to add a new field, it appends the new field plus one. If you try again, then it adds 3 elements, etc. The code is inside a function, then it is called when the document is ready.
I spent so many hours and I haven't a clear vision of where's the problem (sorry)
function addField() {
var formAddField = $("#form-add-field");
var formConstructorForm = $("#form-constructor-form");
var addFieldButton = $("#add-field-button");
var fieldLabelName = $("#field-label-name");
var formGenerated = $("#form-generated");
var formGeneratedForm = formGenerated.find("form");
var fieldIdForm = $("#field-id-form");
var fieldTypeSelect = $("#field-type-select");
var inputTypeForm = $("#input-type-form");
var inputTypeSelect = $("#input-type-select");
var field = '';
var label = '';
var inputGroup = '';
formAddField.on("click", function (e) {
e.preventDefault();
addFieldButton.addClass("disabled");
formConstructorForm.addClass("show");
fieldTypeSelect.on("change", function () {
var fieldTypeSelected = fieldTypeSelect.val();
switch (fieldTypeSelected) {
case 'input':
inputTypeForm.show();
addFieldButton.removeClass("disabled");
field = '<input class="validate" id="' + fieldIdForm.val() + '" type="' + inputTypeSelect.val() + '">';
break;
case 'select':
inputTypeForm.hide();
addFieldButton.removeClass("disabled");
field = '<select id="' + fieldIdForm.val() + '"></select>';
break;
case 'textarea':
inputTypeForm.hide();
addFieldButton.removeClass("disabled");
field = '<textarea class="materialize-textarea" id="' + fieldIdForm.val() + '"></textarea>';
break;
}
});
addFieldButton.on("click", function (e) {
e.preventDefault();
label = '<label for="">' + fieldLabelName.val() + '</label>';
inputGroup = '<div class="input-field col s12">' + '\n' + field + '\n' + label + '\n' + '</div>';
formConstructorForm[0].reset();
formConstructorForm.removeClass("show");
$(inputGroup).appendTo(formGeneratedForm);
});
});
}
Here's the complete jsfiddle with the functions and when have they been called.
Could anyone give me a hand on this? Thanks!
The problem in your code is that you are adding an extra click event every time you press the button. In the updated fiddle below it will remove the previous listeners before adding the new one.
It may not be the perfect solution but will solve your problem.
addFieldButton.off('click');
addFieldButton.on("click", function(e) {
e.preventDefault();
label = '<label for="">' + fieldLabelName.val() + '</label>';
inputGroup = '<div class="input-field col s12">' + '\n' + field + '\n' + label + '\n' + '</div>';
formConstructorForm[0].reset();
formConstructorForm.removeClass("show");
$(inputGroup).appendTo(formGeneratedForm);
});