[SOLVED] Hide SUBMIT button until a drop-down is selected

I have a form that requires a user to enable a Joomla user account. The drop-down box is a simple Yes/No selection. I want to hide the form's Submit button until a user selects "Yes" from the drop-down box - then it should display. Is there any way to do this?

Or, alternatively, is there a way to validate that "Yes" in the drop-down box has been selected, and stop the processing of the OnSubmit events if it is not?

Thanks!!!
Rick

Hi Rick,

Try something like this:

windows.addEvent('domready', function() {
  $('submit_btn_id').setProperty('disabled', true);
  $('drop_down_id').addEvent('change', function() {
    if ( $('drop_down_id'.value == 'Yes' ) {
      $('submit_btn_id').setProperty('disabled', false);
    } else {
      $('submit_btn_id').setProperty('disabled', true);
    }
  });
});

Bob

Hi Rick,

I've just added this FAQ which is mostly about using an image as a Submit button but also includes disabling the button.

Bob

Thanks, Bob! I was out end of last week, but I will give this a go.

Thanks again!!!
Rick

My Submit button has an ID of 200, and my drop-down has a field ID of 100, so I tried this:

windows.addEvent('domready', function() {
  $('200').setProperty('disabled', true);
  $('100').addEvent('change', function() {
    if ( $('100'.value == 'Yes' ) {
      $('200').setProperty('disabled', false);
    } else {
      $('200').setProperty('disabled', true);
    }
  });
});

And it didn't work. Should I be using the field names?

Hi Rick,

You should be using the IDs but they need to start with a letter not a digit. (Same is true for HTML names.)

Bob

Thanks, Bob, I did not know that!!

I cannot get this to work. I have given an ID to my submit button of 'subone' and my select field an ID of 'selone'. Then, I inserted the following code in a Load JS action in the On Load event:

windows.addEvent('domready', function() {
  $('subone').setProperty('disabled', true);
  $('selone').addEvent('change', function() {
    if ( $('selcone'.value == '0' ) {
      $('subone').setProperty('disabled', false);
    } else {
      $('subone').setProperty('disabled', true);
    }
  });
});

I put the Load JS action before my Show HTML action and after it - neither works.

Hi Rick,

There's a bracket ) missing in this line:

if ( $('selcone').value == '0' ) {

Bob

Thanks, Bob, but it is still not working. I tried moving the Load JS to various positions within the On Load action and none work. I am just giving up. Thanks for the help, though. It is greatly appreciated!!!

Bob,

I wanted to (finally!) update this thread, as the solution to another post of mine will solve this as well.

First of all, the first line of the code must reference 'window' instead of 'windows'.

Second, to enable/disable fields, the following will work:

To enable a field:
$('fieldID').disabled = false;

To disable a field:
$('fieldID').disabled = true;

Hope this helps someone else!

Rick