2

We are using Formassembly to create our forms and currently we have a form which is both used by internal and external users. There is a checkbox in the form which distinguishes between internal & external users. I need the code to check if the "Internal" checkbox is ticked or not, if the "Internal" checkbox is ticked the email field needs to be optional otherwise the email field needs to required. I assume it can be achieved by Javascript or please advise if there is any other way. I have no idea in coding but tried looking up online and tried to code but it doesn't work. Please help.

<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>

<script>


{

//#tfa_78 is the checkbox

 

 
  if($("#tfa_78").is(":checked"))  { 

//#tfa_1 is the email field
 
    this.getField("#tfa_1").required = false;

    }

  else 
  {

    this.getField("#tfa_1").required = true;

  }

  });

});

</script>
Umashankar
  • 21
  • 3

3 Answers3

0

You can use the property onblur on your checkbox to trigger a JS function that check its status an then require or not your email input. The onblur will be trigger each time the checkbox looses focus (so each time it will be changed or clicked).


<input id="tfa_78" type="checkbox" onblur="mailRequired(this.checked)"></input>
<input id="tfa_1" type="mail"></input>


<script>
function mailRequired(checked) {
    if (checked) {
        document.getElementByID('tfa_1').required = true;
    } else {
        document.getElementByID('tfa_1').required = false;
    }
}
</script>
AppyGG
  • 381
  • 1
  • 6
  • 12
0

Due to having JQuery, we can solve the problem as follows

$(document).ready(function() {

//#tfa_78 is the checkbox

  $("#tfa_78").change(function(){

 
  if($("#tfa_78").is(":checked"))  { 
//#tfa_1 is the email field
    $("#tfa_1").attr("placeholder","Optional Email");
    $("#tfa_1").attr("required",false)

    }

  else 
  {
    $("#tfa_1").attr("placeholder","Requierd Email");
    $("#tfa_1").attr("required",true)

  }

  });

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="tfa_78" /> Local User
<br />
<input type="email" id="tfa_1" required placeholder="Requierd" />
Mehrzad Tejareh
  • 635
  • 5
  • 21
  • Thank you so much for your prompt help. Can I ask what is the syntax if the Checkbox is unchecked? is it ($("#tfa_78").is(":unchecked")?? – Umashankar Oct 21 '20 at 08:44
  • your welcome. yes it works fine ? did you find any problem !? if my answer is correct checked it as correct answer. – Mehrzad Tejareh Oct 21 '20 at 08:47
  • It worked fine. I had no issues. I have already marked your answer as useful. Can you please let me know the syntax if the checkbox is not ticked? – Umashankar Oct 21 '20 at 09:17
  • I think [https://stackoverflow.com/questions/11440128/jquery-test-if-checkbox-is-not-checked] will help you. – Mehrzad Tejareh Oct 21 '20 at 09:50
  • I tried if($("#tfa_78").not(":checked")) it is not working :( – Umashankar Oct 21 '20 at 10:35
  • Hi Mehrzad. Sorry for the confusion, I want the email(#tfa_1) field to be optional if the checkbox (#tfa_78) is ticked and required when it is unticked. I tried changing "True to false" and "false to true" in your "If" statement. It is not working. But when I put it back it works. – Umashankar Oct 21 '20 at 11:52
  • try it ... if(!$("#tfa_78").is(":checked")) – Mehrzad Tejareh Oct 21 '20 at 11:52
  • I am confused and sorry for confusing you too. Can you please forget about my code it is a mess. All I need to do is to check if (#tfa_78) "internal" checkbox is ticked and if it is ticked, the email field(#tfa_1) should be optional. If the "Internal" checkbox is unticked, the email field(#tfa_1) should be required. – Umashankar Oct 21 '20 at 12:08
  • Hi Mehrzad.. I dont want "$("#tfa_78").change(function(){" I just want the code to check if the internal checkbox is ticked or not and make the email field required accordingly. – Umashankar Oct 26 '20 at 14:50
0

I managed to get it work. Here is my code. But what if I need it to work if the checkbox is not ticked? will it be $("#tfa_78").is(":checked == false") ?


<script>


$(document).ready(function() {

//#tfa_78 is the checkbox

  $("#tfa_78").change(function(){
  $("#tfa_78").is(":checked")  
  $('#tfa_1').addClass('required')
  });

});

</script>
Umashankar
  • 21
  • 3