added ajax
This commit is contained in:
parent
e97d382a72
commit
c776e6c7e2
|
@ -12,6 +12,19 @@ class Forms extends CI_Controller
|
||||||
$this->load->view('forms/create', $data);
|
$this->load->view('forms/create', $data);
|
||||||
$this->load->view('templates/footer');
|
$this->load->view('templates/footer');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
public function submit_form() {
|
||||||
|
$formData = $this->input->post('formData');
|
||||||
|
$decodedData = json_decode($formData, true);
|
||||||
|
|
||||||
|
// Process the form data here
|
||||||
|
// Example: Save the form data to the database
|
||||||
|
|
||||||
|
$this->load->model('Form_model');
|
||||||
|
$this->Form_model->save_form_data($decodedData);
|
||||||
|
|
||||||
|
echo json_encode(['status' => 'success', 'message' => 'Form data submitted successfully']);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -2,7 +2,6 @@
|
||||||
<div class="page_layout">
|
<div class="page_layout">
|
||||||
<br>
|
<br>
|
||||||
<div class="section">
|
<div class="section">
|
||||||
|
|
||||||
<div class="form_container">
|
<div class="form_container">
|
||||||
<div class="form_container_top">
|
<div class="form_container_top">
|
||||||
<input type="text" id="form-title" class="form_container_top_title" style="color: black;" placeholder="Untitled Form">
|
<input type="text" id="form-title" class="form_container_top_title" style="color: black;" placeholder="Untitled Form">
|
||||||
|
@ -12,7 +11,7 @@
|
||||||
<br>
|
<br>
|
||||||
<!-- New Questions will get added here -->
|
<!-- New Questions will get added here -->
|
||||||
<div class="question-box" id="question-template" style="display:none;">
|
<div class="question-box" id="question-template" style="display:none;">
|
||||||
<!--This is the question-box header contains quesion,type,add an img-->
|
<!-- This is the question-box header contains question, type, add an img -->
|
||||||
<div class="question-box_header">
|
<div class="question-box_header">
|
||||||
<input type="text" id="" class="question-box_header_question" style="color: black;" placeholder="Question">
|
<input type="text" id="" class="question-box_header_question" style="color: black;" placeholder="Question">
|
||||||
<img src="<?= base_url() ?>assets/images/image.png" alt="add an image" height="20px" width="20px">
|
<img src="<?= base_url() ?>assets/images/image.png" alt="add an image" height="20px" width="20px">
|
||||||
|
@ -26,7 +25,7 @@
|
||||||
</div>
|
</div>
|
||||||
<!-- These are the style buttons to style your question -->
|
<!-- These are the style buttons to style your question -->
|
||||||
<div class="question-box_header-style">
|
<div class="question-box_header-style">
|
||||||
 
|
|
||||||
<button><img src="<?= base_url() ?>assets/images/bold.png" width="14px" height="14px"></button>
|
<button><img src="<?= base_url() ?>assets/images/bold.png" width="14px" height="14px"></button>
|
||||||
<button><img src="<?= base_url() ?>assets/images/italics.png" width="14px" height="14px"></button>
|
<button><img src="<?= base_url() ?>assets/images/italics.png" width="14px" height="14px"></button>
|
||||||
<button><img src="<?= base_url() ?>assets/images/underline.png" width="16px" height="16px"></button>
|
<button><img src="<?= base_url() ?>assets/images/underline.png" width="16px" height="16px"></button>
|
||||||
|
@ -38,7 +37,6 @@
|
||||||
<div class="question-box_short-answer_placeholder">Paragraph</div>
|
<div class="question-box_short-answer_placeholder">Paragraph</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<!-- These are the options -->
|
<!-- These are the options -->
|
||||||
<div id="options-container">
|
<div id="options-container">
|
||||||
<div class="question-box_option-block" id="option-template">
|
<div class="question-box_option-block" id="option-template">
|
||||||
|
@ -47,7 +45,7 @@
|
||||||
</div>
|
</div>
|
||||||
<br>
|
<br>
|
||||||
<!-- New options should be appended here -->
|
<!-- New options should be appended here -->
|
||||||
<div id = new-options></div>
|
<div id="new-options"></div>
|
||||||
<!-- To Add a new option -->
|
<!-- To Add a new option -->
|
||||||
<div class="question-box_add-option">
|
<div class="question-box_add-option">
|
||||||
<button id="add-option" style="color:#1a73e8;font-weight: 500;">Add Option</button>
|
<button id="add-option" style="color:#1a73e8;font-weight: 500;">Add Option</button>
|
||||||
|
@ -58,7 +56,6 @@
|
||||||
<button class="duplicate-question"><img src="<?= base_url() ?>assets/images/duplicate.png" width="24px" height="24px"></button>
|
<button class="duplicate-question"><img src="<?= base_url() ?>assets/images/duplicate.png" width="24px" height="24px"></button>
|
||||||
<button class="delete-question"><img src="<?= base_url() ?>assets/images/trash.png" alt="delete question"></button>
|
<button class="delete-question"><img src="<?= base_url() ?>assets/images/trash.png" alt="delete question"></button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<br>
|
<br>
|
||||||
</div>
|
</div>
|
||||||
|
@ -66,10 +63,12 @@
|
||||||
<div class="sidebar">
|
<div class="sidebar">
|
||||||
<button id="add-question">
|
<button id="add-question">
|
||||||
<img src="<?= base_url() ?>assets/images/add.png" width="20px" height="20px" alt="add button">
|
<img src="<?= base_url() ?>assets/images/add.png" width="20px" height="20px" alt="add button">
|
||||||
|
<button id="submit-form" style="color: #fff; background-color: #1a73e8; font-weight: 500; padding: 10px; border: none;">Submit</button>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- now we are trying the side bar -->
|
<!-- now we are trying the side bar -->
|
||||||
|
|
||||||
|
|
||||||
|
@ -79,11 +78,4 @@
|
||||||
<!-- Link to external script -->
|
<!-- Link to external script -->
|
||||||
<!-- <script src="<?= base_url() ?>assets/js/script.js"></script> -->
|
<!-- <script src="<?= base_url() ?>assets/js/script.js"></script> -->
|
||||||
|
|
||||||
</body>
|
|
||||||
|
|
||||||
|
|
||||||
</html>
|
|
||||||
|
|
||||||
<script type="text/javascript">
|
|
||||||
var base_url = '<?= base_url() ?>';
|
|
||||||
</script>
|
|
|
@ -1,4 +1,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
<script type="text/javascript">
|
||||||
|
var base_url = '<?= base_url() ?>';
|
||||||
|
</script>
|
||||||
<script src="<?= base_url() ?>assets/js/jquery.js"></script>
|
<script src="<?= base_url() ?>assets/js/jquery.js"></script>
|
||||||
<script src="<?= base_url() ?>assets/js/script.js"></script>
|
<script src="<?= base_url() ?>assets/js/script.js"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
@ -13,135 +13,59 @@ $(document).ready(function() {
|
||||||
newQuestion.show(); // Ensure the cloned template is visible
|
newQuestion.show(); // Ensure the cloned template is visible
|
||||||
|
|
||||||
// Append the cloned question to the form container
|
// Append the cloned question to the form container
|
||||||
$('#question-template').parent().append(newQuestion).append('<br>');
|
$('#question-template').parent().append(newQuestion);
|
||||||
|
|
||||||
// Bind question type change handler for the new question
|
|
||||||
newQuestion.find('#question-type').on('change', function() {
|
|
||||||
const selectedType = $(this).val();
|
|
||||||
const image = $(this).closest('.question-box').find('#question-type-image');
|
|
||||||
const optionsContainer = $(this).closest('.question-box').find('#options-container');
|
|
||||||
const shortAnswerContainer = $(this).closest('.question-box').find('.question-box_short-answer');
|
|
||||||
|
|
||||||
if (selectedType === 'multiple-choice') {
|
|
||||||
image.attr('src', base_url+'assets/images/circle.png');
|
|
||||||
image.attr('alt', 'Circle for Multiple Choice');
|
|
||||||
optionsContainer.show();
|
|
||||||
shortAnswerContainer.hide();
|
|
||||||
} else if (selectedType === 'checkbox') {
|
|
||||||
image.attr('src', base_url+'assets/images/square.png');
|
|
||||||
image.attr('alt', 'Square for Checkbox');
|
|
||||||
optionsContainer.show();
|
|
||||||
shortAnswerContainer.hide();
|
|
||||||
} else if (selectedType === 'paragraph') {
|
|
||||||
image.attr('src', '');
|
|
||||||
image.attr('alt', '');
|
|
||||||
optionsContainer.hide();
|
|
||||||
shortAnswerContainer.show();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Set the data attribute to the current question type
|
|
||||||
$(this).closest('.question-box').attr('data-question-type', selectedType);
|
|
||||||
}).trigger('change'); // Trigger change to set the initial image
|
|
||||||
});
|
});
|
||||||
|
|
||||||
$(document).on('click', '#add-option', function() {
|
$(document).on('click', '#add-option', function() {
|
||||||
// Find the closest question box and its current question type
|
|
||||||
const questionBox = $(this).closest('.question-box');
|
const questionBox = $(this).closest('.question-box');
|
||||||
const currentQuestionType = questionBox.attr('data-question-type');
|
const currentQuestionType = questionBox.attr('data-question-type');
|
||||||
|
|
||||||
// Increment the option count
|
|
||||||
let optionCount = questionBox.find('.question-box_option-block').length + 1;
|
let optionCount = questionBox.find('.question-box_option-block').length + 1;
|
||||||
|
|
||||||
// Clone the template
|
|
||||||
var newOption = $('#option-template').clone();
|
var newOption = $('#option-template').clone();
|
||||||
newOption.removeAttr('id');
|
newOption.removeAttr('id');
|
||||||
newOption.find('input').val('');
|
newOption.find('input').val('');
|
||||||
newOption.find('input').attr('placeholder', 'Option ' + optionCount);
|
newOption.find('input').attr('placeholder', 'Option ' + optionCount);
|
||||||
|
|
||||||
// Set the appropriate image based on the current question type
|
|
||||||
if (currentQuestionType === 'multiple-choice') {
|
if (currentQuestionType === 'multiple-choice') {
|
||||||
newOption.find('img').attr('src', base_url+'assets/images/circle.png');
|
newOption.find('img').attr('src', base_url+'assets/images/circle.png');
|
||||||
} else if (currentQuestionType === 'checkbox') {
|
} else if (currentQuestionType === 'checkbox') {
|
||||||
newOption.find('img').attr('src', base_url+'assets/images/square.png');
|
newOption.find('img').attr('src', base_url+'assets/images/square.png');
|
||||||
}
|
}
|
||||||
|
|
||||||
// Add close button to the new option if more than one option exists
|
|
||||||
if (optionCount > 1) {
|
if (optionCount > 1) {
|
||||||
newOption.append('<button class="question-box_option-block_option-close"><img src="'+base_url+'assets/images/close.png" alt="close option"></button>');
|
newOption.append('<button class="question-box_option-block_option-close"><img src="'+base_url+'assets/images/close.png" alt="close option"></button>');
|
||||||
}
|
}
|
||||||
|
|
||||||
// Append the cloned option to new options space
|
|
||||||
questionBox.find('#new-options').append(newOption).append('<br>');
|
questionBox.find('#new-options').append(newOption).append('<br>');
|
||||||
});
|
});
|
||||||
|
|
||||||
$(document).on('click', '.question-box_option-block_option-close', function() {
|
$(document).on('click', '.question-box_option-block_option-close', function() {
|
||||||
$(this).closest('.question-box_option-block').next('br').remove(); // Remove the <br> after the option
|
$(this).closest('.question-box_option-block').next('br').remove();
|
||||||
$(this).closest('.question-box_option-block').remove(); // Remove the option
|
$(this).closest('.question-box_option-block').remove();
|
||||||
});
|
});
|
||||||
|
|
||||||
$(document).on('click', '.delete-question', function() {
|
$(document).on('click', '.delete-question', function() {
|
||||||
$(this).closest('.question-box').next('br').remove(); // Remove the <br> after the question box
|
$(this).closest('.question-box').next('br').remove();
|
||||||
$(this).closest('.question-box').remove(); // Remove the question box
|
$(this).closest('.question-box').remove();
|
||||||
});
|
});
|
||||||
|
|
||||||
$(document).on('click', '.duplicate-question', function() {
|
$(document).on('click', '.duplicate-question', function() {
|
||||||
const originalQuestion = $(this).closest('.question-box'); // Get the closest question box
|
const originalQuestion = $(this).closest('.question-box');
|
||||||
console.log('Original Question:', originalQuestion);
|
|
||||||
|
|
||||||
//selectedType = originalQuestion.attr('data-question-type');
|
|
||||||
|
|
||||||
// Clone the original question box
|
|
||||||
const duplicateQuestion = originalQuestion.clone();
|
const duplicateQuestion = originalQuestion.clone();
|
||||||
console.log('Duplicate Question Before Modifying:', duplicateQuestion);
|
|
||||||
|
|
||||||
// Remove IDs from the cloned question to avoid duplicate IDs
|
|
||||||
duplicateQuestion.removeAttr('id');
|
duplicateQuestion.removeAttr('id');
|
||||||
|
|
||||||
|
|
||||||
console.log('Duplicate Question After Removing IDs:', duplicateQuestion);
|
|
||||||
// Ensure the cloned question is visible
|
|
||||||
duplicateQuestion.show();
|
duplicateQuestion.show();
|
||||||
console.log('Duplicate Question After Show:', duplicateQuestion);
|
|
||||||
|
|
||||||
// Append the duplicated question after the original question
|
|
||||||
originalQuestion.after(duplicateQuestion).after('<br>');
|
originalQuestion.after(duplicateQuestion).after('<br>');
|
||||||
console.log('Duplicate Question Added to DOM');
|
|
||||||
|
|
||||||
duplicateQuestion.find('#question-type').on('change', function() {
|
|
||||||
|
|
||||||
const selectedType = $(this).val();
|
|
||||||
const image = $(this).closest('.question-box').find('#question-type-image');
|
|
||||||
const optionsContainer = $(this).closest('.question-box').find('#options-container');
|
|
||||||
const shortAnswerContainer = $(this).closest('.question-box').find('.question-box_short-answer');
|
|
||||||
|
|
||||||
if (selectedType === 'multiple-choice') {
|
|
||||||
image.attr('src', base_url+'assets/images/circle.png');
|
|
||||||
image.attr('alt', 'Circle for Multiple Choice');
|
|
||||||
optionsContainer.show();
|
|
||||||
shortAnswerContainer.hide();
|
|
||||||
} else if (selectedType === 'checkbox') {
|
|
||||||
image.attr('src', base_url+'assets/images/square.png');
|
|
||||||
image.attr('alt', 'Square for Checkbox');
|
|
||||||
optionsContainer.show();
|
|
||||||
shortAnswerContainer.hide();
|
|
||||||
} else if (selectedType === 'paragraph') {
|
|
||||||
image.attr('src', '');
|
|
||||||
image.attr('alt', '');
|
|
||||||
optionsContainer.hide();
|
|
||||||
shortAnswerContainer.show();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Set the data attribute to the current question type
|
|
||||||
$(this).closest('.question-box').attr('data-question-type', selectedType);
|
|
||||||
}).trigger('change'); // Trigger change to set the initial image
|
|
||||||
});
|
});
|
||||||
|
|
||||||
// Initial question type change handler for the existing question template
|
// Event delegation for question type changes
|
||||||
$('#question-type').on('change', function() {
|
$(document).on('change', '#question-type', function() {
|
||||||
const selectedType = $(this).val();
|
const selectedType = $(this).val();
|
||||||
const image = $('#question-type-image');
|
const questionBox = $(this).closest('.question-box');
|
||||||
const optionsContainer = $('#options-container');
|
const image = questionBox.find('#question-type-image');
|
||||||
const shortAnswerContainer = $('.question-box_short-answer');
|
const optionsContainer = questionBox.find('#options-container');
|
||||||
|
const shortAnswerContainer = questionBox.find('.question-box_short-answer');
|
||||||
|
|
||||||
if (selectedType === 'multiple-choice') {
|
if (selectedType === 'multiple-choice') {
|
||||||
image.attr('src', base_url+'assets/images/circle.png');
|
image.attr('src', base_url+'assets/images/circle.png');
|
||||||
|
@ -160,39 +84,46 @@ $(document).ready(function() {
|
||||||
shortAnswerContainer.show();
|
shortAnswerContainer.show();
|
||||||
}
|
}
|
||||||
|
|
||||||
// Set the data attribute to the current question type
|
questionBox.attr('data-question-type', selectedType);
|
||||||
$(this).closest('.question-box').attr('data-question-type', selectedType);
|
}).trigger('change');
|
||||||
}).trigger('change'); // Trigger change to set the initial image
|
|
||||||
|
|
||||||
function previewForm() {
|
$('#submit-form').click(function() {
|
||||||
// Collect the form data
|
var formData = {
|
||||||
var formTitle = $('#form-title').val();
|
title: $('#form-title').val(),
|
||||||
var formDesc = $('#form-desc').val();
|
description: $('#form-desc').val(),
|
||||||
var questions = [];
|
questions: []
|
||||||
|
};
|
||||||
|
|
||||||
$('.question-box:visible').each(function() {
|
$('.question-box:visible').each(function() {
|
||||||
var questionText = $(this).find('.question-box_header_question').val();
|
var questionBox = $(this);
|
||||||
var options = [];
|
var questionData = {
|
||||||
|
question: questionBox.find('.question-box_header_question').val(),
|
||||||
|
type: questionBox.find('.question-type').val(),
|
||||||
|
options: []
|
||||||
|
};
|
||||||
|
|
||||||
$(this).find('.question-box_option-block').each(function() {
|
if (questionData.type !== 'paragraph') {
|
||||||
var optionText = $(this).find('.question-box_option-block_option-text').val();
|
questionBox.find('.option-template').each(function() {
|
||||||
|
var optionText = $(this).find('.option-text').val();
|
||||||
if (optionText) {
|
if (optionText) {
|
||||||
options.push(optionText);
|
questionData.options.push(optionText);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
}
|
||||||
|
|
||||||
questions.push({
|
formData.questions.push(questionData);
|
||||||
questionText: questionText,
|
|
||||||
options: options
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
|
|
||||||
// Store the form data in localStorage
|
$.ajax({
|
||||||
localStorage.setItem('formTitle', formTitle);
|
url: base_url+'forms/submit_form',
|
||||||
localStorage.setItem('formDesc', formDesc);
|
type: 'POST',
|
||||||
localStorage.setItem('questions', JSON.stringify(questions));
|
data: { formData: JSON.stringify(formData) },
|
||||||
|
success: function(response) {
|
||||||
// Open the preview page
|
console.log('Form data submitted successfully:', response);
|
||||||
window.open('preview.html', '_blank');
|
},
|
||||||
|
error: function(xhr, status, error) {
|
||||||
|
console.error('Error submitting form data:', error);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
});
|
||||||
|
});
|
Loading…
Reference in New Issue