Selected value removing required attribute and hiding span Javascript/JQuery

I have been working on this piece of code for quite a while and I tried a lot of different variations but nothing seems to work. I have to admit that I haven’t worked with Javascript or JQuery that often so maybe I’m just blind to the mistakes I have made.
What I made is form with a lot of fields, where one them is the approved/not approved field. If the user choses the ‘unapproved’ option I want other fields that were required before to not be required anymore and hide the red star that I made. So the fields look like this:

<tr>
    <td class="Label" align="left">
    Type:
    </td>
    <td class="InputValue" align="left">
      <select class="DropdownBox" onchange="functionreq()" name="Approval" id="Approval"/>
        <option value=""></option>
        <option value="YES">Approved</option>
        <option value="NO">Unapproved</option>
      </select>
    </td>
</tr>

<tr>
  <td class="Label" align="left">
    Comment:<span id="hideme" style="color: #ff0000;">*</span>
    </td>
    <td class="InputValue" align="left">
      <input class="InpTxt" name="txtAppName" type="text" id="hide" required/>
    </td>
</tr>

Now I have tried two different things to remove the required attribute and the red star:
My first try looks like this:

<script>
  function functionreq() {
  if ($("#Approval").val() === "NO") {
      var x = document.getElementById("hideme");
      x.style.display = "none";
      $("#hide").removeAttr('required');
  }
</script>

And my second looks like this

<script>
  $('#Approval').on('change', function() {
      $("#hideme").hide();
      $("#hide").removeAttr('required');
  })(jQuery);
</script>

So both of these don’t work and I was wondering if anybody could help me with this or tell me why these are not working. Thank you!

Snippet with typos removed

$('#Approval').on('change', function() {
      $("#hideme").hide();
      $("#hide").removeAttr('required');
  });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<tr>
    <td class="Label" align="left">
    Type:
    </td>
    <td class="InputValue" align="left">
      <select class="DropdownBox" name="Approval" id="Approval"/>
        <option value=""></option>
        <option value="YES">Approved</option>
        <option value="NO">Unapproved</option>
      </select>
    </td>
</tr>

<tr>
  <td class="Label" align="left">
    Comment:<span id="hideme" style="color: #ff0000;">*</span>
    </td>
    <td class="InputValue" align="left">
      <input class="InpTxt" name="txtAppName" type="text" id="hide" required/>
    </td>
</tr>

29 thoughts on “Selected value removing required attribute and hiding span Javascript/JQuery”

  1. You should reveal the input field when the user selects the "Approved" option:

    function functionreq() {
      if ($("#Approval").val() === "NO") {
        $("#hideme").hide();
        $("#hide").removeAttr("required");
      } else if($("Approval").val() === "YES") {
        $("#hideme").show()
        $("#hide").attr("required","true");
      }
    }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <tr>
      <td class="Label" align="left">
        Type:
      </td>
      <td class="InputValue" align="left">
        <select class="DropdownBox" onchange="functionreq()" name="Approval" id="Approval" />
        <option value=""></option>
        <option value="YES">Approved</option>
        <option value="NO">Unapproved</option>
        </select>
      </td>
    </tr>
    
    <tr>
      <td class="Label" align="left">
        Comment:<span id="hideme" style="color: #ff0000;">*</span>
      </td>
      <td class="InputValue" align="left">
        <input class="InpTxt" name="txtAppName" type="text" id="hide" required/>
      </td>
    </tr>
    Reply

Leave a Comment