Solved

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

Posted on 2010-09-01
6
743 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 83

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 83

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
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

 
LVL 3

Accepted Solution

by:
Gjslick earned 500 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

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Cannot open file from ASP if user is "logged in" 13 30
Media Queries  not Firing 6 17
Designing forms 3 17
Help with Javascript to round decimal points to 2 13 15
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

856 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