Conditional .js function in OC 3.x template

Question

Hoping to get some ideas with current situation, honestly - I'm poor on .js side, so hopefully you'll be able to put me in a right way.

Checkbox (content is visible if checkbox checked, otherwise hidden):

<input type="checkbox" id="myCheck"  onclick="myFunction()"> {{ text_company_purchase }} 
  <div id="text" style="display:none">
    <div class="form-group">
        <label class="control-label" for="input-payment-company">{{ entry_company }}</label>
        <input type="text" name="company" value="{{ company }}" placeholder="{{ entry_company }}" id="input-payment-company" class="form-control" />
    </div>
    <div class="form-group">
        <label class="control-label" for="input-payment-company_code">{{ entry_company_code }}</label>
        <input type="text" name="company_code" value="{{ company_code }}" placeholder="{{ entry_company_code }}" id="input-payment-company_code" class="form-control" />
    </div>
    <div class="form-group">
        <label class="control-label" for="input-payment-vat_code">{{ entry_vat_code }}</label>
        <input type="text" name="vat_code" value="{{ vat_code }}" placeholder="{{ entry_vat_code }}" id="input-payment-vat_code" class="form-control" />
    </div>
</div>

and .js function code:

        <script>
    function myFunction() {
      var checkBox = document.getElementById("myCheck");
      var text = document.getElementById("text");
      if (checkBox.checked == true){
        text.style.display = "block";
    $('.payment-company_code input[name=\'company_code\']').addClass('required');
      } else {
         text.style.display = "none";
$('.payment-company_code input[name=\'company_code\']').removeClass('required');
      }
    }
    </script>

Probably I'm using wrong syntax of checking is mentioned field required. Unless I need add into controller some conditional checking of that field. Appreciate for any comments and ideas. Thank you!

Answer 1

Your input has id="input-payment-company_code", so correct determination in jQuery will be $('#input-payment-company_code'), where # stands for ID.

<script>
  function myFunction() {
    var checkBox = document.getElementById("myCheck");
    var text = document.getElementById("text");
    if (checkBox.checked == true){
      text.style.display = "block";
      $('#input-payment-company_code').addClass('required');
    } else {
      text.style.display = "none";
      $('#input-payment-company_code').removeClass('required');
    }
  }
</script>

Although, to set input as required we need not only a class, but attribute.

<script>
  function myFunction() {
    var checkBox = document.getElementById("myCheck");
    var text = document.getElementById("text");
    if (checkBox.checked == true){
      text.style.display = "block";
      $('#input-payment-company_code').addClass('required');
      $('#input-payment-company_code').prop('required',true); // this will add the attribute `required`
    } else {
      text.style.display = "none";
      $('#input-payment-company_code').removeClass('required');
      $('#input-payment-company_code').prop('required',false); // this will remove the attribute `required`
    }
  }
</script>