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  type="radio" name="checkIR" value="haveIR" @if(!old('checkIR')) checked @endif id="haveIR" required>
<input  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

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()?

CodePudding user response：

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  type="radio" name="checkIR" value="haveIR" @if(old('checkIR') == 'haveIR') checked @endif id="haveIR" required>

<input  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.