From c776e6c7e2b4e4e6f34eca3fdbf7a5480ba7296c Mon Sep 17 00:00:00 2001 From: josephkurian Date: Fri, 12 Jul 2024 11:51:27 +0530 Subject: [PATCH] added ajax --- application/controllers/Forms.php | 15 ++- application/models/Form_model.php | 0 application/views/forms/create.php | 140 ++++++++++---------- application/views/templates/footer.php | 7 +- assets/js/script.js | 171 ++++++++----------------- 5 files changed, 136 insertions(+), 197 deletions(-) create mode 100644 application/models/Form_model.php diff --git a/application/controllers/Forms.php b/application/controllers/Forms.php index 18144ef..0920a43 100644 --- a/application/controllers/Forms.php +++ b/application/controllers/Forms.php @@ -8,10 +8,23 @@ class Forms extends CI_Controller redirect('users/login'); } $data['title'] = 'Create Post'; - $this->load->view('templates/header'); + $this->load->view('templates/header'); $this->load->view('forms/create', $data); $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']); + } } diff --git a/application/models/Form_model.php b/application/models/Form_model.php new file mode 100644 index 0000000..e69de29 diff --git a/application/views/forms/create.php b/application/views/forms/create.php index 961e3b7..6229b97 100644 --- a/application/views/forms/create.php +++ b/application/views/forms/create.php @@ -1,75 +1,74 @@ -
-
-
- -
-
- - -
- -
- - -
+
+
+
+
+
+ +
-
- -
+
+ + +
+
+ +
+ +
+
+ @@ -79,11 +78,4 @@ - - - - - \ No newline at end of file diff --git a/application/views/templates/footer.php b/application/views/templates/footer.php index 7c9835f..956410b 100644 --- a/application/views/templates/footer.php +++ b/application/views/templates/footer.php @@ -1,5 +1,8 @@
- - + + + \ No newline at end of file diff --git a/assets/js/script.js b/assets/js/script.js index 14aa496..9678e33 100644 --- a/assets/js/script.js +++ b/assets/js/script.js @@ -4,7 +4,7 @@ $(document).ready(function() { $('#add-question').click(function() { questionCount++; - + // Clone the question template var newQuestion = $('#question-template').clone(); newQuestion.removeAttr('id'); @@ -13,135 +13,59 @@ $(document).ready(function() { newQuestion.show(); // Ensure the cloned template is visible // Append the cloned question to the form container - $('#question-template').parent().append(newQuestion).append('
'); - - // 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 + $('#question-template').parent().append(newQuestion); }); $(document).on('click', '#add-option', function() { - // Find the closest question box and its current question type const questionBox = $(this).closest('.question-box'); const currentQuestionType = questionBox.attr('data-question-type'); - - // Increment the option count let optionCount = questionBox.find('.question-box_option-block').length + 1; - // Clone the template var newOption = $('#option-template').clone(); newOption.removeAttr('id'); - newOption.find('input').val(''); - newOption.find('input').attr('placeholder', 'Option ' + optionCount); + newOption.find('input').val(''); + newOption.find('input').attr('placeholder', 'Option ' + optionCount); - // Set the appropriate image based on the current question type if (currentQuestionType === 'multiple-choice') { newOption.find('img').attr('src', base_url+'assets/images/circle.png'); } else if (currentQuestionType === 'checkbox') { 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) { newOption.append(''); } - // Append the cloned option to new options space questionBox.find('#new-options').append(newOption).append('
'); }); $(document).on('click', '.question-box_option-block_option-close', function() { - $(this).closest('.question-box_option-block').next('br').remove(); // Remove the
after the option - $(this).closest('.question-box_option-block').remove(); // Remove the option + $(this).closest('.question-box_option-block').next('br').remove(); + $(this).closest('.question-box_option-block').remove(); }); $(document).on('click', '.delete-question', function() { - $(this).closest('.question-box').next('br').remove(); // Remove the
after the question box - $(this).closest('.question-box').remove(); // Remove the question box + $(this).closest('.question-box').next('br').remove(); + $(this).closest('.question-box').remove(); }); $(document).on('click', '.duplicate-question', function() { - const originalQuestion = $(this).closest('.question-box'); // Get the closest question box - console.log('Original Question:', originalQuestion); - - //selectedType = originalQuestion.attr('data-question-type'); - - // Clone the original question box + const originalQuestion = $(this).closest('.question-box'); const duplicateQuestion = originalQuestion.clone(); - console.log('Duplicate Question Before Modifying:', duplicateQuestion); - // Remove IDs from the cloned question to avoid duplicate IDs duplicateQuestion.removeAttr('id'); - - - console.log('Duplicate Question After Removing IDs:', duplicateQuestion); - // Ensure the cloned question is visible duplicateQuestion.show(); - console.log('Duplicate Question After Show:', duplicateQuestion); - // Append the duplicated question after the original question originalQuestion.after(duplicateQuestion).after('
'); - 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 - $('#question-type').on('change', function() { + // Event delegation for question type changes + $(document).on('change', '#question-type', function() { const selectedType = $(this).val(); - const image = $('#question-type-image'); - const optionsContainer = $('#options-container'); - const shortAnswerContainer = $('.question-box_short-answer'); + const questionBox = $(this).closest('.question-box'); + const image = questionBox.find('#question-type-image'); + const optionsContainer = questionBox.find('#options-container'); + const shortAnswerContainer = questionBox.find('.question-box_short-answer'); if (selectedType === 'multiple-choice') { image.attr('src', base_url+'assets/images/circle.png'); @@ -160,39 +84,46 @@ $(document).ready(function() { 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 + questionBox.attr('data-question-type', selectedType); + }).trigger('change'); - function previewForm() { - // Collect the form data - var formTitle = $('#form-title').val(); - var formDesc = $('#form-desc').val(); - var questions = []; + $('#submit-form').click(function() { + var formData = { + title: $('#form-title').val(), + description: $('#form-desc').val(), + questions: [] + }; $('.question-box:visible').each(function() { - var questionText = $(this).find('.question-box_header_question').val(); - var options = []; + var questionBox = $(this); + 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() { - var optionText = $(this).find('.question-box_option-block_option-text').val(); - if (optionText) { - options.push(optionText); - } - }); + if (questionData.type !== 'paragraph') { + questionBox.find('.option-template').each(function() { + var optionText = $(this).find('.option-text').val(); + if (optionText) { + questionData.options.push(optionText); + } + }); + } - questions.push({ - questionText: questionText, - options: options - }); + formData.questions.push(questionData); }); - // 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'); - } -}); + $.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); + } + }); + }); +}); \ No newline at end of file