|
|
|
|
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> | |
|
|
| Simple Javascript CSS Digital Clock
Categories : Java Script, Date Time, CSS, Beginner Guides, Web Design | | | Validating a URL with JavaScript RegExp
Categories : Java Script, Data Validation, Beginner Guides | | | Easy alert box pop-up function
Categories : PHP, Java Script, Beginner Guides | | | Ajax - Perform a simple server side request and update the current HTML page.
Categories : AJAX, Java Script, Beginner Guides | | | Show hide table rows to make dynamic forms
Categories : Beginner Guides, Java Script, Form Processing, HTTP | | | Form Processing : with alert Highlight field name which is not filled by user
Categories : Java Script, Form Processing, Data Validation, Beginner Guides, Web Design | | | Local Time clock and Server time usign PHP and JavaScript
Categories : PHP, Java Script, Date Time, 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 | | | PHP and javascript mouseover, mouseout, and mousedown events
Categories : PHP, Java Script, Form Processing, Beginner Guides | | | Get your browser details using javascript
Categories : Java Script, Beginner Guides, Browsers | | | Changing the Style of form objects using the JavaScript OnClick method.
Categories : Java Script, Form Processing, Beginner Guides, CSS | | | Show or Hide your Content using Javascript
Categories : Java Script, HTML, CSS, Beginner Guides | | | JavaScript dropdown list menu to switch any page.
Categories : Java Script, Beginner Guides, Form Processing | | | Newbie Notes #9 - Hyperlinking a post
Categories : PHP, Java Script, HTML and PHP, Beginner Guides | | | Run a function once per session.
Categories : Beginner Guides, Java Script, Cookies | |
| | | | 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.
| |
|
|
|
