Show text boxes on result of Check box.

Hi

I am trying to produce a form that uses tabs.
In the first tab it has address details in seperate fields i.e Address 1, Address 2, Town, County etc..

On the second tab I want to have a default check box or radio button that says address same as 1st tab, and this will keep address fields hidden in the second tab. If you click the option for address different to 1st Tab it makes the address field visible.

I have seen this http://www.chronoengine.com/faqs/2645-how-can-i-showhide-a-textarea-when-a-checkbox-is-clicked.html in the FAQ's but not sure if this is for v3 or v4. I am using V4. This example only shows for 1 text box where as I want to hide show multiple text boxes.

Any help greatly appreciated.

Regards
Laurie

Hi Laurie,

The example is for Cv4.

You can probably extend it to hide/display a div containing several inputs fairly easily.

Bob

Hi Bob

Could you show me roughly what the code would look like to do that.

I am code dimwit.

Cheers
Laurie

Hello, hope you can help me , im am trying to do as i see in FAQS, i have made a form with a check box with this configuration:
[attachment=2]checkbox.jpg[/attachment]
and a texarea:
[attachment=1]textarea.jpg[/attachment]
i put the textarea as REQUIRED

And i use the following JS code:

var checkbox_id, textarea_id, checkbox, textarea, div;
/* edit the next two lines to match the ids of the elements in your form */
checkbox_id = 'checkbox';
textarea_id = 'textarea';

window.addEvent('domready', function() {
checkbox = $(checkbox_id);
textarea = $(textarea_id);
div = $(textarea_id+'_container_div');
div.dissolve();
showHide();
checkbox.addEvent('click', showHide);
});

function showHide() {
if ( checkbox.checked ) {
div.reveal();
textarea.disabled = false;
} else {
div.dissolve();
textarea.value = '';
textarea.disabled = true;
}
}


In this is my event window:
[attachment=0]backend.jpg[/attachment]

But nothing happens, what iam doing wrong¡?, thanks.

This is my form but the Text area doesnt hide.

[attachment=0]form.jpg[/attachment]

Hi angelmorales,

Do you see any error reports in your browser Web Developer tools Console?

Please post a link to the form so I can take a quick look.

Bob

I realize that the code its working here

but i want to make with 2 text box , how can i do that???:

I try this but it doesnt work (see here:

var checkboxes;
window.addEvent('domready', function() {
  var i, checkbox, text, div, textbox;
  checkboxes = {};
  // link the checkboxes and textarea ids here
  checkboxes['checkbox_1'] = 'text_1' 'text_11;
  checkboxes['checkbox_2'] = 'text_2';
  checkboxes['checkbox_3'] = 'text_3';

  for ( i in checkboxes ) {
    checkbox = $(i);
    textbox = $(checkboxes[i]);
    div = $(textbox.id + '_container_div');
    div.dissolve();
    showHide(i);
    addEventToCheckbox(checkbox);
  }

  function addEventToCheckbox(checkbox) {
    checkbox.addEvent('click', function(event) {
      showHide(event.target.id);
    });
  }
});

function showHide(id) {
  var checkbox, text, div;
  if(typeof id == 'undefined') {
    return;
  }
  checkbox = $(id);
  text = checkboxes[id];
  div = $(text + '_container_div');
  text = $(text);
  if(checkbox.checked) {
    div.setStyle('display', 'block');
    //div.reveal();
    div.setStyle('display', 'block');
    text.disabled = false;
  } else {
    div.setStyle('display', 'none');
    //div.dissolve();
    text.value = '';
    text.disabled = true;
  }
}

Well, actually y want to do it with many text box, hope you can help me , thanks!!

Hi angelmorales,

Please debug your JavaScript!

This line is badly broken :-(

checkboxes['checkbox_1'] = 'text_1' 'text_11;

I didn't read any further.

Bob

I put that way because i want to hide many text boxes,in a manner of speaking i need to hide many textboxes , and display it when the check box became activate i try to do that with your code adding:
checkboxes['checkbox_1'] = 'text_1' 'text_11;

text_11 its the name of the second textbox that i create but it doesnt work:

http://prueba.mktdigitalmasters.com/index.php?option=com_chronoforms&chronoform=VARIOS-Copy

Thankyou very much for your help.

Hi angelmorales,

I'm afraid that you can’t just invent code out of thin air and expect it to work. As I said, that line isn't recognisable JavaScript, there are at least two things that are badly wrong with it. Please debug your code, or get help from someone who had more JavaScript experience.

Bob

Ok i will, thankyou very much!!!