Forums

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

momentis 15 Aug, 2012
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
GreyHead 17 Aug, 2012
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
GreyHead 19 Aug, 2012
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
momentis 20 Aug, 2012
Thanks, Bob! I was out end of last week, but I will give this a go.

Thanks again!!!
Rick
momentis 23 Aug, 2012
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?
GreyHead 23 Aug, 2012
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
momentis 24 Aug, 2012
Thanks, Bob, I did not know that!!
momentis 06 Sep, 2012
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.
GreyHead 10 Sep, 2012
Hi Rick,

There's a bracket ) missing in this line:
if ( $('selcone').value == '0' ) {

Bob
momentis 10 Sep, 2012
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!!!
momentis 04 Dec, 2012
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
This topic is locked and no more replies can be posted.