Fixed bug on the form responding page

This commit is contained in:
Yash 2024-07-25 02:46:46 +05:30
parent 87e0486962
commit d4ad6e9a47
5 changed files with 101 additions and 91 deletions

View File

@ -104,7 +104,6 @@ Contact us at (123) 456-7890 or no_reply@example.com
public function store(Request $request)
{
try {
$validatedData = $request->validate([
'title' => 'required|string|max:255',
'description' => 'nullable|string',
@ -112,33 +111,35 @@ Contact us at (123) 456-7890 or no_reply@example.com
'questions.*.type' => 'required|string|in:multiple_choice,checkbox,dropdown,text',
'questions.*.text' => 'required|string',
'questions.*.options' => 'nullable|array',
'questions.*.required' => 'nullable|boolean',
'questions.*.required' => 'boolean',
]);
DB::beginTransaction();
$form = new Form();
$form->title = $validatedData['title'];
$form->description = $validatedData['description'];
$form->is_published = $request->input('is_published', false);
$form->user_id = Auth::id();
$form->save();
try {
$form = Form::create([
'title' => $validatedData['title'],
'description' => $validatedData['description'],
'user_id' => Auth::id(),
]);
foreach ($validatedData['questions'] as $questionData) {
$question = new Question();
$question->form_id = $form->id;
$question->type = $questionData['type'];
$question->question_text = $questionData['text'];
$question->options = isset($questionData['options']) ? json_encode($questionData['options']) : null;
$question->required = isset($questionData['required']) ? $questionData['required'] : false;
$question = new Question([
'form_id' => $form->id,
'type' => $questionData['type'],
'question_text' => $questionData['text'],
'options' => json_encode($questionData['options'] ?? []),
'required' => $questionData['required'],
]);
$question->save();
}
return response()->json(['success' => true, 'form_id' => $form->id]);
DB::commit();
return response()->json(['success' => true, 'message' => 'Form saved successfully.']);
} catch (\Exception $e) {
Log::error('Error saving form: ' . $e->getMessage(), ['exception' => $e]);
return response()->json(['success' => false, 'message' => 'Error saving form'], 500);
DB::rollBack();
Log::error('Error saving form: ' . $e->getMessage());
return response()->json(['success' => false, 'message' => 'Failed to save form.']);
}
}

View File

@ -255,3 +255,7 @@ input:focus, textarea:focus, select:focus{
color: black;
height: 20px;
}
.active-question {
border-left: 4px solid blue;
}

View File

@ -89,7 +89,9 @@
</div>
@endforeach
@endif
<button type="button" class="btn btn-secondary" onclick="addOption(this)">Add Option</button>
</div>
<div class="d-flex align-items-center mt-2">
<button type="button" class="btn btn-secondary mr-2" onclick="addOption(this)">Add Option</button>
<button class="btn btn-md" id="moveUpButton" onclick="deleteQuestion(this);">
<img src="{{ asset('images/bin.png') }}" alt="" width="20px" height="20px" />
</button>
@ -112,7 +114,7 @@
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
function addOption(button) {
const optionsContainer = $(button).closest('.options-container');
const optionsContainer = $(button).closest('.question').find('.options-container');
const optionIndex = optionsContainer.find('.option').length;
const questionIndex = optionsContainer.closest('.question').data('index');
@ -152,13 +154,14 @@
</div>
<div class="form-group form-check">
<input type="checkbox" id="question-required-${questionIndex}"
name="questions[${questionIndex}][required]" class="form-check-input"
{{ $question->required ? 'checked' : '' }}>
name="questions[${questionIndex}][required]" class="form-check-input">
<label for="question-required-${questionIndex}" class="form-check-label">Required</label>
</div>
<div class="form-group options-container">
<label>Options</label>
<button type="button" class="btn btn-secondary" onclick="addOption(this)">Add Option</button>
</div>
<div class="d-flex align-items-center mt-2">
<button type="button" class="btn btn-secondary mr-2" onclick="addOption(this)">Add Option</button>
<button class="btn btn-md" id="moveUpButton" onclick="deleteQuestion(this);">
<img src="{{ asset('images/bin.png') }}" alt="" width="20px" height="20px" />
</button>

View File

@ -8,7 +8,8 @@
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'LaraForms') }}</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=Nunito" rel="stylesheet">

View File

@ -52,27 +52,31 @@
</div>
<script>
document.getElementById('responseForm').addEventListener('submit', function(event) {
document.addEventListener('DOMContentLoaded', function() {
const responseForm = document.getElementById('responseForm');
responseForm.addEventListener('submit', function(event) {
event.preventDefault();
const form = event.target;
const formData = new FormData(form);
let valid = true;
@foreach ($questions as $question)
@if ($question->required)
if (!formData.has('answers[{{ $question->id }}]') || !formData.get('answers[{{ $question->id }}]').trim()) {
valid = false;
Swal.fire({
title: 'Error!',
text: 'Please answer all required questions.',
icon: 'error',
confirmButtonText: 'OK'
});
break;
}
@endif
@endforeach
// @foreach ($questions as $question)
// @if ($question->required)
// const answer = formData.get('answers[{{ $question->id }}]');
// console.log('Question ID:', {{ $question->id }}, 'Answer:', answer);
// if (!answer || !answer.trim()) {
// valid = false;
// Swal.fire({
// title: 'Error!',
// text: 'Please answer all required questions.',
// icon: 'error',
// confirmButtonText: 'OK'
// });
// return; // Exit the function to prevent further execution
// }
// @endif
// @endforeach
if (valid) {
fetch(form.action, {
@ -101,10 +105,6 @@
text: 'Error submitting. Answer all required questions',
icon: 'error',
confirmButtonText: 'OK'
}).then((result) => {
if (result.isConfirmed) {
window.location.href = '{{ route('responses.success', $form) }}';
}
});
}
})
@ -119,5 +119,6 @@
});
}
});
});
</script>
@endsection