How to disable textarea when select is set to false

-2

I would like to disable textarea if the select is false, and enable if the select is true. I was trying to do it for the DOM, but I did not succeed, here is the code I have, if anyone can help me.

                <div class="row">
                  <div class="col-sm-12 col-lg-6">
                      <div class="form-group">
                          <label>Banner Ad:</label> <i class="fa fa-info-circle" data-toggle="tooltip" title="Enable or disable Banner Ad"></i>
                          <select name="controls" class="form-control">
                          <option <?php if($list_settings['controls'] == 'true') echo 'selected' ?> value="true">Enabled</option>
                          <option  <?php if($list_settings['controls'] == 'false') echo 'selected' ?> value="false">Disabled</option>
                          </select>
                      </div>
                  </div>
                    <div class="col-sm-12 col-lg-12">
                        <div class="form-group">
                            <label>Ad Code:</label> <i class="fa fa-info-circle" data-toggle="tooltip" title="Enter your ad code here"></i>
                            <textarea name="banner_ad_code" class="form-control" value=""></textarea>
                        </div>
                    </div>
                    <div class="col-sm-12 col-lg-4">
                        <div class="form-group">
                            <button type="submit" name="upgrade" class="btn btn-primary btn-sm">Save Settings</button>
                        </div>
                    </div>
            </div>
    
asked by anonymous 18.11.2018 / 00:48

2 answers

0

For manipulation of DOM states it is recommended that you use javascript instead of PHP. As you put a jQuery tag, I believe you already know the library, here is an example of how you could check the state of the select via jQuery:

$("#idDoDropDown").change(function(){
  if($("#idDoDropDown option:selected").text() === "Enabled"){
      
  };
});

The ".change ()" function of jQuery fires whenever there is a value change in the element, so when the user touches the dropdown and selects some value it will execute the function, which in case pick up the selected value in the dropdown and check if it is equal to "Enabled", and then you can work to hide / show textarea.

The jQuery show () and hide () functions can help you work on visibility in textarea.

    
18.11.2018 / 01:27
0
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="col-sm-12 col-lg-6">
    <div class="form-group">
        <label>Banner Ad:</label> <i class="fa fa-info-circle" data-toggle="tooltip" title="Enable or disable Banner Ad"></i>

           <?php if($list_settings['controls'] == 'true') $enabile 'selected' ?>
           <?php if (if($list_settings['controls'] == 'false') $disabile = 'selected' ?>

           <select id="controls" name="controls" class="form-control">
               <option value="true" <?php echo $enabile ?>>Enabled</option>
               <option value="false" <?php echo $disabile ?>>Disabled</option>
           </select>
    </div>
</div>
<div class="col-sm-12 col-lg-12">
    <div class="form-group">
        <label>Ad Code:</label> <i class="fa fa-info-circle" data-toggle="tooltip" title="Enter your ad code here"></i>
        <textarea id="talkbox" name="banner_ad_code" class="form-control">https://i.imgur.com/QtjFP4E.jpg</textarea>
    </div>
</div>
<div class="col-sm-12 col-lg-4">
    <div class="form-group">
        <button type="submit" name="upgrade" class="btn btn-primary btn-sm">Save Settings</button>
    </div>
</div>

<script>

$("#controls option:selected").each(function() {
   var strOption = $(this).val();

      if (stroption=="true"){
        document.getElementById('talkbox').disabled = true;
      }else{
        document.getElementById('talkbox').disabled = false;
      }
});

</script>
    
18.11.2018 / 23:59