I have a scenario I will try to explain, sorry for my English.
I have created a form to submit some values , within the form user can select an option, but one option of which it is "Others specify..." when it is selected the hidden textarea is displayed and user can fill in some data. For the case that it is selected and user does not fill any data, the form is returned back due to validation failure but the textarea is no longer visible because onchange="selectOption();" is not triggered. Everything works fine but in my case I am trying to make the textarea visible with validation error message when it is returned back. How do I perfom this.
<form method="POST" action="{{route('employer-section-b.store')}}"> @csrf <div class="col-md-12">
<select name="b3" id="sector" class="form-control @error('b3') is-invalid @enderror" onchange="selectOption();">
<option value="" disabled selected>select</option>
<option value="1" @if (old('b3')=="1" ) {{ 'selected' }} @endif>Agriculture, forestry, and fishing </option>
<option value="2" @if (old('b3')=="2" ) {{ 'selected' }} @endif>Mining and quarrying</option>
<option value="14" @if (old('b3')=="3" ) {{ 'selected' }} @endif>Others specify……</option></select>
<div class="col-md-12 mt-2" id="specify" style="display: none">
<div class="form-floating mb-3">
<textarea rows="2" name="b3" class="form-control @error('b3') is-invalid @enderror" placeholder="Type here..">
{{ old('b3') }}</textarea>
</div></div>
</div>
</form>
Script to diplay textarea if others is selected
<script>
function selectOption() {
var sector = document.getElementById("sector").value;
var y = document.querySelector("#specify");
if (sector == 3) {
y.removeAttribute("style")
} else if (sector != 3) {
y.setAttribute("style", "display:none");
}
}
</script>
What happens is when you submit the form, the page is reloaded and all the form data is reset.
What you should do is create a submit event listener in javascript, and run
event.preventDefault() to stop the form from reloading the page, and then handle what would happen if the form was submitted when the text area is empty.
document.querySelector('form').addEventListener('submit', (event) => {
// Prevent form from reloading the page
event.preventDefault();
// Get content written inside textarea
let textareaValue = document.querySelector('.form-floating > .form-control').value;
// Check if textarea is empty
if (!textareaValue.trim()) {
// Show a message to the user that an error has occured
console.log('Validation error');
} else {
// Route to "employer-section-b.store"
route('employer-section-b.store');
}
});
Why not explicitly showing the textarea when the b3 option with value 3 is selected ? This way, changing the JS code is no longer needed.
Se the example below:
You have a duplicate name in use,
b3, so i have changed the second duplicate found on thetextareatob4.
<form method="POST" action="{{ route('employer-section-b.store') }}">
@csrf
<div class="col-md-12">
<select name="b3" id="sector" class="form-control{{ $errors->has('b3') ? ' is-invalid':'' }}" onchange="selectOption()">
<option value="" disabled selected>select</option>
<option value="1"{{ old('b3') == 1 ? ' selected':'' }}>Agriculture, forestry, and fishing </option>
<option value="2"{{ old('b3') == 2 ? ' selected':'' }}>Mining and quarrying</option>
<option value="3"{{ old('b3') == 3 ? ' selected':'' }}>Others specify……</option>
</select>
<div class="col-md-12 mt-2" id="specify"{!! ($hasB4Error = $errors->has('b4') || old('b3') == 3) ? '':' style="display: none"' !!}>
<div class="form-floating mb-3">
<textarea rows="2" name="b4" class="form-control{{ $hasB4Error ? ' is-invalid':'' }}" placeholder="Type here..">{{ old('b3') }}</textarea>
</div>
</div>
</div>
</form>
{!! $errors->has('b4') || old('b3') == 3 ? '':' style="display: none"' !!}
This line of code does the trick, it tells Blade to only place the CSS that hides the textarea only when no errors found on b3 nor b4 elements.