Javascript on Republish

andyss 09 Oct, 2010
Hi guys, I was wondering if you could help me with a problem I'm having on one of my forms. I have a checkbox that shows or hide a list item when checked/unchecked when called like so:

onclick="showHide(this,'li_16')"


The function is as follows:

function showHide(obj,li)
{
    if(obj.checked){
        document.getElementById(li).style.display = 'block';
    }
    else{
        document.getElementById(li).style.display = 'none';
    }
}


It functions fine showing or hiding the list item when checked/unchecked. The problem I'm having is that if the form throws a validation error on submit, if the checkbox is checked, the republished form has the list item hidden. How do I have it so that if the checkbox is checked that on republish the list shows visible.

Make sense?

Thanks,

Andy
GreyHead 09 Oct, 2010
Hi Andy,

Makes sense I think - can you post a link to the form - or post the relevant bit of the Form HTML here please?

Bob
andyss 09 Oct, 2010
The checkbox:

<input id="element_13_1" name="Service" type="checkbox" value="yes"  onclick="showHide(this,'li_21')" />


The function called:

function showHide(obj,li)
    {
        if(obj.checked){
            document.getElementById(li).style.display = 'block';
        }
        else{
            document.getElementById(li).style.display = 'none';
        }
    }


The List Item:

<li id="li_21" style="display:none;">

<input id="element_21_1" name="origin" type="checkbox" value="yes"  />

<input id="element_21_2" name="destination" type="checkbox" value="yes"  />

</li>


I hope that is sufficient enough parts of the form code.

Andy
GreyHead 10 Oct, 2010
Hi Andy,

I got this working after a fashion with this code:
window.addEvent('domready', function() {
  $('element_13_1').addEvent( 'click', function() {
    if ($('element_13_1').checked) {
      $('li_21').setStyle('display', 'block');
    } else {
      $('li_21').setStyle('display', 'none');
    }
  });
  if ($('element_13_1').checked) {
    $('li_21').setStyle('display', 'block');
  } else {
    $('li_21').setStyle('display', 'none');
  }
});
For some reason - probably my lack of JavaScript skills I couldn't get it to work using a function call. I'm sure that is fixable given more skill/time.

NB this doesn't need the script call from the Form HTML

Bob
andyss 11 Oct, 2010
Thanks Bob, it worked! Given my limited knowledge of scripting, I wonder how to call it as a function especially if you have many such items to show.
This topic is locked and no more replies can be posted.