Whenever I place a $(".Othertext").attr('required', ''); before the show call for the element it shows the textbox regardless of the button condition. Is there any way to make it so that the textbox is required and shown when the Other button is clicked?

<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="DF4">
     <input type="radio" id="DF4" class="mdl-radio__button" name="DF" value="4">
     <span class="mdl-radio__label">Other - please describe in detail</span>
</label>

<div class="Othertext">
    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
         <input class="mdl-textfield__input" type="text" id="othertext">
         <span class="mdl-textfield__label">Describe...</span>
    </div>
</div>

<script src=".2.1/jquery.min.js"></script>
<script>
  $(document).ready(function(){
      $(".Othertext").hide();
      $('input[type=radio][name=DF]').change(function() {
      if($(this).val() == 4)
          $(".Othertext").show();
      else
          $(".Othertext").hide();
      });
  });
</script>

Whenever I place a $(".Othertext").attr('required', ''); before the show call for the element it shows the textbox regardless of the button condition. Is there any way to make it so that the textbox is required and shown when the Other button is clicked?

<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="DF4">
     <input type="radio" id="DF4" class="mdl-radio__button" name="DF" value="4">
     <span class="mdl-radio__label">Other - please describe in detail</span>
</label>

<div class="Othertext">
    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
         <input class="mdl-textfield__input" type="text" id="othertext">
         <span class="mdl-textfield__label">Describe...</span>
    </div>
</div>

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
  $(document).ready(function(){
      $(".Othertext").hide();
      $('input[type=radio][name=DF]').change(function() {
      if($(this).val() == 4)
          $(".Othertext").show();
      else
          $(".Othertext").hide();
      });
  });
</script>

• javascript
• html
• laravel

1 Answer 1

This works fine for me:

$(document).ready(function() {
  $("#othertext").hide();
  $('input[type=radio][name=DF]').change(function() {
    if($(this).val() == 4) {
        $("#othertext").show();
        $("#othertext").attr('required', '');
    }            
    else {
        $("#othertext").hide();
        $("#othertext").removeAttr('required', '');
    }
  });
});

However remember to use brackets when you have more then 1 line in the if statement.