Sunday, July 6, 2014
Hide and show a form in a link in jQuery
In jQuery to toggle a form from alink:
< !DOCTYPE html>
<html>
<head>
<script
src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript">
</script>
<script>
function revealnewpersondetails()
{
$('#newpersondetails').toggle();
}
</script>
</head>
<body>
<h1>Hide and show a form in a link in JavaScript</h1>
<a href="javascript:revealnewpersondetails()">To add a new person, please fill in his/her details</a>.
<p></p>
<div id="newpersondetails" style="margin: 5px 5px 5px 20px; padding: 1px;display:none ">
<label style="display: block; float: left;">Surname(<font color="red">*</font>): <br>
<input name="lastname" value="" size="8" maxlength="128" type="text"></label>
<label style="display: block; float: left;">First name(<font color="red">*</font>): <br>
<input name="firstname" value="" size="8" maxlength="128" type="text"></label>
<label style="display: block; float: left;">Position <br>
<input name="honorifics" value="" size="7" maxlength="128" type="text"></label>
<label style="display: block; float: left;">Location: <br>
<input name="room" value="" type="text"></label>
<label style="display: block; float: left;">Email: <br>
<input name="email" value="" size="17" maxlength="128" type="text"></label>
<label style="display: block; float: left;">Home division: <br>
<select name="deptid">
<option value="1">Cardiac-Surgery</option><option value="2"> General-Surgery</option><option value="3">Neurosurgery</option><option value="4">Otolaryngology Head and Neck Surgery</option><option value="5">Pediatric-Surgery</option><option value="6">Plastic-Surgery</option><option value="7">Radiation Oncology and Developmental Radiotherapeutics</option><option value="8">Thoracic-Surgery</option><option value="9">Vascular-Surgery</option><option value="10">Others</option> </select>
</label>
<input value="Add new person" style="display: block;clear:both;" type="submit">
<input name="action" value="newperson" type="hidden">
</div>
</body>
</html>
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment