[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

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

Posted on 2010-09-01
6
Medium Priority
?
772 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 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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
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

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

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

Find out what you should include to make the best professional email signature for your organization.
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
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…
Suggested Courses

868 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