added ajax
This commit is contained in:
parent
e97d382a72
commit
c776e6c7e2
|
|
@ -8,10 +8,23 @@ class Forms extends CI_Controller
|
||||||
redirect('users/login');
|
redirect('users/login');
|
||||||
}
|
}
|
||||||
$data['title'] = 'Create Post';
|
$data['title'] = 'Create Post';
|
||||||
$this->load->view('templates/header');
|
$this->load->view('templates/header');
|
||||||
$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']);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,75 +1,74 @@
|
||||||
|
|
||||||
<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">
|
<input type="text" id="form-desc" class="form_container_top_desc" style="color: black;" placeholder="Form Description">
|
||||||
<input type="text" id="form-desc" class="form_container_top_desc" style="color: black;" placeholder="Form Description">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<br>
|
|
||||||
<!--New Questions will get added here-->
|
|
||||||
<div class = "question-box" id = "question-template" style="display:none;">
|
|
||||||
<!--This is the question-box header contains quesion,type,add an img-->
|
|
||||||
<div class = "question-box_header">
|
|
||||||
<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">
|
|
||||||
<div class="question-box_header_question-type" >
|
|
||||||
<select id = "question-type" class="question-box_header_question-type_select">
|
|
||||||
<option value="multiple-choice">Multiple choice</option>
|
|
||||||
<option value="checkbox">Checkbox</option>
|
|
||||||
<option value="paragraph">Paragraph</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!--These are the style buttons to style your question -->
|
|
||||||
<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/italics.png" width = "14px" height = "14px"></button>
|
|
||||||
<button><img src = "<?= base_url() ?>assets/images/underline.png" width = "16px" height = "16px"></button>
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<!-- Add a textarea for short answer type -->
|
|
||||||
<div class="question-box_short-answer" style="display: none;">
|
|
||||||
<div class="question-box_short-answer_placeholder">Paragraph</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<!--These are the options-->
|
|
||||||
<div id ="options-container">
|
|
||||||
<div class = "question-box_option-block" id = "option-template">
|
|
||||||
<img id= "question-type-image" src = "<?= base_url() ?>assets/images/circle.png" alt = "option circle" width="16px" height="16px">
|
|
||||||
<input type = "text" placeholder="Option1" class = "question-box_option-block_option-text" >
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
<!--New options should be appended here-->
|
|
||||||
<div id = new-options></div>
|
|
||||||
<!--To Add a new option-->
|
|
||||||
<div class = "question-box_add-option">
|
|
||||||
<button id = "add-option" style="color:#1a73e8;font-weight: 500;">Add Option</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class = "question-box_footer">
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<br>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class = "sidebar">
|
<br>
|
||||||
<button id = "add-question">
|
<!-- New Questions will get added here -->
|
||||||
<img src = "<?= base_url() ?>assets/images/add.png" width = "20px" height = "20px" alt = "add button">
|
<div class="question-box" id="question-template" style="display:none;">
|
||||||
</button>
|
<!-- This is the question-box header contains question, type, add an img -->
|
||||||
</div>
|
<div class="question-box_header">
|
||||||
|
<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">
|
||||||
|
<div class="question-box_header_question-type">
|
||||||
|
<select id="question-type" class="question-box_header_question-type_select">
|
||||||
|
<option value="multiple-choice">Multiple choice</option>
|
||||||
|
<option value="checkbox">Checkbox</option>
|
||||||
|
<option value="paragraph">Paragraph</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- These are the style buttons to style your question -->
|
||||||
|
<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/italics.png" width="14px" height="14px"></button>
|
||||||
|
<button><img src="<?= base_url() ?>assets/images/underline.png" width="16px" height="16px"></button>
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
|
||||||
|
<!-- Add a textarea for short answer type -->
|
||||||
|
<div class="question-box_short-answer" style="display: none;">
|
||||||
|
<div class="question-box_short-answer_placeholder">Paragraph</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- These are the options -->
|
||||||
|
<div id="options-container">
|
||||||
|
<div class="question-box_option-block" id="option-template">
|
||||||
|
<img id="question-type-image" src="<?= base_url() ?>assets/images/circle.png" alt="option circle" width="16px" height="16px">
|
||||||
|
<input type="text" placeholder="Option1" class="question-box_option-block_option-text">
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
<!-- New options should be appended here -->
|
||||||
|
<div id="new-options"></div>
|
||||||
|
<!-- To Add a new option -->
|
||||||
|
<div class="question-box_add-option">
|
||||||
|
<button id="add-option" style="color:#1a73e8;font-weight: 500;">Add Option</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="question-box_footer">
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="sidebar">
|
||||||
|
<button id="add-question">
|
||||||
|
<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>
|
||||||
</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,5 +1,8 @@
|
||||||
</div>
|
</div>
|
||||||
<script src="<?= base_url() ?>assets/js/jquery.js"></script>
|
<script type="text/javascript">
|
||||||
<script src="<?= base_url() ?>assets/js/script.js"></script>
|
var base_url = '<?= base_url() ?>';
|
||||||
|
</script>
|
||||||
|
<script src="<?= base_url() ?>assets/js/jquery.js"></script>
|
||||||
|
<script src="<?= base_url() ?>assets/js/script.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -4,7 +4,7 @@ $(document).ready(function() {
|
||||||
|
|
||||||
$('#add-question').click(function() {
|
$('#add-question').click(function() {
|
||||||
questionCount++;
|
questionCount++;
|
||||||
|
|
||||||
// Clone the question template
|
// Clone the question template
|
||||||
var newQuestion = $('#question-template').clone();
|
var newQuestion = $('#question-template').clone();
|
||||||
newQuestion.removeAttr('id');
|
newQuestion.removeAttr('id');
|
||||||
|
|
@ -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() {
|
||||||
if (optionText) {
|
var optionText = $(this).find('.option-text').val();
|
||||||
options.push(optionText);
|
if (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