Textbox required ONLY if an element is selected from drop-do

Hi Bob,

How could I do, that a textbox filling on my form is required only if a given element is selected from a drop-down list?
How could I extend the default form validation with my own check functions on Submit?

Thanks, Peter

Hi Peter,

Here's how to build a 'Combo Box' with CFv4. That's a linked pair of a select drop-down and a text input set up so that the text box is only enabled (and required) if the 'Other' option is selected in the drop down; otherwise it is empty and disabled.

[list=a]

Add a Drop down element and a Text box element to your form and give them both the same name (I used 'choose_one') but different ids ( I used 'choose_one' for the drop-down and 'choose_one_other' for the text box.

Click the 'required' validation for both boxes (if you want them required).

Drag a Load JS action into the form On Load event and add this code to it:

window.addEvent('domready', function() {
  var select, other;
  select = $('choose_one');
  other  = $('choose_one_other');
  switchOther();
  select.addEvent('change', switchOther);

  function switchOther() {
    if ( select.value == 'other' ) {
      other.disabled = false;
    } else {
      other.value = '';
      other.disabled = true;
    }
  }
});

Change the select = and other = lines to match the ids you have used and the select.value == 'other' to match the value you have set for the 'Other' option in the drop-down.

Save and test the form.

[/list:o]

This form will return a value in $form->data['choose_one'} it will either be the selection from the drop-down or the value entered in the text box if 'Other' is selected in the drop-down.

There is a demonstration form [url=http://greyhead.org/index.php?option=com_chronoforms&chronoform=test_form_other_box]here[/url].

Bob

PS you can extend this to allow the new option to be added to the option list by getting the options from a database table and saving any new results to it. Note: this *always* needs careful house-keeping to keep the list clean and usable.

Hi,

Here's a modified version of this script to work with a radio button group instead of a select drop-down.

window.addEvent('domready', function() {
  var select, other;
  select = $('choose_one_container_div');
  other  = $('choose_one_other');
  switchOther();
  select.addEvent('click', switchOther);

  function switchOther() {
    var checked = $$('input[name=choose_one]:checked');
    if ( checked.length > 0 && checked[0].value == 'other' ) {
      other.disabled = false;
    } else {
      other.value = '';
      other.disabled = true;
    }
  }
});

Note that select is defined using the container div for the whole radio button group and you may also need to change the name value in $$('input[name=[b]choose_one[/b]]:checked');

Bob

Hi!

I used this code for the combo box- and it turned out great!
the only problem is that the second field id disabled and I want it to be hidden. when I use a another function to hide it - the validation doesn't work correctly...

here's the show/hide function:

function hidediv(id) {
	    //safe function to hide an element with a specified id
	    if (document.getElementById) { // DOM3 = IE5, NS6
		    document.getElementById(id).style.display = 'none';
	    }
	   
    }

    function showdiv(id) {
	    //safe function to show an element with a specified id
    		  
	    if (document.getElementById) { // DOM3 = IE5, NS6
		    document.getElementById(id).style.display = 'block';
	    }
	    
    }

Thanks!!

Avia

Hi avia.livneh,

I think this has already been answered in the other posts here.

Bob

Hello,

First I would like to say that this extension is really the thing!

I would like to post a question on the matter of having two different dropdown and comboboxes.

I have a Dropdown list that is about Contribution and a text box Other Contribution.
And another Dropdown that is about Country and a text box Other Country.

I have tried changing the above mentioned script but I think that I am doing something wrong.

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

 var select, other, select2, other2;
  select = $('contribution');
  other = $('contribution_other');

  select2 = $('country');
  other2 = $('country_other');

  switchOther();

  select.addEvent('change', switchOther);
  function switchOther() {
    if ( select.value == 'other' ) {
      other.disabled = false;
    } else if (select.value != 'other' ) {
      other.value = '';
      other.disabled = true;
    } else if ( select2.value == 'other' ) {
      other2.disabled = false;
    } else if ( select2.value != 'other' )  {
      other2.value = '';
      other2.disabled = true;
    }
  }


});

Using the above script only the first dropdown text box group works. tha second is not registering the "change" javascript event?

Can you help?

Thanks a lot in advance.

Hi hellykun,

You haven't added anything to run the selectOther() function when select2 changes. You probably need something like:

select2.addEvent('change', switchOther);

I haven’t tried to check the new function logic.

Bob