?
Solved

Javascript To Set Style.Visability = hidden toggle from ASP variable

Posted on 2010-09-01
6
Medium Priority
?
759 Views
Last Modified: 2012-05-10
I have a function in javascript which looks at a checkbox and when its ticked it hides a table called tblDeliveryAddress, and when unchecked it sets it visible again...
-----------------------------------
<input name="ysnDeliveryIdentical" id="ysnDeliveryIdentical" type="checkbox" tabindex="15" onclick="toggleTable(this);" <% IF RScustomer("intDeliveryBillingIdentical") = 1 THEN Response.Write "checked='checked'" %>>
----------------------------------
<script type="text/javascript">
    function toggleTable(checkbox) {
        if (checkbox.value == "1") {
            checkbox.value = "0";
            document.getElementById("tblDeliveryAddress").style.visibility = "visible";
        }
        else {
            checkbox.value = "1";
            document.getElementById("tblDeliveryAddress").style.visibility = "hidden";
        }
    }
</script>
----------------------------------

This all works fine however i need to pre-populate the tickbox when the page loads so that it it has been checked in the past, it stays checked when the page is reloaded.

Obviously the code in the function works with an onClick handler and setting it to run at runtime wont work either as the checkbox wont have been written from the server to the browser at that time.

My only solution i can think of is to set an ASP variable and pass this to javascript which will then, at run time set the visibility of the table?

Does anyone know of a way to do this, or even better, think of a more simple solution to get this to work?

Thanks,
carl
0
Comment
Question by:net-workx
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
6 Comments
 
LVL 84

Expert Comment

by:Dave Baldwin
ID: 33582281
Looks to me like you could just do an 'onload' to set the visibility.  The 'checked' state is set on the server Before the page is delivered.
<body onload="toggleTable(checkbox)">

Open in new window

0
 

Author Comment

by:net-workx
ID: 33582527
when i do this i get:

'checkbox' is undefined

i changed the line to say:

<body onload="toggleTable(ysnDeliveryIdentical)">

but still the same error?  

the line for the checkbox is:

<input name="ysnDeliveryIdentical" id="ysnDeliveryIdentical" type="checkbox" tabindex="15" onclick="toggleTable(this);" checked='checked'>

any clue on whats going on?  im not too good with JavaScript!
0
 
LVL 84

Expert Comment

by:Dave Baldwin
ID: 33582775
Try instead putting this at the bottom of the page so that it is found after the checkbox is.
<script type="text/javascript">
<!--
toggleTable(ysnDeliveryIdentical);
// -->
</script>

Open in new window

0
Tutorial: Introduction to Managing a Linux Server

In this tutorial on systemd, we will explore:
-OS/Distro Adoption
-chkconfig and Other Legacy Commands
-Summary and Key Commands

 
LVL 3

Accepted Solution

by:
Gjslick earned 2000 total points
ID: 33582793
Hmm, I'm not sure what you're asking exactly.  I see that you are pre-populating the checkbox based on a record from your database.  Is it that you want to maintain the state of the checkbox if the user changes it, and then hits the refresh button to reload the page?  (In which case the table will be hidden or shown based on its checked state?)  If so, then Dave is correct in that you need to do it in an onload handler on the body.  The only problem is that you are not providing toggleTable a correct reference to your checkbox field.  Try this instead:




Your problem might also be, in part, your JavaScript function too in that you are not using the correct property to determine if the checkbox is checked or not.  You don't want to be checking/setting the 'value' property, but just testing the 'checked' property.  Try this as your function:

<script type="text/javascript">
    function toggleTable( checkbox ) {
        var deliveryTable = document.getElementById( "tblDeliveryAddress" );

        if ( checkbox.checked ) {
            deliveryTable.style.visibility = "visible";
        } else {
            deliveryTable.style.visibility = "hidden";
        }
    }
</script>


<script type="text/javascript">
    function toggleTable(checkbox) {
        var deliveryTable = document.getElementById("tblDeliveryAddress");

        if (checkbox.checked) {
            deliveryTable.style.visibility = "visible";
        }
        else {
            deliveryTable.style.visibility = "hidden";
        }
    }
</script>

Open in new window

0
 
LVL 17

Expert Comment

by:Shinesh Premrajan
ID: 33584037
In the bottom of the page

<script type="text/javascript">
<!--
var ysnDeliveryIdentical=document.getElementById("ysnDeliveryIdentical");
toggleTable(ysnDeliveryIdentical);
// -->
</script>

Hope this helps
0
 

Author Closing Comment

by:net-workx
ID: 33587726
Final Code:
---------------------------------------------------------------

---------------------------------------------------------------
<script type="text/javascript">
    function toggleTable(checkbox) {
        var deliveryTable = document.getElementById("tblDeliveryAddress");

        if (checkbox.checked) {
            deliveryTable.style.visibility = "hidden";
        }
        else {
            deliveryTable.style.visibility = "visible";
        }
    }
</script>
---------------------------------------------------------------
<input name="ysnDeliveryIdentical" id="ysnDeliveryIdentical" type="checkbox" tabindex="15" onclick="toggleTable(this);" <% IF RScustomer("intDeliveryBillingIdentical") = 1 THEN %>checked="checked"<% END IF %>>
---------------------------------------------------------------

thanks everyone for all your help
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
Suggested Courses

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question