[Last Call] Learn about multicloud storage options and how to improve your company's cloud strategy. Register Now

x
?
Solved

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

Posted on 2010-09-01
6
Medium Priority
?
765 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
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

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

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
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)
Suggested Courses

650 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