Forums

I have a form I am building, at the moment it only has a few items, then render HTML & Custom JS on load (checkbox hide/show)

My issue is that text fields that are set as "Disabled" or "Hidden" loadstate are still being shown & not disabled.


I am hoping it is something simple,: http://pglleics.org.uk/website/index.php?option=com_chronoforms5&chronoform=secMemberStatus

The bottom group of textboxes should all be HIDDEN apart from surname which should be disabled (for testing purposes).
As you can hopefully see, all are visible and surname is not disabled!

Any ideas how to fix this?

Thank you!

Thank you, now just pulling my hair out trying to find where this 1.8 version is being loaded from - Joomla 3.4.3 should have higher than 1.9 as default, so something somewhere is loading an old version :'(

Hi Nuvelle,

If you are using jQuery Easy check the version settings there. If you aren't using jQuery Easy then please try is as it might fix your problems here.

Bob

Sorted it, but the next problem is that using the event will show parent, but then trying to hide parent does not happen.

I have a set of checkboxes (7) and each one needs to show parent a certain textbox (or set of textboxes) when clicked, but then if it is cleared the same boxes need to be parent hidden again.

I can have them show using events on the checkbox group, but I cannot have them hide on clearing the box!

Any clues on where to start? I tried the script you posted elsewhere, but it seems to have no effect at all as I am using a checkbox group, not an individual one, and I see nowhere in the code to specify what each of my options is linked to?

var checkbox_id, div, textarea_id, checkbox, textarea;
  checkbox_id = 'selectpersonalchanges';
  textarea_id = 'name';

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

I inserted the ID of my checkbox group and a single textbox just to test it.

I found a more fitting guide in the FAQ but still no joy😟

var checkboxes;
window.addEvent('domready', function() {
  var i, checkbox, textarea, div, textbox;
  checkboxes = {};
  // link the checkboxes and textarea ids here
  selectpersonalchanges['addresscb'] = 'address';
  selectpersonalchanges['namecb'] = 'firstnames';
  selectpersonalchanges['emailcb'] = 'email';

  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, textarea, div;
  if(typeof id == 'undefined') {
    return;
  }
  checkbox = $(id);
  textarea = checkboxes[id];
  div = $(textarea + '_container_div');
  textarea = $(textarea);
  if(checkbox.checked) {
    div.setStyle('display', 'block');
    //div.reveal();
    div.setStyle('display', 'block');
    textarea.disabled = false;
  } else {
    div.setStyle('display', 'none');
    //div.dissolve();
    textarea.value = '';
    textarea.disabled = true;
  }
} 

In the above code I used " selectpersonalchanges['addresscb']" - the checkbox group ID is " selectpersonalchanges" and the options are "addresscb" "namecb" and such, is this the correct format?

After the = they are the textbox IDs