Solved

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

Posted on 2010-09-01
6
739 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
6 Comments
 
LVL 82

Expert Comment

by:Dave Baldwin
Comment Utility
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
Comment Utility
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 82

Expert Comment

by:Dave Baldwin
Comment Utility
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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 3

Accepted Solution

by:
Gjslick earned 500 total points
Comment Utility
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:shinuq
Comment Utility
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
Comment Utility
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

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now