Skip to content

Instantly share code, notes, and snippets.

@BobbyRuby

BobbyRuby/custom_field_builder.js

Created December 11, 2019 23:18
Show Gist options
  • Save BobbyRuby/c060c8c29ab2d2ebdc0e64b93707e735 to your computer and use it in GitHub Desktop.
Save BobbyRuby/c060c8c29ab2d2ebdc0e64b93707e735 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
custom_field_builder.js
/*
@TODO Needs Refactored to reduce code smell and optimize jquery
@TODO Some JS adds classes that should really be added by the markup
*/
function updateBoxFieldsOnDrop(field_wrap) {
let bn = parseInt(jQuery(field_wrap).attr('id').replace(/form_box_field_wrap-form_box_/, ''));
jQuery('.edit-form-container-outer label')
.filter(function () {
// Get all labels for this field
let regExp = new RegExp('form_box_' + bn + '-[a-z_]+[0-9]+');
console.log(jQuery(this).attr('for').match(regExp));
return jQuery(this).attr('for').match(regExp)
})
.each(function (i, e) {
let currentfn; // current field count
let newNum; // new number for the field
// Get current object
let eObj = jQuery(e);
// Get current text
let eText = eObj.text();
function get_removed_field_count() {
// Get current removed fields count
matches = eObj.parent().attr('name').match(/:[0-9]+/);
// console.log(matches);
currentfn = parseInt(matches[0].replace(':', ''));
return currentfn;
}
// Only use the description field
if (eText.search('Description') !== -1) {
// Update this field with order it is on screen
console.log(i);
updateFieldNumbers(eObj, eText, i);
}
});
}
function updateFieldNumbers(eObj, eText, newNum) {
// Update description label
eObj.text(eText.replace(/[0-9]+/, newNum));
// Update description div
eObj.parent().attr('name', eObj.parent().attr('name').replace(/:[0-9]+/, ':' + newNum));
eObj.parent().attr('id', eObj.parent().attr('id').replace(/_[0-9]+$/, '_' + newNum));
// Update the wrapping div (not 'inner')
eObj.parent().parent().parent().attr('name', eObj.parent().attr('name').replace(/_[0-9]+$/, ':' + newNum));
eObj.parent().parent().parent().attr('id', eObj.parent().attr('id').replace(/_[0-9]+$/, '_' + newNum));
// Update description textarea field
eObj.next().attr('name', eObj.next().attr('name').replace(/:[0-9]+/, ':' + newNum));
eObj.next().attr('id', eObj.next().attr('id').replace(/_[0-9]+$/, '_' + newNum));
// Update name div
eObj.parent().prev().attr('name', eObj.parent().prev().attr('name').replace(/:[0-9]+/, ':' + newNum));
eObj.parent().prev().attr('id', eObj.parent().prev().attr('id').replace(/_[0-9]+$/, '_' + newNum));
// Update name label
eObj.parent().prev().find('label').text(eObj.parent().prev().find('label').text().replace(/[0-9]+/, newNum));
eObj.parent().prev().find('label').attr('for', eObj.parent().prev().find('label').attr('for').replace(/_[0-9]+$/, '_' + newNum));
// Update name text field
eObj.parent().prev().find('input[type="text"]').attr('name', eObj.parent().prev().find('input[type="text"]').attr('name').replace(/:[0-9]+/, ':' + newNum));
eObj.parent().prev().find('input[type="text"]').attr('id', eObj.parent().prev().find('input[type="text"]').attr('id').replace(/_[0-9]+$/, '_' + newNum));
// Update Remove Button
eObj.parent().next().attr('id', eObj.parent().next().attr('id').replace(/_[0-9]+$/, '_' + newNum));
}
function updateBoxFieldsOnRemove(form_box_count, matches, removeNum) {
jQuery('.edit-form-container-outer label')
.filter(function () {
// Get all labels for this field
let regExp = new RegExp('form_box_' + form_box_count + '-[a-z_]+[0-9]+');
console.log(jQuery(this).attr('for').match(regExp));
return jQuery(this).attr('for').match(regExp)
})
.each(function (i, e) {
let currentfn; // current field count
let newNum; // new number for the field
// Get current object
let eObj = jQuery(e);
// Get current text
let eText = eObj.text();
console.log(currentfn);
function get_removed_field_count() {
// Get current removed fields count
matches = eObj.parent().attr('name').match(/:[0-9]+/);
// console.log(matches);
currentfn = parseInt(matches[0].replace(':', ''));
return currentfn;
}
// Only use the description field
if (eText.search('Description') !== -1) {
// Get current removed fields count
currentfn = get_removed_field_count();
// If currentfn is less than removed field do nothing,
// else subtract 1 and change html
if (removeNum < currentfn) {
newNum = currentfn - 1;
updateFieldNumbers(eObj, eText, newNum);
}
}
});
return matches;
}
/**
* @param button
* @param form_box_count
*/
function removeFieldClickEvent(button, form_box_count) {
var confirmed = confirm('Are you sure you want to remove this field? Hit "Cancel" to keep the field or "OK" to delete the field.');
if (confirmed) {
// Modify all other fields by lowering field count
let matches;
let removeNum; // field count being removed
if (jQuery(button).attr('id').match(/select/g)) {
// Get current removed fields count
matches = jQuery(button).prev().prev().find('textarea').attr('name').match(/:[0-9]+/);
removeNum = matches[0].replace(':', '');
} else {
// Get current removed fields count
matches = jQuery(button).prev().attr('name').match(/:[0-9]+/);
removeNum = parseInt(matches[0].replace(':', ''));
}
console.log(removeNum);
console.log(form_box_count);
// Update all existing fields for this box
matches = updateBoxFieldsOnRemove(form_box_count, matches, removeNum);
// Remove the field container
jQuery(button).parent().parent().remove();
}
}
function getBoxTotalFieldCount(bn) {
let fields = jQuery('#form_box_field_wrap-form_box_' + bn.toString()).children();
let box_total_field_count = fields.length;
return box_total_field_count;
}
/**
* @param button
* @param form_box_count
* @returns {*}
*/
function removeBoxEvent(button, form_box_count) {
var confirmed = confirm('Are you sure you want to remove this box? Removing the box removes all fields it contains! Hit "Cancel" to keep the box or "OK" to delete the box.');
if (confirmed) {
// Get this removed box number
var rbn = parseInt(jQuery(button).attr('id').replace(/remove_this_box-form_box_/, ''));
console.log(rbn);
jQuery(button).parent().parent().remove();
// Grab all the boxes
jQuery('[id^="box-form_box_"]').each(
function (iter, box) {
// Get the current box number we are working with
var bn = parseInt(jQuery(box).attr('id').replace(/box-form_box_/, ''));
var nbn = bn - 1;
var nbnd = 'form_box_' + nbn.toString();
console.log(bn);
/*************************************************
* Grab all the form box html elements and remove 1 for the "box count"
***************************************************/
// If not the first box and greater than removed box
if (bn !== 1 && bn > rbn) {
jQuery('[id*="form_box_' + bn + '"]').each(
function () {
// Build regex
let regExp = new RegExp('form_box_' + bn);
// Change id fields
jQuery(this).attr('id', jQuery(this).attr('id').replace(regExp, nbnd));
if (!jQuery.isEmptyObject(jQuery(this).attr('name'))) {
// Change name fields
jQuery(this).attr('name', jQuery(this).attr('name').replace(regExp, nbnd));
}
if (!jQuery.isEmptyObject(jQuery(this).attr('for'))) {
console.log(jQuery(this).text());
// Change for fields
jQuery(this).attr('for', jQuery(this).attr('for').replace(regExp, nbnd));
jQuery(this).text('Form Box ' + nbn);
}
});
// Remove all click events from box
jQuery('body').off('click', '#add_text-form_box_' + bn);
jQuery('body').off('click', '#add_img-form_box_' + bn);
jQuery('body').off('click', '#add_file-form_box_' + bn);
jQuery('body').off('click', '#add_textarea-form_box_' + bn);
jQuery('body').off('click', '#add_select-form_box_' + bn);
let box_total_field_count = getBoxTotalFieldCount(nbn);
setAddClickEvent(nbn, box_total_field_count);
}
});
// Take 1 from the overall box count
form_box_count--;
}
return form_box_count;
}
function setAddClickEvent(bn, box_total_field_count) {
/*******************
* Text Input
*******************/
jQuery('#add_text-form_box_' + bn).on('click', function () {
box_total_field_count++;
var cloned_field = jQuery('#form_field_text_template').clone(true);
var field_count = jQuery('[id^="form_box_' + bn + '-text_field_wrap_"]').length + 1;
var duplicate = jQuery('[id^="form_box_' + bn + '-text_field_wrap_' + field_count + '"]').length;
// add +1 to field count until duplicate is false
while (duplicate) {
if (duplicate) {
field_count = field_count + 1;
}
duplicate = jQuery('[id^="form_box_' + bn + '-text_field_wrap_' + field_count + '"]').length;
}
cloned_field.attr('id', 'form_box_' + bn + '-text_field_wrap_' + field_count).attr('name', 'form_box_' + bn + '-text_field_wrap_' + field_count).addClass('cfb-field-container'); // text field div
cloned_field.find('#form_field_text_template_field_name').attr('id', 'form_box_' + bn + '-text_field_name_' + field_count).attr('name', 'form_box_' + bn + '-fields-text:' + box_total_field_count + '_name'); // text field name
cloned_field.find('[for="form_field_text_template_field_name"]').attr('for', 'form_box_' + bn + '-text_field_name_' + field_count).text('Text Field '); // text field name lbl
cloned_field.find('#form_field_text_template_field_description').attr('id', 'form_box_' + bn + '-text_field_description_' + field_count).attr('name', 'form_box_' + bn + '-fields-text:' + box_total_field_count + '_description'); // text field description
cloned_field.find('[for="form_field_text_template_field_description"]').attr('for', 'form_box_' + bn + '-text_field_description_' + field_count).text('Text Description for '); // text field description lbl
// remove field
cloned_field.find('#remove_this_field').attr('id', 'remove_form_box_' + bn + '-text_field_' + field_count)
.on('click', function () {
removeFieldClickEvent(this, bn);
box_total_field_count--;
}); // end remove field button;
jQuery('#form_box_field_wrap-form_box_' + bn).append(cloned_field);
});
/*******************
* Image Input
*******************/
jQuery('#add_img-form_box_' + bn).on('click', function () {
box_total_field_count++;
var cloned_field = jQuery('#form_field_img_template').clone(true);
var field_count = jQuery('[id^="form_box_' + bn + '-img_field_wrap_"]').length + 1;
var duplicate = jQuery('[id^="form_box_' + bn + '-img_field_wrap_' + field_count + '"]').length;
// add +1 to field count until duplicate is false
while (duplicate) {
if (duplicate) {
field_count = field_count + 1;
}
duplicate = jQuery('[id^="form_box_' + bn + '-img_field_wrap_' + field_count + '"]').length;
}
cloned_field.attr('id', 'form_box_' + bn + '-img_field_wrap_' + field_count).attr('name', 'form_box_' + bn + '-img_field_wrap_' + field_count).addClass('cfb-field-container'); // image field div
cloned_field.find('#form_field_img_template_field_name').attr('id', 'form_box_' + bn + '-img_field_name_' + field_count).attr('name', 'form_box_' + bn + '-fields-image:' + box_total_field_count + '_name'); // image field name
cloned_field.find('[for="form_field_img_template_field_name"]').attr('for', 'form_box_' + bn + '-img_field_name_' + field_count).text('Image Field '); // image field name lbl
cloned_field.find('#form_field_img_template_field_description').attr('id', 'form_box_' + bn + '-img_field_description_' + field_count).attr('name', 'form_box_' + bn + '-fields-image:' + box_total_field_count + '_description'); // image field description
cloned_field.find('[for="form_field_img_template_field_description"]').attr('for', 'form_box_' + bn + '-img_field_description_' + field_count).text('Image Description for '); // image field description lbl
// remove field
cloned_field.find('#remove_this_field').attr('id', 'remove_form_box_' + bn + '-img_field_' + field_count)
.on('click', function(){
removeFieldClickEvent(this, bn);
box_total_field_count--;
}); // end remove field button;
jQuery('#form_box_field_wrap-form_box_' + bn).append(cloned_field);
});
console.log('#add_textarea-form_box_' + bn);
/*******************
* File Input
*******************/
jQuery('#add_file-form_box_' + bn).on('click', function () {
box_total_field_count++;
var cloned_field = jQuery('#form_field_file_template').clone(true);
var field_count = jQuery('[id^="form_box_' + bn + '-file_field_wrap_"]').length + 1;
var duplicate = jQuery('[id^="form_box_' + bn + '-file_field_wrap_' + field_count + '"]').length;
// add +1 to field count until duplicate is false
while (duplicate) {
if (duplicate) {
field_count = field_count + 1;
}
duplicate = jQuery('[id^="form_box_' + bn + '-file_field_wrap_' + field_count + '"]').length;
}
cloned_field.attr('id', 'form_box_' + bn + '-file_field_wrap_' + field_count).attr('name', 'form_box_' + bn + '-file_field_wrap_' + field_count).addClass('cfb-field-container'); // text field div // file field div
cloned_field.find('#form_field_file_template_field_name').attr('id', 'form_box_' + bn + '-file_field_name_' + field_count).attr('name', 'form_box_' + bn + '-fields-file:' + box_total_field_count + '_name'); // file field name
cloned_field.find('[for="form_field_file_template_field_name"]').attr('for', 'form_box_' + bn + '-file_field_name_' + field_count).text('File Field '); // file field name lbl
cloned_field.find('#form_field_file_template_field_description').attr('id', 'form_box_' + bn + '-file_field_description_' + field_count).attr('name', 'form_box_' + bn + '-fields-file:' + box_total_field_count + '_description'); // file field description
cloned_field.find('[for="form_field_file_template_field_description"]').attr('for', 'form_box_' + bn + '-file_field_description_' + field_count).text('File Description for '); // file field description lbl
// remove field
cloned_field.find('#remove_this_field').attr('id', 'remove_form_box_' + bn + '-file_field_' + field_count)
.on('click', function(){
removeFieldClickEvent(this, bn);
box_total_field_count--;
}); // end remove field button;
jQuery('#form_box_field_wrap-form_box_' + bn).append(cloned_field);
});
console.log('#add_file-form_box_' + bn);
/*******************
* Text Area Input
*******************/
jQuery('#add_textarea-form_box_' + bn).on('click', function () {
box_total_field_count++;
var cloned_field = jQuery('#form_field_textarea_template').clone(true);
var field_count = jQuery('[id^="form_box_' + bn + '-textarea_field_wrap_"]').length + 1;
var duplicate = jQuery('[id^="form_box_' + bn + '-textarea_field_wrap_' + field_count + '"]').length;
// add +1 to field count until duplicate is false
while (duplicate) {
if (duplicate) {
field_count = field_count + 1;
}
duplicate = jQuery('[id^="form_box_' + bn + '-textarea_field_wrap_' + field_count + '"]').length;
}
cloned_field.attr('id', 'form_box_' + bn + '-textarea_field_wrap_' + field_count).attr('name', 'form_box_' + bn + '-textarea_field_wrap_' + field_count).addClass('cfb-field-container'); // textarea field div
cloned_field.find('#form_field_textarea_template_field_name').attr('id', 'form_box_' + bn + '-textarea_field_name_' + field_count).attr('name', 'form_box_' + bn + '-fields-textarea:' + box_total_field_count + '_name'); // textarea field name
cloned_field.find('[for="form_field_textarea_template_field_name"]').attr('for', 'form_box_' + bn + '-textarea_field_name_' + field_count).text('Textarea Field '); // textarea field name lbl
cloned_field.find('#form_field_textarea_template_field_description').attr('id', 'form_box_' + bn + '-textarea_field_description_' + field_count).attr('name', 'form_box_' + bn + '-fields-textarea:' + box_total_field_count + '_description'); // textarea field description
cloned_field.find('[for="form_field_textarea_template_field_description"]').attr('for', 'form_box_' + bn + '-textarea_field_description_' + field_count).text('Textarea Description for '); // textarea field description lbl
// remove field
cloned_field.find('#remove_this_field').attr('id', 'remove_form_box_' + bn + '-textarea_field_' + field_count)
.on('click', function(){
removeFieldClickEvent(this, bn);
box_total_field_count--;
}); // end remove field button;
jQuery('#form_box_field_wrap-form_box_' + bn).append(cloned_field);
});
console.log('#add_select-form_box_' + bn);
/*******************
* Select Input
*******************/
jQuery('#add_select-form_box_' + bn).on('click', function () { // add select button
box_total_field_count++;
var select_option_total_field_count = box_total_field_count; // store so our options will have correct select field
var cloned_field = jQuery('#form_field_select_template').clone(true);
var field_count = jQuery('[id^="form_box_' + bn + '-select_field_wrap_"]').length + 1;
var duplicate = jQuery('[id^="form_box_' + bn + '-select_field_wrap_' + field_count + '"]').length;
// add +1 to field count until duplicate is false
while (duplicate) {
if (duplicate) {
field_count = field_count + 1;
}
duplicate = jQuery('[id^="form_box_' + bn + '-select_field_wrap_' + field_count + '"]').length;
}
cloned_field.find('#add_form_field_select_button').attr('id', 'form_box_' + bn + '_add_form_field_select_button_' + field_count); // select field option button
cloned_field.attr('id', 'form_box_' + bn + '-select_field_wrap_' + field_count).addClass('cfb-field-container'); // select field div
cloned_field.find('#form_field_select_template_field_name').attr('id', 'form_box_' + bn + '-select_field_name_' + field_count).attr('name', 'form_box_' + bn + '-fields-select:' + box_total_field_count + '_name'); // select field name
cloned_field.find('#form_field_select_template_field_name_field').attr('id', 'form_box_' + bn + '-select_field_name_' + field_count).attr('name', 'form_box_' + bn + '-fields-select:' + box_total_field_count + '_name'); // select field name
cloned_field.find('[for="form_field_select_template_field_name_field"]').attr('for', 'form_box_' + bn + '-select_field_name_' + field_count).text('Select Field '); // select field name lbl
cloned_field.find('#form_field_select_template_field_description').attr('id', 'form_box_' + bn + '-select_field_description_' + field_count).attr('name', 'form_box_' + bn + '-fields-select:' + box_total_field_count + '_description'); // select field description
cloned_field.find('#form_field_select_template_field_description_field').attr('id', 'form_box_' + bn + '-select_field_description_' + field_count).attr('name', 'form_box_' + bn + '-fields-select:' + box_total_field_count + '_description'); // select field description
cloned_field.find('[for="form_field_select_template_field_description_field"]').attr('for', 'form_box_' + bn + '-select_field_description_' + field_count).text('Select Description for '); // select field description lbl
// select field
cloned_field.find('#form_field_select_template_field_select_options').attr('id', 'form_box_' + bn + '-select_field_options_field_wrap_' + field_count); // select field options div
cloned_field.find('#form_field_select_template_field_select_option_field_wrap').attr('id', 'form_box_' + bn + '-select_field_' + field_count + '_option_field_wrap_1'); // select field option wrap 1
cloned_field.find('#form_field_select_template_field_select_option_field').attr('id', 'form_box_' + bn + '-select_field_' + field_count + '_option_field_1').attr('name', 'form_box_' + bn + '-fields-select:' + box_total_field_count + '_option_fields[]'); // select field option 1
cloned_field.find('[for="form_field_select_template_field_select_option_field"]').attr('for', 'form_box_' + bn + '-select_field_' + field_count + '_option_field_1').text('Select Field Option'); // select field option
cloned_field.find('#remove_form_field_select_button').remove(); // remove from template because 1st option must stay
// remove field
cloned_field.find('#remove_this_field').attr('id', 'remove_form_box_' + bn + '-select_field_' + field_count)
.on('click', function(){
removeFieldClickEvent(this, bn);
box_total_field_count--;
}); // end remove field button;
jQuery('#form_box_field_wrap-form_box_' + bn).append(cloned_field);
jQuery('[id^="form_box_' + bn + '_add_form_field_select_button_' + field_count + '"]').on('click', function () { // add select option button
var cloned_option_field = jQuery('#form_field_select_template_field_select_option_field_wrap').clone();
var option_field_count = jQuery('[id^="form_box_' + bn + '-select_field_' + field_count + '_option_field_wrap_"]').length;
var option_duplicate = jQuery('[id^="form_box_' + bn + '-select_field_' + field_count + '_option_field_wrap_' + option_field_count + '"]').length;
// add +1 to field count until option duplicate is false
while (option_duplicate) {
if (option_duplicate) {
option_field_count = option_field_count + 1;
}
option_duplicate = jQuery('[id^="form_box_' + bn + '-select_field_' + field_count + '_option_field_wrap_' + option_field_count + '"]').length;
}
cloned_option_field.attr('id', 'form_box_' + bn + '-select_field_' + field_count + '_option_field_wrap_' + option_field_count); // select option field div
cloned_option_field.find('#remove_form_field_select_button').attr('id', 'form_box_' + bn + '_remove_form_field_select_button_' + field_count + '_option_field_' + option_field_count)
.on('click', function () {
jQuery(this).parent().remove();
}); // remove select option
cloned_option_field.find('#form_field_select_template_field_select_option_field').attr('id', 'form_box_' + bn + '-select_field_' + field_count + '_option_field_' + option_field_count).attr('name', 'form_box_' + bn + '-fields-select:' + select_option_total_field_count + '_option_fields[]'); // select field option name
cloned_option_field.find('[for="form_field_select_template_field_select_option_field"]').attr('for', 'form_box_' + bn + '-select_field_' + field_count + '_option_field_' + option_field_count).text('Select Field Option'); // select field option
jQuery('#form_box_' + bn + '-select_field_options_field_wrap_' + field_count).append(cloned_option_field).addClass('cfb-field-select-option-container'); // text field div;
});
});
return box_total_field_count;
}
jQuery(document).ready(function () {
let boxes = jQuery('[id^="box-form_box_"]');
var form_box_count = boxes.length; // total amount of boxes on the screen
jQuery(".tablenav select").select2();
jQuery(".populate").select2();
/************
UI Behavior - Static Fields
************/
/*
See https://stackoverflow.com/questions/17771187/jquery-ui-sortable-drop-event
*/
jQuery('[id^="form_box_field_wrap-form_box_"]').sortable({
update: function( ) {
console.log(this);
console.log(jQuery(this));
updateBoxFieldsOnDrop(this);
}
});
// Gather all form boxes currently on the screen
boxes.each(function () {
let bn = parseInt(jQuery(this).attr('id').replace(/box-form_box_/, ''));
let box_total_field_count = getBoxTotalFieldCount(bn);
let fields = jQuery('#form_box_field_wrap-form_box_' + bn.toString()).children();
// Set Remove Click Event for Box
jQuery('#remove_this_box-form_box_' + bn).on('click', function () {
form_box_count = removeBoxEvent(this, form_box_count);
});
// Set Add Field Click Events
box_total_field_count = setAddClickEvent(bn, box_total_field_count);
// Set Add Click event for options of select fields
jQuery(this).find('.add-select-option-button').on('click', function () { // add select option button
var matches = jQuery(this).parent().parent().prev().find('textarea').attr('name').match(/:[0-9]/g, '');
var select_option_total_field_count = parseInt(matches[0].replace(/:/g, ''));
var field_count = jQuery(this).parent().parent().find('[id^="form_box_' + bn + '-select_field_wrap_"]').length + 1;
var cloned_option_field = jQuery('#form_field_select_template_field_select_option_field_wrap').clone();
var option_field_count = jQuery(this).parent().parent().find('[id^="form_box_' + bn + '-select_field_' + field_count + '_option_field_wrap_"]').length;
var option_duplicate = jQuery(this).parent().parent().find('[id^="form_box_' + bn + '-select_field_' + field_count + '_option_field_wrap_' + option_field_count + '"]').length;
// add +1 to field count until option duplicate is false
while (option_duplicate) {
if (option_duplicate) {
option_field_count = option_field_count + 1;
}
option_duplicate = jQuery('[id^="form_box_' + bn + '-select_field_' + field_count + '_option_field_wrap_' + option_field_count + '"]').length;
}
cloned_option_field.attr('id', 'form_box_' + bn + '-select_field_' + field_count + '_option_field_wrap_' + option_field_count); // select option field div
cloned_option_field.find('#remove_form_field_select_button').attr('id', 'form_box_' + bn + '_remove_form_field_select_button_' + field_count + '_option_field_' + option_field_count)
.on('click', function () {
jQuery(this).parent().remove();
}).addClass('red-highlight'); // remove select option
cloned_option_field.find('#form_field_select_template_field_select_option_field').attr('id', 'form_box_' + bn + '-select_field_' + field_count + '_option_field_' + option_field_count).attr('name', 'form_box_' + bn + '-fields-select:' + select_option_total_field_count + '_option_fields[]'); // select field option name
cloned_option_field.find('[for="form_field_select_template_field_select_option_field"]').attr('for', 'form_box_' + bn + '-select_field_' + field_count + '_option_field_' + option_field_count).text('Select Field Option'); // select field option
jQuery(this).parent().parent().children().last().append(cloned_option_field).addClass('cfb-field-select-option-container'); // select field div;
});
// Gather all box fields on the screen
fields.each(function () {
// Set remove click event for field
box_total_field_count = jQuery(this).find('.red-highlight')
.on('click', function () {
removeFieldClickEvent(this, bn);
box_total_field_count--;
return box_total_field_count;
});// end remove field button;
// Set remove click event for options of select fields
jQuery(this).find('.red_button')
.on('click', function () {
// Remove option
jQuery(this).parent().remove();
}).addClass('red-highlight'); // end remove field button;
});
});
/************
UI Behavior - Dynamic Fields
************/
jQuery('[id$="custom_field_builder"]').on('change', function () {
if (jQuery(this).val() == 'yes') {
jQuery('#form_box_creator_wrap').slideDown();
jQuery('#form_box_field_wrap').show();
} else {
jQuery('#form_box_creator_wrap').slideUp();
jQuery('#form_box_field_wrap').hide();
}
});
jQuery('#add_form_box_button').on('click', function () {
var currentFormBox = jQuery('[id^="box-form_box_"]').length+1; // used for field add append - need local var
var box_total_field_count = 0;
var cloned_box = jQuery('#form_box').clone();
form_box_count++;
var box_duplicate = jQuery('[id^="box-form_box_' + form_box_count + '"]').length;
// add +1 to box count until duplicate is false
while (box_duplicate) {
if (box_duplicate) {
form_box_count = form_box_count + 1;
}
box_duplicate = jQuery('[id^="box-form_box_' + form_box_count + '"]').length;
}
// if(form_box_count === 1) {
cloned_box.attr('id', 'box-form_box_' + form_box_count); // box
cloned_box.find('#form_box_name').attr('id', 'box_name-form_box_' + form_box_count); // box name div
cloned_box.find('#form_box_name_field').attr('id', 'box_name-form_box_' + form_box_count).attr('name', 'form_box_' + form_box_count + '-name'); // box name
cloned_box.find('#form_box_description_field').attr('id', 'box_description-form_box_' + form_box_count).attr('name', 'form_box_' + form_box_count + '-description'); // box description
cloned_box.find('[for="form_box_name_field"]').attr('for', 'box_name-form_box_' + form_box_count).attr('id', 'box_name-form_box_' + form_box_count).text('Form Box ' + form_box_count); // box name lbl
cloned_box.find('#add_form_field_buttons').attr('id', 'add_form_field_buttons-form_box_' + form_box_count).addClass('button-container'); // field buttons div
cloned_box.find('#add_text').attr('id', 'add_text-form_box_' + form_box_count).attr('name', 'add_text-form_box_' + form_box_count); // add text
cloned_box.find('#add_img').attr('id', 'add_img-form_box_' + form_box_count).attr('name', 'add_img-form_box_' + form_box_count); // add img
cloned_box.find('#add_file').attr('id', 'add_file-form_box_' + form_box_count).attr('name', 'add_file-form_box_' + form_box_count); // add file
cloned_box.find('#add_textarea').attr('id', 'add_textarea-form_box_' + form_box_count).attr('name', 'add_textarea-form_box_' + form_box_count); // add textarea
cloned_box.find('#add_select').attr('id', 'add_select-form_box_' + form_box_count).attr('name', 'add_select-form_box_' + form_box_count); // add select
cloned_box.find('#form_box_field_wrap').attr('id', 'form_box_field_wrap-form_box_' + form_box_count)
.sortable({
update: function( ) {
console.log(this);
console.log(jQuery(this));
updateBoxFieldsOnDrop(this);
}
}); // field wrap
cloned_box.find('#remove_this_box').attr('id', 'remove_this_box-form_box_' + form_box_count); // remove box
jQuery('#form_box_creator_wrap').append(cloned_box); // append new box
//remove box click event
jQuery('#remove_this_box-form_box_' + form_box_count).on('click', function () {
form_box_count = removeBoxEvent(this, form_box_count);
});
console.log('#add_text-form_box_' + form_box_count);
/*******************
* Text Input
*******************/
jQuery('#add_text-form_box_' + form_box_count).on('click', function () {
box_total_field_count++;
var cloned_field = jQuery('#form_field_text_template').clone(true);
var field_count = jQuery('[id^="form_box_' + form_box_count + '-text_field_wrap_"]').length + 1;
var duplicate = jQuery('[id^="form_box_' + form_box_count + '-text_field_wrap_' + field_count + '"]').length;
// add +1 to field count until duplicate is false
while (duplicate) {
if (duplicate) {
field_count = field_count + 1;
}
duplicate = jQuery('[id^="form_box_' + form_box_count + '-text_field_wrap_' + field_count + '"]').length;
}
cloned_field.attr('id', 'form_box_' + form_box_count + '-text_field_wrap_' + field_count).attr('name', 'form_box_' + form_box_count + '-text_field_wrap_' + field_count).addClass('cfb-field-container'); // text field div
cloned_field.find('#form_field_text_template_field_name').attr('id', 'form_box_' + form_box_count + '-text_field_name_' + field_count).attr('name', 'form_box_' + form_box_count + '-fields-text:' + box_total_field_count + '_name'); // text field name
cloned_field.find('[for="form_field_text_template_field_name"]').attr('for', 'form_box_' + form_box_count + '-text_field_name_' + field_count).text('Text Field '); // text field name lbl
cloned_field.find('#form_field_text_template_field_description').attr('id', 'form_box_' + form_box_count + '-text_field_description_' + field_count).attr('name', 'form_box_' + form_box_count + '-fields-text:' + box_total_field_count + '_description'); // text field description
cloned_field.find('[for="form_field_text_template_field_description"]').attr('for', 'form_box_' + form_box_count + '-text_field_description_' + field_count).text('Text Description for '); // text field description lbl
// remove field
cloned_field.find('#remove_this_field').attr('id', 'remove_form_box_' + form_box_count + '-text_field_' + field_count)
.on('click', function(){
removeFieldClickEvent(this, form_box_count);
box_total_field_count--;
}); // end remove field button;
jQuery('#form_box_field_wrap-form_box_' + currentFormBox).append(cloned_field);
});
console.log('#add_img-form_box_' + form_box_count);
/*******************
* Image Input
*******************/
jQuery('#add_img-form_box_' + form_box_count).on('click', function () {
box_total_field_count++;
var cloned_field = jQuery('#form_field_img_template').clone(true);
var field_count = jQuery('[id^="form_box_' + form_box_count + '-img_field_wrap_"]').length + 1;
var duplicate = jQuery('[id^="form_box_' + form_box_count + '-img_field_wrap_' + field_count + '"]').length;
// add +1 to field count until duplicate is false
while (duplicate) {
if (duplicate) {
field_count = field_count + 1;
}
duplicate = jQuery('[id^="form_box_' + form_box_count + '-img_field_wrap_' + field_count + '"]').length;
}
cloned_field.attr('id', 'form_box_' + form_box_count + '-img_field_wrap_' + field_count).attr('name', 'form_box_' + form_box_count + '-img_field_wrap_' + field_count).addClass('cfb-field-container'); // image field div
cloned_field.find('#form_field_img_template_field_name').attr('id', 'form_box_' + form_box_count + '-img_field_name_' + field_count).attr('name', 'form_box_' + form_box_count + '-fields-image:' + box_total_field_count + '_name'); // image field name
cloned_field.find('[for="form_field_img_template_field_name"]').attr('for', 'form_box_' + form_box_count + '-img_field_name_' + field_count).text('Image Field '); // image field name lbl
cloned_field.find('#form_field_img_template_field_description').attr('id', 'form_box_' + form_box_count + '-img_field_description_' + field_count).attr('name', 'form_box_' + form_box_count + '-fields-image:' + box_total_field_count + '_description'); // image field description
cloned_field.find('[for="form_field_img_template_field_description"]').attr('for', 'form_box_' + form_box_count + '-img_field_description_' + field_count).text('Image Description for '); // image field description lbl
// remove field
cloned_field.find('#remove_this_field').attr('id', 'remove_form_box_' + form_box_count + '-img_field_' + field_count)
.on('click', function(){
removeFieldClickEvent(this, form_box_count);
box_total_field_count--;
}); // end remove field button;
jQuery('#form_box_field_wrap-form_box_' + currentFormBox).append(cloned_field);
});
console.log('#add_textarea-form_box_' + form_box_count);
/*******************
* File Input
*******************/
jQuery('#add_file-form_box_' + form_box_count).on('click', function () {
box_total_field_count++;
var cloned_field = jQuery('#form_field_file_template').clone(true);
var field_count = jQuery('[id^="form_box_' + form_box_count + '-file_field_wrap_"]').length + 1;
var duplicate = jQuery('[id^="form_box_' + form_box_count + '-file_field_wrap_' + field_count + '"]').length;
// add +1 to field count until duplicate is false
while (duplicate) {
if (duplicate) {
field_count = field_count + 1;
}
duplicate = jQuery('[id^="form_box_' + form_box_count + '-file_field_wrap_' + field_count + '"]').length;
}
cloned_field.attr('id', 'form_box_' + form_box_count + '-file_field_wrap_' + field_count).attr('name', 'form_box_' + form_box_count + '-file_field_wrap_' + field_count).addClass('cfb-field-container'); // text field div // file field div
cloned_field.find('#form_field_file_template_field_name').attr('id', 'form_box_' + form_box_count + '-file_field_name_' + field_count).attr('name', 'form_box_' + form_box_count + '-fields-file:' + box_total_field_count + '_name'); // file field name
cloned_field.find('[for="form_field_file_template_field_name"]').attr('for', 'form_box_' + form_box_count + '-file_field_name_' + field_count).text('File Field '); // file field name lbl
cloned_field.find('#form_field_file_template_field_description').attr('id', 'form_box_' + form_box_count + '-file_field_description_' + field_count).attr('name', 'form_box_' + form_box_count + '-fields-file:' + box_total_field_count + '_description'); // file field description
cloned_field.find('[for="form_field_file_template_field_description"]').attr('for', 'form_box_' + form_box_count + '-file_field_description_' + field_count).text('File Description for '); // file field description lbl
// remove field
cloned_field.find('#remove_this_field').attr('id', 'remove_form_box_' + form_box_count + '-file_field_' + field_count)
.on('click', function(){
removeFieldClickEvent(this, form_box_count);
box_total_field_count--;
}); // end remove field button;
jQuery('#form_box_field_wrap-form_box_' + currentFormBox).append(cloned_field);
});
console.log('#add_file-form_box_' + form_box_count);
/*******************
* Text Area Input
*******************/
jQuery('#add_textarea-form_box_' + form_box_count).on('click', function () {
box_total_field_count++;
var cloned_field = jQuery('#form_field_textarea_template').clone(true);
var field_count = jQuery('[id^="form_box_' + form_box_count + '-textarea_field_wrap_"]').length + 1;
var duplicate = jQuery('[id^="form_box_' + form_box_count + '-textarea_field_wrap_' + field_count + '"]').length;
// add +1 to field count until duplicate is false
while (duplicate) {
if (duplicate) {
field_count = field_count + 1;
}
duplicate = jQuery('[id^="form_box_' + form_box_count + '-textarea_field_wrap_' + field_count + '"]').length;
}
cloned_field.attr('id', 'form_box_' + form_box_count + '-textarea_field_wrap_' + field_count).attr('name', 'form_box_' + form_box_count + '-textarea_field_wrap_' + field_count).addClass('cfb-field-container'); // textarea field div
cloned_field.find('#form_field_textarea_template_field_name').attr('id', 'form_box_' + form_box_count + '-textarea_field_name_' + field_count).attr('name', 'form_box_' + form_box_count + '-fields-textarea:' + box_total_field_count + '_name'); // textarea field name
cloned_field.find('[for="form_field_textarea_template_field_name"]').attr('for', 'form_box_' + form_box_count + '-textarea_field_name_' + field_count).text('Textarea Field '); // textarea field name lbl
cloned_field.find('#form_field_textarea_template_field_description').attr('id', 'form_box_' + form_box_count + '-textarea_field_description_' + field_count).attr('name', 'form_box_' + form_box_count + '-fields-textarea:' + box_total_field_count + '_description'); // textarea field description
cloned_field.find('[for="form_field_textarea_template_field_description"]').attr('for', 'form_box_' + form_box_count + '-textarea_field_description_' + field_count).text('Textarea Description for '); // textarea field description lbl
// remove field
cloned_field.find('#remove_this_field').attr('id', 'remove_form_box_' + form_box_count + '-textarea_field_' + field_count)
.on('click', function(){
removeFieldClickEvent(this, form_box_count);
box_total_field_count--;
}); // end remove field button;
jQuery('#form_box_field_wrap-form_box_' + currentFormBox).append(cloned_field);
});
console.log('#add_select-form_box_' + form_box_count);
/*******************
* Select Input
*******************/
jQuery('#add_select-form_box_' + form_box_count).on('click', function () { // add select button
box_total_field_count++;
var select_option_total_field_count = box_total_field_count; // store so our options will have correct select field
var cloned_field = jQuery('#form_field_select_template').clone(true);
var field_count = jQuery('[id^="form_box_' + form_box_count + '-select_field_wrap_"]').length + 1;
var duplicate = jQuery('[id^="form_box_' + form_box_count + '-select_field_wrap_' + field_count + '"]').length;
// add +1 to field count until duplicate is false
while (duplicate) {
if (duplicate) {
field_count = field_count + 1;
}
duplicate = jQuery('[id^="form_box_' + form_box_count + '-select_field_wrap_' + field_count + '"]').length;
}
cloned_field.find('#add_form_field_select_button').attr('id', 'form_box_' + form_box_count + '_add_form_field_select_button_' + field_count); // select field option button
cloned_field.attr('id', 'form_box_' + form_box_count + '-select_field_wrap_' + field_count).addClass('cfb-field-container'); // select field div
cloned_field.find('#form_field_select_template_field_name').attr('id', 'form_box_' + form_box_count + '-select_field_name_' + field_count).attr('name', 'form_box_' + form_box_count + '-fields-select:' + box_total_field_count + '_name'); // select field name
cloned_field.find('#form_field_select_template_field_name_field').attr('id', 'form_box_' + form_box_count + '-select_field_name_' + field_count).attr('name', 'form_box_' + form_box_count + '-fields-select:' + box_total_field_count + '_name'); // select field name
cloned_field.find('[for="form_field_select_template_field_name_field"]').attr('for', 'form_box_' + form_box_count + '-select_field_name_' + field_count).text('Select Field '); // select field name lbl
cloned_field.find('#form_field_select_template_field_description').attr('id', 'form_box_' + form_box_count + '-select_field_description_' + field_count).attr('name', 'form_box_' + form_box_count + '-fields-select:' + box_total_field_count + '_description'); // select field description
cloned_field.find('#form_field_select_template_field_description_field').attr('id', 'form_box_' + form_box_count + '-select_field_description_' + field_count).attr('name', 'form_box_' + form_box_count + '-fields-select:' + box_total_field_count + '_description'); // select field description
cloned_field.find('[for="form_field_select_template_field_description_field"]').attr('for', 'form_box_' + form_box_count + '-select_field_description_' + field_count).text('Select Description for '); // select field description lbl
// select field
cloned_field.find('#form_field_select_template_field_select_options').attr('id', 'form_box_' + form_box_count + '-select_field_options_field_wrap_' + field_count); // select field options div
cloned_field.find('#form_field_select_template_field_select_option_field_wrap').attr('id', 'form_box_' + form_box_count + '-select_field_' + field_count + '_option_field_wrap_1'); // select field option wrap 1
cloned_field.find('#form_field_select_template_field_select_option_field').attr('id', 'form_box_' + form_box_count + '-select_field_' + field_count + '_option_field_1').attr('name', 'form_box_' + form_box_count + '-fields-select:' + box_total_field_count + '_option_fields[]'); // select field option 1
cloned_field.find('[for="form_field_select_template_field_select_option_field"]').attr('for', 'form_box_' + form_box_count + '-select_field_' + field_count + '_option_field_1').text('Select Field Option'); // select field option
cloned_field.find('#remove_form_field_select_button').remove(); // remove from template because 1st option must stay
// remove field
cloned_field.find('#remove_this_field').attr('id', 'remove_form_box_' + form_box_count + '-select_field_' + field_count)
.on('click', function(){
removeFieldClickEvent(this, form_box_count);
box_total_field_count--;
}); // end remove field button;
jQuery('#form_box_field_wrap-form_box_' + currentFormBox).append(cloned_field);
jQuery('[id^="form_box_' + form_box_count + '_add_form_field_select_button_' + field_count + '"]').on('click', function () { // add select option button
var cloned_option_field = jQuery('#form_field_select_template_field_select_option_field_wrap').clone();
var option_field_count = jQuery('[id^="form_box_' + form_box_count + '-select_field_' + field_count + '_option_field_wrap_"]').length;
var option_duplicate = jQuery('[id^="form_box_' + form_box_count + '-select_field_' + field_count + '_option_field_wrap_' + option_field_count + '"]').length;
// add +1 to field count until option duplicate is false
while (option_duplicate) {
if (option_duplicate) {
option_field_count = option_field_count + 1;
}
option_duplicate = jQuery('[id^="form_box_' + form_box_count + '-select_field_' + field_count + '_option_field_wrap_' + option_field_count + '"]').length;
}
cloned_option_field.attr('id', 'form_box_' + form_box_count + '-select_field_' + field_count + '_option_field_wrap_' + option_field_count); // select option field div
cloned_option_field.find('#remove_form_field_select_button').attr('id', 'form_box_' + form_box_count + '_remove_form_field_select_button_' + field_count + '_option_field_' + option_field_count)
.on('click', function () {
jQuery(this).parent().remove();
}); // remove select option
cloned_option_field.find('#form_field_select_template_field_select_option_field').attr('id', 'form_box_' + form_box_count + '-select_field_' + field_count + '_option_field_' + option_field_count).attr('name', 'form_box_' + form_box_count + '-fields-select:' + select_option_total_field_count + '_option_fields[]'); // select field option name
cloned_option_field.find('[for="form_field_select_template_field_select_option_field"]').attr('for', 'form_box_' + form_box_count + '-select_field_' + field_count + '_option_field_' + option_field_count).text('Select Field Option'); // select field option
jQuery('#form_box_' + form_box_count + '-select_field_options_field_wrap_' + field_count).append(cloned_option_field).addClass('cfb-field-select-option-container'); // text field div;
});
});
// }
});
/************
UI Validation
************/
jQuery('#post').submit(function (event) {
if (jQuery('[id$="custom_field_builder"] .select2-choice span').text() == 'Yes') {
jQuery('[id^="box-form"]').each(function () {
jQuery(this).find(':input').each(function (i, e) {
var e_id = jQuery(e).attr('id');
//if( i < 6){ // only check the fields for the boxes
if (jQuery(e).val() == '') {
console.log(jQuery(e).val());
jQuery(e).parent().addClass('form-invalid');
event.preventDefault();
} else {
jQuery(e).parent().removeClass('form-invalid');
}
//}
});
});
}
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
OSZAR »