diff --git a/system/admin/views/add-content.html.php b/system/admin/views/add-content.html.php
index 3b21787..d1b4963 100644
--- a/system/admin/views/add-content.html.php
+++ b/system/admin/views/add-content.html.php
@@ -225,10 +225,11 @@ $( function() {
info;?>
+
diff --git a/system/admin/views/add-page.html.php b/system/admin/views/add-page.html.php
index 0ab6cfb..4e78491 100644
--- a/system/admin/views/add-page.html.php
+++ b/system/admin/views/add-page.html.php
@@ -85,10 +85,11 @@ if ($type == 'is_page') {
info;?>
+
diff --git a/system/admin/views/edit-content.html.php b/system/admin/views/edit-content.html.php
index 0260569..da96a6e 100644
--- a/system/admin/views/edit-content.html.php
+++ b/system/admin/views/edit-content.html.php
@@ -274,11 +274,12 @@ $( function() {
info;?>
-
+
+
diff --git a/system/admin/views/edit-page.html.php b/system/admin/views/edit-page.html.php
index 07e2fe6..9fb2697 100644
--- a/system/admin/views/edit-page.html.php
+++ b/system/admin/views/edit-page.html.php
@@ -197,10 +197,11 @@ if ($type == 'is_page' || $type == 'is_frontpage') {
info;?>
+
diff --git a/system/resources/js/form.builder.js b/system/resources/js/form.builder.js
index f962170..61e527b 100644
--- a/system/resources/js/form.builder.js
+++ b/system/resources/js/form.builder.js
@@ -1,5 +1,5 @@
/*!
- * Simple Form Builder for HTMLy - @author danpros
+ * Simple Form Builder for HTMLy - Author @danpros
*
* const fields = [];
*/
@@ -36,14 +36,6 @@ addOptionBtn.addEventListener('click', () => {
const col1Div = document.createElement('div');
col1Div.classList.add('col');
-
- const col2Div = document.createElement('div');
- col2Div.classList.add('col');
-
- const labelInput = document.createElement('input');
- labelInput.type = 'text';
- labelInput.placeholder = 'Label (required)';
- labelInput.setAttribute('class', 'option-label form-control');
const valueInput = document.createElement('input');
valueInput.type = 'text';
@@ -58,11 +50,8 @@ addOptionBtn.addEventListener('click', () => {
removeBtn.addEventListener('click', () => optionDiv.remove());
removeBtn.setAttribute('class', 'btn btn-danger');
- optionDiv.appendChild(labelInput);
+ col1Div.appendChild(valueInput);
optionDiv.appendChild(col1Div);
- optionDiv.appendChild(col2Div);
- col1Div.appendChild(labelInput);
- col2Div.appendChild(valueInput);
optionDiv.appendChild(removeBtn);
optionListEl.appendChild(optionDiv);
});
@@ -79,16 +68,14 @@ addFieldBtn.addEventListener('click', () => {
if (field.type === 'select') {
const options = Array.from(document.querySelectorAll('.option-item')).map(item => {
- const label = item.querySelector('.option-label').value.trim();
- const value = item.querySelector('.option-value').value.trim().replace(/\s+/g, ''); // Remove spaces
- return { label, value };
+ return item.querySelector('.option-value').value.trim().replace(/\s+/g, '');
});
- if (options.some(opt => !opt.label || !opt.value)) {
- alert("All options for a select field must have both label and value!");
+ if (options.some(opt => !opt)) {
+ alert("All options for a select must have a value!");
return;
}
- field.options = options;
+ field.options = options; // now an array of strings
}
if (!field.name || !field.label || !field.type) {
@@ -111,10 +98,12 @@ addFieldBtn.addEventListener('click', () => {
updatePreviewAndOutput();
- document.getElementById(field.name + '-form-preview').scrollIntoView({
- behavior: 'smooth'
- });
-
+ const target = document.getElementById(field.name + '-form-preview');
+ if (target) {
+ target.scrollIntoView({
+ behavior: 'smooth'
+ });
+ }
});
// Delete field logic
@@ -138,26 +127,20 @@ function editField(index) {
if (field.type === 'select') {
optionsContainerEl.style.display = 'block';
optionListEl.innerHTML = '';
+
+ // Accept both string array and legacy object array ({value: 'x'})
field.options.forEach(opt => {
+ const valueText = (typeof opt === 'string') ? opt : (opt && opt.value ? opt.value : '');
const optionDiv = document.createElement('div');
optionDiv.setAttribute('class', 'option-item row mt-1 mb-1');
const col1Div = document.createElement('div');
col1Div.classList.add('col');
-
- const col2Div = document.createElement('div');
- col2Div.classList.add('col');
-
- const labelInput = document.createElement('input');
- labelInput.type = 'text';
- labelInput.placeholder = 'Label (required)';
- labelInput.value = opt.label;
- labelInput.setAttribute('class', 'option-label form-control');
const valueInput = document.createElement('input');
valueInput.type = 'text';
valueInput.placeholder = 'Value (required)';
- valueInput.value = opt.value.replace(/\s+/g, ''); // Remove spaces
+ valueInput.value = valueText.replace(/\s+/g, ''); // Remove spaces
valueInput.setAttribute('class', 'option-value form-control');
valueInput.addEventListener('input', () => {
valueInput.value = valueInput.value.replace(/\s+/g, ''); // Remove spaces in real-time
@@ -172,11 +155,8 @@ function editField(index) {
}
});
- optionDiv.appendChild(labelInput);
+ col1Div.appendChild(valueInput);
optionDiv.appendChild(col1Div);
- optionDiv.appendChild(col2Div);
- col1Div.appendChild(labelInput);
- col2Div.appendChild(valueInput);
optionDiv.appendChild(removeBtn);
optionListEl.appendChild(optionDiv);
});
@@ -187,10 +167,16 @@ function editField(index) {
editingIndex = index;
addFieldBtn.textContent = "Update Field";
- document.getElementById('input-status').innerHTML = `
${field.label}${field.label}${f.name}`;
@@ -210,14 +195,14 @@ function updatePreviewAndOutput() {
let el;
if (f.type === 'textarea') {
el = document.createElement('textarea');
- el.placeholder = f.info;
+ el.placeholder = f.info || '';
el.setAttribute('class', 'form-control');
- el.value = f.value;
+ el.value = f.value || '';
} else if (f.type === 'checkbox') {
const spacer = document.createElement('br');
el = document.createElement('input');
el.type = 'checkbox';
- el.checked = f.value === 'true';
+ el.checked = (f.value === 'true' || f.value === true);
const checkboxLabel = document.createElement('span');
checkboxLabel.textContent = ` ${f.label} `;
wrapper.appendChild(spacer);
@@ -227,17 +212,18 @@ function updatePreviewAndOutput() {
} else if (f.type === 'select') {
el = document.createElement('select');
el.setAttribute('class', 'form-control');
- f.options.forEach(opt => {
+ // f.options is an array of strings
+ (f.options || []).forEach(opt => {
const option = document.createElement('option');
- option.value = opt.value;
- option.textContent = opt.label;
+ option.value = opt;
+ option.textContent = opt;
el.appendChild(option);
});
} else {
el = document.createElement('input');
el.type = f.type;
- el.value = f.value;
- el.placeholder = f.info;
+ el.value = f.value || '';
+ el.placeholder = f.info || '';
el.setAttribute('class', 'form-control');
}
@@ -245,7 +231,7 @@ function updatePreviewAndOutput() {
wrapper.appendChild(el);
}
- if (f.type === 'checkbox' || f.type === 'select') {
+ if (f.info) {
const tip = document.createElement('span');
tip.innerHTML = `${f.info}`;
wrapper.appendChild(tip);
@@ -264,10 +250,11 @@ function updatePreviewAndOutput() {
wrapper.appendChild(deleteBtn);
formPreviewEl.appendChild(wrapper);
-
});
jsonOutputEl.value = JSON.stringify(fields, null, 2);
+
+ // Reset form inputs
nameEl.value = '';
labelEl.value = '';
valueEl.value = '';
@@ -276,8 +263,8 @@ function updatePreviewAndOutput() {
optionListEl.innerHTML = '';
typeEl.value = "text";
addFieldBtn.textContent = "Add Field";
- document.getElementById('input-status').innerHTML = '';
-
+ const statusEl = document.getElementById('input-status');
+ if (statusEl) statusEl.innerHTML = '';
}
document.addEventListener('DOMContentLoaded', () => {
@@ -286,12 +273,11 @@ document.addEventListener('DOMContentLoaded', () => {
// Real-time removal of spaces in the name field
nameEl.addEventListener('input', () => {
nameEl.value = nameEl.value.replace(/\s+/g, ''); // Remove spaces in real-time
- });
+ });
valueEl.addEventListener('input', () => {
if (typeEl.value === 'select') {
valueEl.value = valueEl.value.replace(/\s+/g, ''); // Remove spaces
}
- });
-
-});
+ });
+});
\ No newline at end of file