|
|
|
|
Like this code?
Show the author your appreciation.
|
|
| |
This is an example of how you can dynamically show and hide portions of a form or document by using an actuator like "onChange" or "onClick".
This is useful for forms, or a document were you might want to expand information if a person clicks the "more" link.
The example below uses a form toggle,
Be sure that when you call the function that you enclose the ID of the item in single quotes ''.
I will be posting examples of other practical uses later.
|
<html>
<head>
<title>toggle_it() Demo</title>
<script language="javascript">
function toggle_it(itemID){
// Toggle visibility between none and inline
if ((document.getElementById(itemID).style.display == 'none'))
{
document.getElementById(itemID).style.display = 'inline';
} else {
document.getElementById(itemID).style.display = 'none';
}
}
</script>
<style type="text/css">
<!--
.style5 {font-family: Arial, Helvetica, sans-serif; font-size: 10; }
.style7 {font-family: Arial, Helvetica, sans-serif; font-size: 10px; }
-->
</style>
<body>
<form name="test" action="" method="post">
<table width="199">
<tr class="style7">
<td width="50%" align="right" height="23" valign="middle"><a href="#" onClick="toggle_it('pr1')">Toggle Form?</a> :</td>
<td height="23" valign="middle" >
</td>
</tr>
<tr >
<td colspan="2">
<!--
This is the table we will be showing, or hiding. Note it's id.
If you are producing a series of table rows from a database,
you can give each row a dynamic id, perhaps the key for the row from the database,
and use the show hide property for extended information, streamlining your page's presentation,
but still giving the availability of all the information without additional page loads.
-->
<table width="100%" id="pr1" name="police_response1" style="display:none;">
<tr>
<td align="right"><span class="style7">Drop Box 1:</span></td>
<td><span class="style5">
<SELECT NAME='Numbers' class="style7" ID='Numbers'>
<option value='00'>00</option>
<option value='01'>01</option>
<option value='01'>01</option>
<option value='01'>01</option>
</SELECT>
</span> </td>
</tr>
<tr>
<td align="right"><span class="style7">Report Number:</span></td>
<td><INPUT NAME='Text' TYPE='textbox' class="style7" VALUE='' SIZE='12'></td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</body>
</html> | |
|
|
| Store, retrieve and delete cookies using JavaScript.
Categories : Java Script, Cookies, Beginner Guides, Cookies | | | Validating a URL with JavaScript RegExp
Categories : Java Script, Data Validation, Beginner Guides | | | Newbie Notes #9 - Hyperlinking a post
Categories : PHP, Java Script, HTML and PHP, Beginner Guides | | | Form Processing : with alert Highlight field name which is not filled by user
Categories : Java Script, Form Processing, Data Validation, Beginner Guides, Web Design | | | Easy alert box pop-up function
Categories : PHP, Java Script, Beginner Guides | | | Run a function once per session.
Categories : Beginner Guides, Java Script, Cookies | | | Simple Javascript CSS Digital Clock
Categories : Java Script, Date Time, CSS, Beginner Guides, Web Design | | | Show or Hide your Content using Javascript
Categories : Java Script, HTML, CSS, Beginner Guides | | | Ajax - Perform a simple server side request and update the current HTML page.
Categories : AJAX, Java Script, Beginner Guides | | | Fancy "Quick Access" Navigation Link
Categories : Java Script, Navigation, User Interface, DHTML, Beginner Guides | | | PHP and javascript mouseover, mouseout, and mousedown events
Categories : PHP, Java Script, Form Processing, Beginner Guides | | | Conditional Check - a script that allows a user to submit a form only if the user check a checkbox.
Categories : HTML, Java Script, Form Processing, Beginner Guides | | | Changing the Style of form objects using the JavaScript OnClick method.
Categories : Java Script, Form Processing, Beginner Guides, CSS | | | JavaScript dropdown list menu to switch any page.
Categories : Java Script, Beginner Guides, Form Processing | | | Show hide table rows to make dynamic forms
Categories : Beginner Guides, Java Script, Form Processing, HTTP | |
| | | | Brian Greenwood wrote :1656
Please note, I did not test this in IE - it acts very weird in there... I will post a follow up fix. Works great in FireFox on the Mac though :)
My fault for posting prior to testing.
| |
|
|
