How to display min and max based on another toggle in Laravel

Question

In my Laravel-5.8, I have this code:

StoreController

$parameter = Parameter::create([
    'activate_msf'                      => $request->has('activate_msf'),
    'max_internal_respondent'           => $request->max_internal_respondent, 
    'min_internal_respondent'           => $request->min_internal_respondent,
 ]);

View blade:

        <script>
            $(function () {
            $("input[data-bootstrap-switch]").each(function(){
              $(this).bootstrapSwitch('state', $(this).prop('checked'));
            });              
        </script>
        
        <script>
            $(document).ready(function() {     
                $("input[name='activate_msf']").on('change', function() {
                  if ($(this).is(':checked')) {
                    // hide elements 
                    $("input[name='min_internal_respondent']").hide();
                    $("input[name='max_internal_respondent']").hide();
                  } else {
                    // show elements
                    $("input[name='min_internal_respondent']").show();
                    $("input[name='max_internal_respondent']").show();
                  }
                });                
                
            });       
        </script>        
        
        <script>
            $(document).ready(function() {     
                if ($("input[name='activate_msf']").is(':checked')) {
                  // hide elements 
                  $("input[name='min_internal_respondent']").hide()
                  $("input[name='max_internal_respondent']").hide()
                } else {
                  // show elements
                  $("input[name='min_internal_respondent']").show()
                  $("input[name='max_internal_respondent']").show()
                }              
                
            });       
        </script>

<div class="col-12 col-sm-2">
  <div class="form-group">
    <label class="control-label"> Activate MSF?:</label><br>
    <input type="checkbox" name="activate_msf" class="form-control" unchecked data-bootstrap-switch data-off-color="danger" data-on-color="success" data-off-text="NO" data-on-text="YES">
  </div>
</div>

<div class="col-12 col-sm-6">
  <div class="form-group">
    <label class="control-label"> Min. Internal Respondent:<span style="color:red;">*</span></label>
    <input type="number" name="min_internal_respondent" placeholder="Example: 1,2,3, ..." class="form-control" value="{{old('min_internal_respondent')}}" min="1" max="30">
  </div>
</div>
<div class="col-12 col-sm-6">
  <div class="form-group">
    <label class="control-label"> Max. Internal Respondent:<span style="color:red;">*</span></label>
    <input type="number" name="max_internal_respondent" placeholder="Example: 1,2,3, ..." class="form-control" value="{{old('max_internal_respondent')}}" min="1" max="30">
  </div>
</div>

<!-- begin snippet: js hide: false console: true babel: false -->

What I want to achieve is that, if activate_mid_year = 0 then min_internal_respondent and max_internal_respondent should be hidden

But If activate_mid_year = 1, then min_internal_respondent and max_internal_respondent should be visible

How do I achieve this?

Should it be dynamically? So when you click the checkbox the other two inputs should disappear? Then you'll need javascript. Do you have any library in place like vue.js, jQuery or anything? — Frnak, Feb 15 '21 at 11:44

Frnak · Accepted Answer · 2021-02-15T12:11:37.880

You will find plenty of hints for jQuery by searching stackoverflow (How do I check whether a checkbox is checked in jQuery?)

In your case you want to handle the click on the checkbox

$("input[name='activate_mid_year']").on('change', function() {
  if ($(this).is(':checked')) {
    // hide elements 
    $("input[name='min_internal_respondent']").hide()
    $("input[name='max_internal_respondent']").hide()
  } else {
    // show elements
    $("input[name='min_internal_respondent']").show()
    $("input[name='max_internal_respondent']").show()
  }
});

(I didn't test the code so it might contain an issue somewhere). You can simplify this by adding specific classes or IDs to your input. You should also store the two inputs to hide and show in a variable

Also: Given from your code activate_msf is read in the controller while the field is actually named activate_mid_year - you will need to change this

EDIT:

If you want to run this on load of the page just don't use the 'change' event

  if ($("input[name='activate_mid_year']").is(':checked')) {
    // hide elements 
    $("input[name='min_internal_respondent']").hide()
    $("input[name='max_internal_respondent']").hide()
  } else {
    // show elements
    $("input[name='min_internal_respondent']").show()
    $("input[name='max_internal_respondent']").show()
  }

Now you only need to ensure that the checbox is checked if activate_msf is 1 on load - the scripting will then handle hiding the elements. See Laravel blade check box to find more about this

@Fmak - Thanks I've done the update. But by default, when the form loads, it should check. If activate_msf = 0 it should hide elements. But if activate_msf = 1 it should display elements. Then it also uses the check box as you have written — mikefolu, Feb 15 '21 at 12:08
@Fmak - Non of the two jQuery is working. Is it because I am using $("input[data-bootstrap-switch]").each(function(){ $(this).bootstrapSwitch('state', $(this).prop('checked')); }); for the checkbox. I updated my code — mikefolu, Feb 15 '21 at 12:22

How to display min and max based on another toggle in Laravel

1 Answers1