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
– Diodeus - James MacFarlane, Commented Oct 15, 2013 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. stackoverflow.com/questions/7851868/… — Josh KG
– Josh KG, Commented Oct 15, 2013 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
– AndrewB, Commented Oct 15, 2013 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
– AndrewB, Commented Oct 15, 2013 at 20:15

Josh KG · Accepted Answer · 2013-10-16 16:22:43Z

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, 2013 at 16:22

answered Oct 15, 2013 at 20:06

Josh KG

5,1503 gold badges23 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

AndrewB Over a year ago

Didn't work, I also tried it after altering deliveryAddress = getItem('delAddress'); to deliveryAddress = document.getElementById('deliveryAddress'); - No effect either way

Josh KG Over a year ago

@AndrewB Sorry had some things wrong in the original, I've updated with what should work now. Check the fiddle.

AndrewB Over a year ago

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 · Accepted Answer · 2013-10-16 17:04:18Z

0

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.

answered Oct 16, 2013 at 17:04

AndrewB

3232 silver badges18 bronze badges

Collectives™ on Stack Overflow

Toggle visibility of html using javascript checkbox event

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related