Fixed bug on the form responding page
This commit is contained in:
Yash
parent
87e0486962
commit
d4ad6e9a47
|
|
@ -104,41 +104,42 @@ Contact us at (123) 456-7890 or no_reply@example.com
|
|||
|
||||
public function store(Request $request)
|
||||
{
|
||||
$validatedData = $request->validate([
|
||||
'title' => 'required|string|max:255',
|
||||
'description' => 'nullable|string',
|
||||
'questions' => 'required|array',
|
||||
'questions.*.type' => 'required|string|in:multiple_choice,checkbox,dropdown,text',
|
||||
'questions.*.text' => 'required|string',
|
||||
'questions.*.options' => 'nullable|array',
|
||||
'questions.*.required' => 'boolean',
|
||||
]);
|
||||
|
||||
DB::beginTransaction();
|
||||
|
||||
try {
|
||||
$validatedData = $request->validate([
|
||||
'title' => 'required|string|max:255',
|
||||
'description' => 'nullable|string',
|
||||
'questions' => 'required|array',
|
||||
'questions.*.type' => 'required|string|in:multiple_choice,checkbox,dropdown,text',
|
||||
'questions.*.text' => 'required|string',
|
||||
'questions.*.options' => 'nullable|array',
|
||||
'questions.*.required' => 'nullable|boolean',
|
||||
$form = Form::create([
|
||||
'title' => $validatedData['title'],
|
||||
'description' => $validatedData['description'],
|
||||
'user_id' => Auth::id(),
|
||||
]);
|
||||
|
||||
|
||||
$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();
|
||||
|
||||
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.']);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -255,3 +255,7 @@ input:focus, textarea:focus, select:focus{
|
|||
color: black;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.active-question {
|
||||
border-left: 4px solid blue;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -52,72 +52,73 @@
|
|||
</div>
|
||||
|
||||
<script>
|
||||
document.getElementById('responseForm').addEventListener('submit', function(event) {
|
||||
event.preventDefault();
|
||||
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;
|
||||
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;
|
||||
// @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, {
|
||||
method: form.method,
|
||||
headers: {
|
||||
'X-CSRF-TOKEN': '{{ csrf_token() }}'
|
||||
},
|
||||
body: formData
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
Swal.fire({
|
||||
title: 'Success!',
|
||||
text: 'Form submitted successfully.',
|
||||
icon: 'success',
|
||||
confirmButtonText: 'OK'
|
||||
}).then((result) => {
|
||||
if (result.isConfirmed) {
|
||||
window.location.href = '{{ route('responses.success', $form) }}';
|
||||
}
|
||||
});
|
||||
} else {
|
||||
Swal.fire({
|
||||
title: 'Error!',
|
||||
text: 'Error submitting. Answer all required questions',
|
||||
icon: 'error',
|
||||
confirmButtonText: 'OK'
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error:', error);
|
||||
Swal.fire({
|
||||
title: 'Error!',
|
||||
text: 'Please answer all required questions.',
|
||||
text: 'There was an error submitting the form.',
|
||||
icon: 'error',
|
||||
confirmButtonText: 'OK'
|
||||
});
|
||||
break;
|
||||
}
|
||||
@endif
|
||||
@endforeach
|
||||
|
||||
if (valid) {
|
||||
fetch(form.action, {
|
||||
method: form.method,
|
||||
headers: {
|
||||
'X-CSRF-TOKEN': '{{ csrf_token() }}'
|
||||
},
|
||||
body: formData
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
Swal.fire({
|
||||
title: 'Success!',
|
||||
text: 'Form submitted successfully.',
|
||||
icon: 'success',
|
||||
confirmButtonText: 'OK'
|
||||
}).then((result) => {
|
||||
if (result.isConfirmed) {
|
||||
window.location.href = '{{ route('responses.success', $form) }}';
|
||||
}
|
||||
});
|
||||
} else {
|
||||
Swal.fire({
|
||||
title: 'Error!',
|
||||
text: 'Error submitting. Answer all required questions',
|
||||
icon: 'error',
|
||||
confirmButtonText: 'OK'
|
||||
}).then((result) => {
|
||||
if (result.isConfirmed) {
|
||||
window.location.href = '{{ route('responses.success', $form) }}';
|
||||
}
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error:', error);
|
||||
Swal.fire({
|
||||
title: 'Error!',
|
||||
text: 'There was an error submitting the form.',
|
||||
icon: 'error',
|
||||
confirmButtonText: 'OK'
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@endsection
|
||||
|
|
|
|||
Loading…
Reference in New Issue