How can I add the 'required' attribute to input on change of textarea?

Question

I need to add the required attribute to an html select (toDept) under the condition that a textarea (orderComments) has text typed in it. Below is my code... What am I missing? Do I need to run my jquery on a change event or something?

    $(document).ready(function() {
          if ($('#textareaId').val() != '') {
            $("#selectId").attr('required', true);
          }
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<textarea id="textareaId"></textarea>

<select id="selectId">
  <option value=""></option>
  <option value="opt1">opt1</option>
</select>

Thanks for your time!

Solution 1

You need to run the code when the textarea changes:

var textarea = $('#textareaId');
var select = $('#selectId');

var addOrRemoveRequiredAttribute = function () {
    if (textarea.val().length) {
        select.attr('required', true);
    }
    else {
        select.attr('required', false);
    }
};

// Run now
addOrRemoveRequiredAttribute();

// And when textarea changes
textarea.on('change', addOrRemoveRequiredAttribute);

Solution 2

You'll want to check on the change event, or possibly others as well. Here I added your code into an .on() method so it runs after any change event. Then I invoke the change event to do it once on startup.

    $(document).ready(function() {
        $('body').on('change', '#textareaId', function(){
          console.log("test");
          if ($(this).val() != '') {
            $("#selectId").attr('required', true);
          }
        });

        $('#textareaId').change();
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<textarea id="textareaId"></textarea>

<select id="selectId">
  <option value=""></option>
  <option value="opt1">opt1</option>
</select>

Click the run button to see it work. Keep in mind that once the required attribute is set, it is never unset. You would need to an an else clause and unset it if the value is blank.

Solution 3

$(document).ready(function(){
  $("#textareaId").on('change keyup paste', function() {
        $("#selectId").attr('required',true);
  });
});

You need to bind this to the event when the textarea changes

Comments

[Surreal Dreams]

This code is only running when the page loads, and never again.

[powerbuoy]

You should check to make sure the textarea has something entered too.

[MacTheSpiller]

Thanks - I ended up using this code. attr() adds the required attribute to the select like this: required=""... this doesn't work for IE, do you know a way to simply set the the required attribute without the =""?

[powerbuoy]

Hmm not sure I'm following, but I guess you could try select[0].required = true.