I have a form with "Does this case have IR number?"
If yes, show fields. If no, hide and show others.
I am using
validate() function.old() to keep data after failed form submission, aka validate() error messages.For the radio input, I used old() like this:
<input class="btn-check" type="radio" name="checkIR" value="haveIR" @if(!old('checkIR')) checked @endif id="haveIR" required>
<input class="btn-check" type="radio" name="checkIR" value="noIR" @if(old('checkIR')) checked @endif id="noIR">
to keep the checked as it is after failed validate(), but it's buggy, When I check "Yes" and refresh, it checks "No" when it must be as "Yes".
As for the show/hide, here is what I did:
// Show/Hide fields based on radio button option
$(document).ready(function() {
$('input[name="checkIR"]').click(function() {
var inputValue = $(this).attr("value")
var targetField = $("." + inputValue);
$(".box").not(targetField).slideUp();
$(targetField).slideDown();
});
});
With a help of css:
.box {
display: none;
}
How the code works:
If yes/haveIR radio is checked: show all fields containing class="box haveIR"
Issues trying to solve:
old()?yes visibile even after failed laravel validate()?Since the radio inputs have the same name, in both cases your session has "checkIR" and when you try to check it with old('checkIR') it will return true regardless of its value. Thats why "No" is checked.
Therefore, in order to find the old selected one, you should check by its value, not whether it exists in the session or not.
Code like this should work for you;
<input class="btn-check" type="radio" name="checkIR" value="haveIR" @if(old('checkIR') == 'haveIR') checked @endif id="haveIR" required>
<input class="btn-check" type="radio" name="checkIR" value="noIR" @if(old('checkIR') == 'noIR') checked @endif id="noIR">
Or;
You can use 0 and 1 for values. Since old('checkIR') will return '0' or '1' and PHP will interpret '0' as false and '1' as true the behaviour will be like you wanted.
And for keeping the related fields visible;
You can run some script when document ready and set related fields visible by input value.
$(document).ready(function() {
var input = $('input[name="checkIR"]:checked');
if (input) { // if any checked radio when document ready
var targetField = $("." + input.val());
$(".box").not(targetField).slideUp();
$(targetField).slideDown();
}
});
Note: didn't run the script, it may have errors but you get the point.