To disable textarea when select is set to value false

Asked

Viewed 116 times

-2

I would like to disable the textarea if select is false, and enable if select is true. I was trying to do for DOM, but I did not succeed, below this code I have, in case someone 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>

php html jquery select

2 answers

0


For handling DOM states it is recommended that you use javascript instead of PHP. Since you have placed a jQuery tag, I believe you already know the library, here is an example of how you could check the status of select via jQuery:

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

The function ". jQuery’s change()" triggers whenever there is a value change in the element, so when the user moves the dropdown and selects some value he will perform the function, which in case takes the selected value in the dropdown and checks if it is equal to "Enabled", and then you can work to hide/show the textarea.

jQuery’s show() and Hide() functions can help you work on visibility in the textarea.

  • right, but I did not understand very well how I would disable the textarea if the value of select were in false, could help me please

  • @Leandrofalasca1 You enter a show() or Hide() in the text area, e.g. $("#idTextArea"). Hide() (this command will hide the textarea). So inside the if I put an example you put a . show() and in the if Else you would put . Hide() in the textarea element. Documentation: https://www.w3schools.com/jquery/jquery_hide_show.asp

0

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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

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

Browser other questions tagged php html jquery select

You are not signed in. Login or sign up in order to post.