CODEWITHSUNDEEP
phplaravel
user9289573
user9289573

Reputation:

How to properly show in the frontend the checkboxes checked or not based on what is stored in DB?

I have a form that has some questions/fields (email, phone number,...) and then the user can select if that field should be included for the registration types that exist for a conference and also if that field should be mandatory or not for each registration type, through checkboxes.

Based on the selected checkboxes the info is inserted in the pivot table "registration_type_questions" that has this structure: registration_type_id, question_id, required.

The database is like this for now:

registration_type_id  question_id  required
    2                   1          1    (include quetion 1 in rt02 and is mandatory)
    1                   2          1    (include quetion 2 in rt01 and is mandatory)
    1                   1          1    (include quetion 1 in rt01 and is mandatory)

Doubt

I want to show in the frontend the checkboxes checked or not based on what is in the db. Do you know how is possible to check the checkboxes on the frontend based on this db values?

With that db info the frontend should appear like below:

enter image description here

Form:

<table class="table table-striped table-responsive-sm">
    <thead>
    <tr>
        <th scope="col">Questions</th>
        <th scope="col">Include for registration type</th>
        <th scope="col">Mandatory</th>
    </tr>
    </thead>
    <tbody>
    @foreach($question as $q)
        <tr>
            <td>{{$q->question}}</td>
            <td>
                @foreach($registration_types as $rtype)
                    <div class="form-check">
                        <input autocomplete="off" name="include[{{ $q->id }}][{{ $rtype->id }}]" class="form-check-input {{$rtype->name}}" type="checkbox" value="1" id="{{$rtype->id}}">
                        <label class="form-check-label" for="exampleRadios1">
                            {{$rtype->name}}
                        </label>
                    </div>

                @endforeach
            </td>
            <td>
                @foreach($registration_types as $rtype)
                    <div class="form-check">
                        <input autocomplete="off"  name="mandatory[{{ $q->id }}][{{ $rtype->id }}]"
                               class="form-check-input mandatorycheckbox" type="checkbox" value="1" id="{{$rtype->id}}">
                        <label class="form-check-label" for="exampleRadios1">
                            for the registration type "{{$rtype->name}}"
                        </label>
                    </div>
                @endforeach
            </td>
        </tr>
    @endforeach

    </tbody>
</table>

Question Model

class Question extends Model
{

    public function registration_type(){
        return $this->belongsToMany('App\RegistrationType', 'registration_type_questions');
    }
}

Registration type model

class RegistrationType extends Model
{
    public function conference(){
        return $this->belongsTo('App\Conference');
    }

    public function questions(){
        return $this->belongsToMany('App\Question', 'registration_type_questions');
    }
}

Conferece model

class Conference extends Model
{
   // A conference has many registration types
    public function registrationTypes(){
        return $this->hasMany('App\RegistrationType', 'conference_id');
    }
}

Upvotes: 1

Views: 685

Answers (3)

iamab.in
iamab.in

Reputation: 2070

In your controller store the relation values to variables and pass it to the view.

foreach($question as $ques) {
    foreach($ques->registration_type as $regType) {
        $optional[$ques->id][$regType->id] = 1;

        if($regType->pivot->required == 1) {
            $required[$ques->id][$regType->id] = 1;
        }
    }
}

pass$optional and required to the view. with the $question.

In your view check whether the current checkbox has relation defined in the varible then make the checkbox property "checked".

@foreach($question as $q)
    <tr>
        <td>{{$q->question}}</td>
        <td>
            @foreach($registration_types as $rtype)
                <div class="form-check">
                    <input autocomplete="off" name="include[{{ $q->id }}][{{ $rtype->id }}]" 
                        class="form-check-input {{$rtype->name}}" type="checkbox" value="1" id="{{$rtype->id}}" {{ !empty($optional[$q->id][$rtype->id]) ? "checked" : "" }}>
                    <label class="form-check-label" for="exampleRadios1">
                        {{$rtype->name}}
                    </label>
                </div>
            @endforeach
        </td>
        <td>
            @foreach($registration_types as $rtype)
                <div class="form-check">
                    <input autocomplete="off"  name="mandatory[{{ $q->id }}][{{ $rtype->id }}]"
                       class="form-check-input mandatorycheckbox" type="checkbox" value="1" id="{{$rtype->id}}" {{ !empty($required[$q->id][$rtype->id]) ? "checked" : "" }}>
                    <label class="form-check-label" for="exampleRadios1">for the registration type "{{$rtype->name}}"</label>
                </div>
            @endforeach
        </td>
    </tr>
@endforeach

Upvotes: 1

user2417483
user2417483

Reputation:

In your form you will need to add:

<input autocomplete="off"  
       name="mandatory[{{ $q->id }}][{{ $rtype->id }}]"
       class="form-check-input mandatorycheckbox" 
       type="checkbox" 
       value="1" 
       id="{{$rtype->id}}"
       {{$rtype->required==1?" checked":""}}>

You realise that non-ticked radio/checkboxs do not get submitted with the form. This means that you need to check their existance first (isset).

Another problem that I noticed. In the data example that you have given, when you update registration_type_id of 1 which record will it update (the code for this might be elsewhere an not supplied).

Upvotes: 0

Wreigh
Wreigh

Reputation: 3287

Add or remove the checked property depending on the DB value.

@foreach($registration_types as $rtype)
  <div class="form-check">
      <input autocomplete="off"
             name="include[{{ $q->id }}][{{ $rtype->id }}]" 
             class="form-check-input {{$rtype->name}}" 
             type="checkbox" 
             id="{{$rtype->id}}"
             {{ array_search($rtype->id, $q->registration_type->pluck('id')->all()) !== FALSE
                ? 'checked' : '' }}>
      <label class="form-check-label" for="exampleRadios1">
        {{$rtype->name}}
      </label>
  </div>
@endforeach

For the sake of performance, you may have $q->registration_type->pluck('id')->toArray() prepared from the controller, so you won't have to run those functions for each registration type.

Upvotes: 0

Related Questions