Laravel 8 - how to keep radio "checked" fields visible after `validate()` refresh?

Question

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.
JQuery show/hide for the fields.

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:

How to fix/improve the small bug in the input old()?
If user checked "yes", how to keep the fields of yes visibile even after failed laravel validate()?

could you dd your $request->all() to see what are the actual values for checkIr? — Bagus Tesa
– Bagus Tesa, Commented Mar 3, 2022 at 8:43
the actual values are correct "checkIR" => "haveIR" when "Yes" is checked. And noIR if "No" is checked — Abdulrahman Mushref
– Abdulrahman Mushref, Commented Mar 3, 2022 at 8:52

M. Tahir · Accepted Answer · 2022-03-03 09:14:01Z

3

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.

edited Mar 3, 2022 at 9:14

answered Mar 3, 2022 at 8:54

M. Tahir

3641 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Abdulrahman Mushref Over a year ago

Awesome! that solves the session issue, Thank you! Any ideas about keeping the fields visible?

M. Tahir Over a year ago

Sorry, I didn't see the second question at first. I edited the answer.

Collectives™ on Stack Overflow

Laravel 8 - how to keep radio "checked" fields visible after `validate()` refresh?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related