Toggle visibility of html using javascript checkbox event

Question

I've cobbled together these javascript functions to hide the delivery address fields on my shopping cart address form if goods are going to billing address. The functions toggle visibility of html wrapped by ..

function getItem(id) {
    var itm = false;
    if(document.getElementById)
        itm = document.getElementById(id);
    else if(document.all)
        itm = document.all[id];
    else if(document.layers)
        itm = document.layers[id];
    return itm;
}
function showHideItem(id) {
    itm = getItem(id);
    if(!itm)
        return false;
    if(itm.style.display == 'none')
        itm.style.display = '';
    else
        itm.style.display = 'none';
    return false;
}

It works fine if were loading a new address form, the problem I have is if they submit the form with checkbox ticked, and validation fails, the form reloads with the checkbox ticked but unfortunately the fields are visible so now the removing the checkbox hides the fields!!

<tr><td class="white"><strong>Delivery Address</strong></td>
    <td>Tick <input Type="checkbox" id="deliver_same" value="yes" onClick="showHideItem('delAddress')" />
  If delivery address is billing address</td></tr>
    <tbody id="delAddress">
    <tr><td>Address line 1</td><td><input class="text" name="saddr1" value="" /></td></tr>
    ...
    <tr><td>Post /Zip Code</td><td><input class="text" name="spostalcode" value="" /></td></tr>
</tbody>

I guess what I need is an onload event which hides the fields if checkbox is ticked when the form loads. Having just written that, I might have a go but not confident. Please, no mention of jquery, its not an option at this point of project.

Why not hide the checkbox on the server with style="display"none" if it is checked before spitting the form out to the user again? — Diodeus - James MacFarlane, Oct 15 '13 at 19:36
In your function you should evaluate the "checked" value of the #deliver_same input rather than just toggle for clicks. If checked, HIDE, if not, do SHOW. http://stackoverflow.com/questions/7851868/whats-the-proper-value-for-a-checked-attribute-of-an-html-checkbox — Josh KG, Oct 15 '13 at 19:49
If you mean adding that to the rows I want to hide in the html, what would happen if they unticked the checkbox. It should make the rows reappear and behave exactly as they did when form was fresh — AndrewB, Oct 15 '13 at 20:08
Josh - That would solve half the problem, i.e the checkbox operating in reverse when reloaded but what about hidding the rows via the style toggle if checkbox ticked when form loads? — AndrewB, Oct 15 '13 at 20:15
John?? - I use labels to extend the clickable areas of a link, what what are you referring to in regards my question? — AndrewB, Oct 15 '13 at 20:17
If you use that function also on the onClick for the checkbox, it will check each time the checkbox is clicked. Since its not toggling but actually checking the "checked" value, it won't get it wrong. — Josh KG, Oct 15 '13 at 20:39

Josh KG · Answer 1 · 2013-10-16T16:22:43.750

1

function checkDeliverSame() {
    var deliverSame = getItem('deliver_same');
    var deliveryAddress = getItem('delAddress');
    if (deliverSame.checked) {
        deliveryAddress.style.display = 'none';
    } else {
        deliveryAddress.style.display = 'block';
    }
}
checkDeliverSame();  /* This runs the function on page load */

Put that function, along with your getItem function, right above the </body> tag, and call it in the checkbox input onclick. You will also need to change the id#delAddress element from a tbody to a div so that the getItem function will work on it.

Here's a fiddle: http://jsfiddle.net/JuNhN/1/

edited Oct 16 '13 at 16:22

answered Oct 15 '13 at 20:06

Josh KG

5,050
3
20
24

Didn't work, I also tried it after altering deliveryAddress = getItem('delAddress'); to deliveryAddress = document.getElementById('deliveryAddress'); - No effect either way – AndrewB Oct 16 '13 at 10:25
@AndrewB Sorry had some things wrong in the original, I've updated with what should work now. Check the fiddle. – Josh KG Oct 16 '13 at 16:47
I marked your answer up as helpful but already had a working version by the time I saw your latest post. I'm developing the application on Lotus Domino, which complicates things slightly. – AndrewB Oct 16 '13 at 17:09

score 0 · Answer 2 · answered Oct 16 '13 at 17:04

I modified Josh's function to make it more generic, prefer document.getElementById() too as it fits in better with itm.style.display. I don't entirely trust checkDeliverSame(); going for a direct call in the html shortly after the closing tag.

function checkHiddenRows(id) {
    deliverSame = getItem('deliver_same');
    itm = document.getElementById(id);
    if (deliverSame.checked == true) {
        itm.style.display = 'none';
    } // else { alert('Checkbox not checked') } // Verify the checkbox state
}

<script>checkHiddenRows('deliveryAddress');</script>

The form is now working as intended.

Toggle visibility of html using javascript checkbox event

2 Answers2