josephkurian
/
CodeIgniter_Gforms
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added ajax

This commit is contained in:
josephkurian 2024-07-12 11:51:27 +05:30
parent e97d382a72
commit c776e6c7e2
5 changed files with 136 additions and 197 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
application/controllers/Forms.php
View File

@ -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']);
}
} }

0
application/models/Form_model.php Normal file
View File

72
application/views/forms/create.php
View File

@ -1,8 +1,7 @@
<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">
@ -10,26 +9,26 @@
</div> </div>
<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">
<div class="question-box_header_question-type" > <div class="question-box_header_question-type">
<select id = "question-type" class="question-box_header_question-type_select"> <select id="question-type" class="question-box_header_question-type_select">
<option value="multiple-choice">Multiple choice</option> <option value="multiple-choice">Multiple choice</option>
<option value="checkbox">Checkbox</option> <option value="checkbox">Checkbox</option>
<option value="paragraph">Paragraph</option> <option value="paragraph">Paragraph</option>
</select> </select>
</div> </div>
</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">
&nbsp &nbsp;
<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>
</div> </div>
<br> <br>
@ -38,38 +37,38 @@
<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"> <img id="question-type-image" src="<?= base_url() ?>assets/images/circle.png" alt="option circle" width="16px" height="16px">
<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">
<input type = "text" placeholder="Option1" class = "question-box_option-block_option-text" >
</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>
</div> </div>
</div> </div>
<div class = "question-box_footer"> <div class="question-box_footer">
<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>
<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>

3
application/views/templates/footer.php
View File

@ -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>

161
assets/js/script.js
View File

@ -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({
questionText: questionText,
options: options
});
});
// Store the form data in localStorage
localStorage.setItem('formTitle', formTitle);
localStorage.setItem('formDesc', formDesc);
localStorage.setItem('questions', JSON.stringify(questions));
// Open the preview page
window.open('preview.html', '_blank');
} }
formData.questions.push(questionData);
});
$.ajax({
url: base_url+'forms/submit_form',
type: 'POST',
data: { formData: JSON.stringify(formData) },
success: function(response) {
console.log('Form data submitted successfully:', response);
},
error: function(xhr, status, error) {
console.error('Error submitting form data:', error);
}
});
});
}); });