Enable submit on two controlevents

Morning

I load a form with submit disabled. I want to enable the submit based on events on two fields. I can enable it if either are set easily enough. . But how do I do that if both field 1 and field 2 are set but not if none or only one are set.

Is that possible and if so how?

Regards

Nick

Hi Nick,

Please check the last example in this FAQ

Bob

Thanks Bob - Now why couldn't I find that???😶

Nick

A problem though. I didn't mention that the two fields that I wanted to use are radio boxes. I want to ensure that a user makes a selection from both radio boxes before the Submit was enabled. Clearly I can catch that after submit has been clicked by making both fields required but thought that making the Submit disabled or invisible until they had both been clicked would tighten things up.. And the trouble is that there is no custom validation on radio buttons it seems.

Nick

Hi Nick,

Something like this will do it:

jQuery(document).ready(function(jQ) {
  // run the check on page load and when a radio changes
  checkRadios();
  jQ('input[name=radio1]').on('click', checkRadios);
  jQ('input[name=radio2]').on('click', checkRadios);

  function checkRadios() {
    if ( jQ('input[name=radio1]:checked').length 
        && jQ('input[name=radio2]:checked').length) {
      jQ('#submit_btn').show();
    } else {
      jQ('#submit_btn').hide();
    }
  }
});

Change the names and submit button ID to match yours. This version hides the submit button until both radios are set but you can change that to disable it.

Bob

PS You can also attach a custom validation to radio buttons using class=validation['custom:fn_name']

Thanks Bob - I will give it a whirl.

Nick

Hi Bob
I post this as others might use it. Your code worked fine but I needed to add to it so that should one of the radios be switched from 'Yes' to 'No' then the submit button would be hidden again. This works though no doubt a clumsy piece of code now. One day i really will learn JQuery! One day.

jQuery(document).ready(function (jQ) {
  // run the checkon page load and when a radio changes
  checkRadios();
  jQ('input[name=AgreeSignedM]').on('click', checkRadios);
  jQ('input[name=AgreeSignedP]').on('click', checkRadios);

  function checkRadios() {
    var AgreeSignedM=(jQ('input[name=AgreeSignedM]:checked'));
    var vAgreeSignedM=0;
    if (AgreeSignedM.length>0){
      vAgreeSignedM=AgreeSignedM.val();
    } else {
      vAgreeSignedM=0;
    }
    var AgreeSignedP=(jQ('input[name=AgreeSignedP]:checked'));
    var vAgreeSignedP=0;
    if (AgreeSignedP.length>0){
      vAgreeSignedP=AgreeSignedP.val();
    } else {
      vAgreeSignedP=0;
    }
    var checkRadios= vAgreeSignedM+ vAgreeSignedP;
    if (checkRadios == '11') {
      jQ('#njjoidSubmitApplication').show();
    } else {      
      jQ('#njjoidSubmitApplication').hide();
    }
  }
});