Forums

I am building a form for program registration. I would like the answer to a drop-down, at the beginning of the form, to dictate which fields on the form are required. For instance, if a user selects a value of "Y" in the drop down, I would like Fields 1,2 and 3 to be required. If they select "N", then I want Fields 4,5 and 6 to be required. Is this possible?

Would I design the form with all fields set to NOT required, then change the setting based off of the results of the drop down? Would this be done using JS?

Thanks!!
Rick

Looking at a past post of mine (regarding making the Submit button disabled until a drop-down is selected), Bob had provided the following code:

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);
    }
  });
});

I think I can use this as a framework to do what I need. I am going to assume that the property I need to change is called 'required'. Hence, the beginning of the switch would read something like:

if ( $('drop_down_id'.value == 'Yes' ) {
      $('submit_btn_id').setProperty('required', true);

I will post my results once I try this. In the meantime, if someone sees that I am bound for disaster using this method, feel free to give me a shout! 🙂

Rick

Here is the code I have inserted in a LoadJS action in the form's On Load event:

windows.addEvent('domready', function() {
  $('trips').setProperty('required', false);
  $('addrtype').setProperty('required', false);
  $('addr1').setProperty('required', false);
  $('city').setProperty('required', false);
  $('state').setProperty('required', false);
  $('zip').setProperty('required', false);
  $('mobile').setProperty('required', false);
  $('agree').setProperty('required', false);

  $('commit').addEvent('change', function() {
    if ( $('commit').value == 'Y' ) {
       $('trips').setProperty('required', true);
       $('addrtype').setProperty('required', true);
       $('addr1').setProperty('required', true);
       $('city').setProperty('required', true);
       $('state').setProperty('required', true);
       $('zip').setProperty('required', true);
       $('mobile').setProperty('required', true);
       $('agree').setProperty('required', true);
    } else {
       $('trips').setProperty('required', false);
       $('addrtype').setProperty('required', false);
       $('addr1').setProperty('required', false);
       $('city').setProperty('required', false);
       $('state').setProperty('required', false);
       $('zip').setProperty('required', false);
       $('mobile').setProperty('required', false);
       $('agree').setProperty('required', false);
    }
  });
});

It does not seem to do anything. Unfortunately, I know little to nothing about JS, so I am kind of stuck!! LOL

Rick

UPDATE:

Firebug was showing the following error on the form page:

ReferenceError:windows is not defined

So, I changed the first line in the code to:

window.addEvent('domready', function() {

Now what is happening is that all of the fields are being set to required when the form loads, but changing the value of 'commit' does not change the fields to optional.

Got it to work!! If it helps anyone else, here's the final code I used:

window.addEvent('domready', function() {
  $('commit').addEvent('change', function() {
    if ( $('commit').value == 'Y' ) {
       $('addrtype').setProperty('required', 'required');
       $('addr1').setProperty('required', 'required');
       $('city').setProperty('required', 'required');
       $('state').setProperty('required', 'required');
       $('zip').setProperty('required', 'required');
       $('mobile').setProperty('required', 'required');
       $('agree').setProperty('required', 'required');
    } else {
       $('trips').setProperty('required');
       $('addrtype').setProperty('required');
       $('addr1').setProperty('required');
       $('city').setProperty('required');
       $('state').setProperty('required');
       $('zip').setProperty('required');
       $('mobile').setProperty('required');
       $('agree').setProperty('required');
    }
  });
});

The fields were set, by default, to not required. If the drop down (commit) is changed to Y, then the fields are set to required. If 'commit' is changed to 'N', the 'required' attribute is removed and the form is processed.

Many thanks to Bob for his previous help!!!

Rick