346 lines
12 KiB
JavaScript
346 lines
12 KiB
JavaScript
$(document).ready(function () {
|
|
let index = 1;
|
|
let activeSection = null;
|
|
|
|
function addOption(type, container) {
|
|
// let optionIndex = container.children().length + 1;
|
|
let optionHtml;
|
|
if (type === "multiple-choice" || type === "checkboxes") {
|
|
optionHtml = `
|
|
<div class="option">
|
|
<input type="${type === "multiple-choice" ? "radio" : "checkbox"}" disabled>
|
|
<input type="text" class="form-control option-label" >
|
|
<span class="delete-option-icon">×</span>
|
|
</div>
|
|
`;
|
|
} else if (type === "dropdown") {
|
|
optionHtml = `
|
|
<div class="option">
|
|
<input type="text" class="form-control option-label">
|
|
<span class="delete-option-icon">×</span>
|
|
</div>
|
|
`;
|
|
}
|
|
container.append(optionHtml);
|
|
}
|
|
|
|
function createFormSection() {
|
|
let newSection = `
|
|
<div class="form-section" data-index="${index}">
|
|
<div class="header-row">
|
|
${index === 1 ? '<div class="violet-border"></div>' : ""}
|
|
<input type="text" class="form-control untitled-question" placeholder="Untitled Question" rows="1"> <select class="custom-select">
|
|
<option value="short-answer">Short Answer</option>
|
|
<option value="paragraph">Paragraph</option>
|
|
<option value="multiple-choice">Multiple Choice</option>
|
|
<option value="checkboxes">Checkboxes</option>
|
|
<option value="dropdown">Dropdown</option>
|
|
</select>
|
|
<label class="toggle-switch">
|
|
<input type="checkbox" class="required-toggle">
|
|
<span class="slider"></span>
|
|
</label>
|
|
<span class="delete-section-icon"><i class="fas fa-trash-alt"></i></span>
|
|
</div>
|
|
<div class="options-container"></div>
|
|
</div>
|
|
`;
|
|
$("#form-container").append(newSection);
|
|
index++;
|
|
positionAddSectionButton();
|
|
}
|
|
|
|
function positionAddSectionButton() {
|
|
if (activeSection) {
|
|
let position = activeSection.position();
|
|
let buttonWidth = $("#add-section-btn").outerWidth();
|
|
let buttonHeight = $("#add-section-btn").outerHeight();
|
|
|
|
$("#add-section-btn").css({
|
|
position: "absolute",
|
|
left: position.left - buttonWidth - 47 + "px",
|
|
top:
|
|
position.top + activeSection.height() / 2 - buttonHeight / 2 + "px",
|
|
});
|
|
}
|
|
}
|
|
|
|
$("#add-section-btn").on("click", function () {
|
|
createFormSection();
|
|
$(".form-section").removeClass("active");
|
|
activeSection = $(".form-section").last();
|
|
activeSection.addClass("active");
|
|
positionAddSectionButton();
|
|
});
|
|
|
|
$(document).on("change", ".custom-select", function () {
|
|
let type = $(this).val();
|
|
let container = $(this).closest(".form-section").find(".options-container");
|
|
container.empty();
|
|
$(this).closest(".form-section").find(".add-option-btn").remove();
|
|
|
|
if (type === "short-answer") {
|
|
container.append(
|
|
'<input type="text" class="form-control" disabled placeholder="Short answer text">',
|
|
);
|
|
} else if (type === "paragraph") {
|
|
container.append(
|
|
'<textarea class="form-control" disabled placeholder="Paragraph text"></textarea>',
|
|
);
|
|
} else {
|
|
addOption(type, container);
|
|
$(this)
|
|
.closest(".form-section")
|
|
.append(
|
|
'<button class="btn btn-secondary add-option-btn">Add Option</button>',
|
|
);
|
|
}
|
|
});
|
|
|
|
$(document).on("click", ".add-option-btn", function () {
|
|
let type = $(this).closest(".form-section").find(".custom-select").val();
|
|
let container = $(this).closest(".form-section").find(".options-container");
|
|
addOption(type, container);
|
|
});
|
|
|
|
$(document).on("click", ".delete-section-icon", function () {
|
|
let section = $(this).closest(".form-section");
|
|
let prevSection = section.prev(".form-section");
|
|
let nextSection = section.next(".form-section");
|
|
section.remove();
|
|
if (section.hasClass("active")) {
|
|
activeSection = null;
|
|
}
|
|
if (prevSection.length > 0) {
|
|
prevSection
|
|
.find(".delete-section-icon")
|
|
.appendTo(prevSection.find(".form-section"));
|
|
activeSection = prevSection;
|
|
row;
|
|
} else if (nextSection.length > 0) {
|
|
nextSection
|
|
.find(".delete-section-icon")
|
|
.appendTo(nextSection.find(".form-header"));
|
|
activeSection = nextSection;
|
|
}
|
|
positionAddSectionButton();
|
|
});
|
|
|
|
$(document).on("click", ".delete-option-icon", function () {
|
|
let option = $(this).closest(".option");
|
|
let container = option.closest(".options-container");
|
|
option.remove();
|
|
});
|
|
|
|
$(document).on("click", ".required-toggle", function () {
|
|
$(this).closest(".form-section").toggleClass("required");
|
|
});
|
|
|
|
$("#preview-btn").on("click", function () {
|
|
let previewWindow = window.open("", "_blank");
|
|
let previewContent = `
|
|
<html>
|
|
<head>
|
|
<title>Form Preview</title>
|
|
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
|
|
<style>
|
|
body { background-color: rgb(240, 235, 248); }
|
|
.container { margin-top: 30px; }
|
|
.form-section {background-color: white;width: 56%;margin-bottom: 30px;margin-left: 240px;padding: 20px;position: relative;align-items: center;border-radius: 10px;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); }
|
|
.form-header {background-color: white;padding: 20px;margin-bottom: 10px;margin-left: 240px;border-radius: 10px 10px 0 0;display: flex;justify-content: space-between;align-items: center; position: relative;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);border-top: 10px solid rgb(103, 58, 183);width: 56%; }
|
|
.form-section h2 { text-align: center; margin-bottom: 30px; }
|
|
.form-section .question-section { margin-bottom: 20px; } /* Add margin-bottom to the question section */
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="form-header">
|
|
<h3>Form Preview</h3>
|
|
</div>
|
|
`;
|
|
$(".form-section").each(function () {
|
|
previewContent += '<div class="form-section">';
|
|
previewContent += '<div class="question-section">';
|
|
previewContent +=
|
|
'<div class="question-label">' +
|
|
$(this).find(".untitled-question").val() +
|
|
"</div>";
|
|
previewContent += "</div>";
|
|
let type = $(this).find(".custom-select").val();
|
|
let optionsContainer = $(this).find(".options-container");
|
|
|
|
if (type === "multiple-choice") {
|
|
optionsContainer.find(".option").each(function () {
|
|
previewContent += `
|
|
<div class="option">
|
|
<input type="radio" name="option-${index}">
|
|
<label>${$(this).find(".option-label").val()}</label>
|
|
</div>
|
|
`;
|
|
});
|
|
} else if (type === "checkboxes") {
|
|
optionsContainer.find(".option").each(function () {
|
|
previewContent += `
|
|
<div class="option">
|
|
<input type="checkbox">
|
|
<label>${$(this).find(".option-label").val()}</label>
|
|
</div>
|
|
`;
|
|
});
|
|
} else if (type === "short-answer") {
|
|
previewContent +=
|
|
'<input type="text" class="form-control" placeholder="Short answer text">';
|
|
} else if (type === "paragraph") {
|
|
previewContent +=
|
|
'<textarea class="form-control" placeholder="Paragraph text"></textarea>';
|
|
} else if (type === "dropdown") {
|
|
let dropdownHtml = '<select class="form-control">';
|
|
optionsContainer.find(".option .option-label").each(function () {
|
|
dropdownHtml += `<option>${$(this).val()}</option>`;
|
|
});
|
|
dropdownHtml += "</select>";
|
|
previewContent += dropdownHtml;
|
|
}
|
|
previewContent += "</div>";
|
|
});
|
|
previewContent += `
|
|
</div>
|
|
</body>
|
|
</html>
|
|
`;
|
|
previewWindow.document.write(previewContent);
|
|
previewWindow.document.close();
|
|
});
|
|
|
|
$(document).on("click", ".form-section", function () {
|
|
$(".form-section").removeClass("active");
|
|
$(this).addClass("active");
|
|
activeSection = $(this);
|
|
positionAddSectionButton();
|
|
});
|
|
|
|
$("#form-container").sortable({
|
|
placeholder: "ui-state-highlight",
|
|
start: function (event, ui) {
|
|
ui.placeholder.height(ui.item.height());
|
|
},
|
|
stop: function (event, ui) {
|
|
positionAddSectionButton();
|
|
},
|
|
});
|
|
|
|
function collectFormData() {
|
|
var formData = {
|
|
questions: [],
|
|
};
|
|
|
|
$(".form-section").each(function () {
|
|
var questionType = $(this).find(".custom-select").val();
|
|
var questionData = {
|
|
text: $(this).find(".untitled-question").val(),
|
|
type: questionType,
|
|
is_required: $(this).find(".required-toggle").is(":checked"),
|
|
options: [],
|
|
};
|
|
|
|
// Only add options if the question type supports them
|
|
if (
|
|
questionType === "multiple-choice" ||
|
|
questionType === "checkboxes" ||
|
|
questionType === "dropdown"
|
|
) {
|
|
$(this)
|
|
.find(".option-label")
|
|
.each(function () {
|
|
questionData.options.push($(this).val());
|
|
});
|
|
}
|
|
|
|
formData.questions.push(questionData);
|
|
});
|
|
|
|
console.log(formData);
|
|
return formData;
|
|
}
|
|
|
|
function validateFormData(formData) {
|
|
for (let question of formData.questions) {
|
|
if (!question.text.trim()) {
|
|
return { isValid: false, message: "All questions must have text." };
|
|
}
|
|
if (
|
|
(question.type === "multiple-choice" ||
|
|
question.type === "checkboxes" ||
|
|
question.type === "dropdown") &&
|
|
question.options.length === 0
|
|
) {
|
|
return {
|
|
isValid: false,
|
|
message: "All options-based questions must have at least one option.",
|
|
};
|
|
}
|
|
for (let option of question.options) {
|
|
if (!option.trim()) {
|
|
return { isValid: false, message: "All options must have text." };
|
|
}
|
|
}
|
|
}
|
|
return { isValid: true };
|
|
}
|
|
$("#submit-btn").on("click", function () {
|
|
let formData = collectFormData();
|
|
console.log(formData);
|
|
|
|
let validation = validateFormData(formData);
|
|
if (!validation.isValid) {
|
|
alert(validation.message);
|
|
return;
|
|
}
|
|
|
|
$.ajax({
|
|
url: base_url + "New_form_controller/submit_form",
|
|
type: "POST",
|
|
data: { formData: formData },
|
|
dataType: "JSON",
|
|
success: function (response) {
|
|
if (response.status === "success") {
|
|
Swal.fire({
|
|
title: "Success!",
|
|
text: "Form submitted successfully!",
|
|
icon: "success",
|
|
confirmButtonText: "OK",
|
|
}).then((result) => {
|
|
window.location.href = base_url;
|
|
});
|
|
} else {
|
|
Swal.fire({
|
|
title: "Error!",
|
|
text: response.message,
|
|
icon: "error",
|
|
confirmButtonText: "OK",
|
|
});
|
|
console.log(response);
|
|
}
|
|
},
|
|
error: function (error) {
|
|
Swal.fire({
|
|
title: "Error!",
|
|
text: "Error submitting form!",
|
|
icon: "error",
|
|
confirmButtonText: "OK",
|
|
width: "400px",
|
|
height: "300px",
|
|
padding: "auto",
|
|
}).then((result) => {
|
|
if (result.isConfirmed) {
|
|
window.location.href = home;
|
|
}
|
|
});
|
|
console.log(error);
|
|
},
|
|
});
|
|
});
|
|
|
|
$("#form-container").disableSelection();
|
|
});
|