how to include a calender in a web page - javascript

hi i wanted to include a calender in my web page and after googling it i found this code
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$("#datepicker").datepicker();
});
</script>
</head>
<body>
<table>
<tr>
<td>
DOB</td><td> <input id="datepicker" readonly/></td>
</tr>
</table>
</body>
</html>
now i wanted to add this in my web page.so within the head i wrote
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$("#datepicker").datepicker();
});
</script>
and in input field i wrote
but calender is not opening when i click on the field.If you want my full code then it is as follows
<!DOCTYPE html> <!-- The new doctype -->
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<title>home</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body> <script>
$(document).ready(function() {
$("#datepicker").datepicker();
});
</script>
<section id="page" > <!-- Defining the #page section with the section tag -->
<header > <!-- Defining the header section of the page with the appropriate tag -->
<hgroup>
<h1>Your Logo</h1>
<h3>and a fancy slogan</h3>
</hgroup>
<nav class="clear"> <!-- The nav link semantically marks your main site navigation -->
<ul>
<li>Personal Information</li>
<li>Medical History</li>
<li>Insurance Information</li>
</ul>
</nav>
</header>
<section id="articles"> <!-- A new section with the articles -->
<!-- Article 1 start -->
<div class="line"></div> <!-- Dividing line -->
<article id="article1"> <!-- The new article tag. The id is supplied so it can be scrolled into view. -->
<h2>Personal Information</h2>
<div class="line"></div>
<div class="articleBody clear">
<div >
<div style="float: left; padding-left: 50px; padding-top: 5px">
<table cellspacing="10" cellpadding="10" >
<tr>
<td width="200" height="30">
<b>Last Name</b>
</td>
<td>
<input type="text" name="lastname" value=""/>
</td>
</tr>
<tr>
<td height="30">
<b>First Name</b>
</td>
<td>
<input type="text" name="lastname" id="twoo" value=""/>
</td>
</tr>
<tr>
<td height="30">
<b>Date of Birth</b>
</td>
<td>
<input id="datepicker" readonly/>
</td>
</tr>
<tr>
<td height="30">
<b>Gender</b>
</td>
<td >
Male<input type="radio" name="lastname" value="male"/>
Female<input type="radio" name="lastname" value="male"/>
</td>
</tr>
<tr>
<td height="30">
<b>Occupation</b>
</td>
<td>
<input type="text" name="lastname" value=""/>
</td>
</tr>
<tr>
<td height="30">
<b>Race</b>
</td>
<td>
<input type="text" name="lastname" value=""/>
</td>
</tr>
<tr>
<td height="30">
<b>Mobile</b>
</td>
<td>
<input type="text" name="lastname" value=""/>
</td>
</tr>
<tr>
<td height="30">
<b>Phone</b>
</td>
<td>
<input type="text" name="lastname" value=""/>
</td>
</tr>
<tr>
<td height="30">
<b>Email</b>
</td>
<td>
<input type="text" name="lastname" value=""/>
</td>
</tr>
</table>
</div>
<div style="float: right;padding-right: 50px;padding-top: 50px">
<table>
<tr>
<td width="160" height="30">
<b>Address</b>
</td>
<td>
<input type="text" name="lastname" value=""/>
</td>
</tr>
<tr>
<td height="30">
<b>Street</b>
</td>
<td>
<input type="text" name="lastname" value=""/>
</td>
</tr>
<tr>
<td height="30">
<b>City</b>
</td>
<td>
<input type="text" name="lastname" value=""/>
</td>
</tr>
<tr>
<td height="30">
<b>State</b>
</td>
<td>
<input type="text" name="lastname" value=""/>
</td>
</tr>
<tr>
<td height="30">
<b>Country</b>
</td>
<td>
<input type="text" name="lastname" value=""/>
</td>
</tr>
<tr>
<td height="30">
<b>Pin Code</b>
</td>
<td>
<input type="text" name="lastname" value=""/>
</td>
</tr>
<tr>
<td height="30">
<b>Height</b>
</td>
<td>
<input type="textbox" name="lastname" value=""/>
</td>
</tr>
<tr>
<td height="30">
<b>Weight</b>
</td>
<td>
<input type="textbox" name="lastname" value="" height="10" width="10"/>
</td>
</tr>
<td height="30">
<b>BP</b>
</td>
<td>
<input type="textbox" name="lastname" value="" height="10" width="10"/>
</td>
</tr>
<td height="30">
<b>Blood Group</b>
</td>
<td>
<input type="textbox" name="lastname" value="" height="10" width="10"/>
</td>
</tr>
</table><div align="center" style="padding-top: 30px">
</div>
</div>
</div>
</div>
</article>
<!-- Article 1 end -->
<!-- Article 2 start -->
<div class="line"></div>
<div class="space"></div> <div class="space"></div> <div class="space"></div> <div class="space"></div>
<div class="space"></div><div class="space"></div><div class="space"></div><div class="space"></div><div class="space"></div><div class="space"></div><div class="space"></div>
<div class="space"></div><div class="space"></div><div class="space"></div><div class="space"></div><div class="space"></div><div class="space"></div>
<article id="article2">
<h2>Medical History</h2>
<div class="line"></div>
<div class="articleBody clear"><!--
<figure>
<img src="medical.jpg" width="620" height="440" /></a>
</figure>
<p><div align="center" style="padding-top: 30px">
<table cellspacing="10" cellpadding="10">
<tr>
<td width="200" height="30"><h5>Old Password</h5></td>
<td height="30"><input name="old" type="password"></td>
</tr>
<tr>
<td height="30"><h5>New Password</h5></td>
<td height="30"><input name="newPsw" type="password"></td>
</tr>
<tr>
<td height="30"><h5>Confirm Password</h5></td>
<td height="30"><input name="confirm" type="password"></td>
</tr>
</table>
</div> -->
<div style="float: left; padding-left: 50px; padding-top: 5px">
<table cellspacing="10" cellpadding="10" >
<tr>
<td width="200" height="30">
<b>Diabetes</b>
</td>
<td>
<input type="radio" name="lastname" value=""/>
</td>
</tr>
<tr>
<td height="30">
<b>Insulin</b>
</td>
<td>
<input type="radio" name="lastname" value=""/>
</td>
</tr>
<tr>
<td height="30">
<b>Obesity</b>
</td>
<td>
<input type="radio" name="lastname" value=""/>
</td>
</tr>
<tr>
<td height="30">
<b>Hypertension</b>
</td>
<td >
<input type="text" name="lastname" value=""/>
</td>
</tr>
<tr>
<td height="30">
<b>Pancreatis</b>
</td>
<td>
<input type="text" name="lastname" value=""/>
</td>
</tr>
<tr>
<td height="30">
<b>Renal Problems</b>
</td>
<td>
<input type="text" name="lastname" value=""/>
</td>
</tr>
<tr>
<td height="30">
<b>Neuropathy</b>
</td>
<td>
<input type="text" name="lastname" value=""/>
</td>
</tr>
<tr>
<td height="30">
<b>Amputations</b>
</td>
<td>
<input type="text" name="lastname" value=""/>
</td>
</tr>
<tr>
<td height="30">
<b>GERD</b>
</td>
<td>
<input type="text" name="lastname" value=""/>
</td>
</tr>
<tr>
<td height="30">
<b>Cardiac Problem</b>
</td>
<td>
<input type="text" name="lastname" value=""/>
</td>
</tr>
<tr>
<td height="30">
<b>Retinal Problem</b>
</td>
<td>
<input type="text" name="lastname" value=""/>
</td>
</tr>
</table>
</div>
<div style="float: right;padding-right: 50px;padding-top: 50px">
<table>
<tr>
<td width="160" height="30">
<b>Sleep Arnoea</b>
</td>
<td>
<input type="text" name="lastname" value=""/>
</td>
</tr>
<tr>
<td height="30">
<b>Erectile Dysfunction</b>
</td>
<td>
<input type="text" name="lastname" value=""/>
</td>
</tr>
<tr>
<td height="30">
<b>Thyroid Problem</b>
</td>
<td>
<input type="text" name="lastname" value=""/>
</td>
</tr>
<tr>
<td height="30">
<b>Liver Problem</b>
</td>
<td>
<input type="text" name="lastname" value=""/>
</td>
</tr>
<tr>
<td height="30">
<b>Constipation</b>
</td>
<td>
<input type="text" name="lastname" value=""/>
</td>
</tr>
<tr>
<td height="30">
<b>Asthma</b>
</td>
<td>
<input type="text" name="lastname" value=""/>
</td>
</tr>
<tr>
<td height="30">
<b>TB</b>
</td>
<td>
<input type="textbox" name="lastname" value=""/>
</td>
</tr>
<tr>
<td height="30">
<b>Diet Control</b>
</td>
<td>
<input type="radio" name="lastname" value="" height="10" width="10"/>
</td>
</tr>
<td height="30">
<b>Craving for Sweets</b>
</td>
<td>
<input type="radio" name="lastname" value="" height="10" width="10"/>
</td>
</tr>
<td height="30">
<b>Smoking</b>
</td>
<td>
<input type="radio" name="lastname" value="" height="10" width="10"/>
</td>
</tr>
</table>
<div class="footer-bar" align="center" style="padding-top: 30px">
<table align="center" >
<tr >
<td width="100" align="center"><input type="submit" class="button button-submit" value="Submit" /></td>
<td width="100" align="center"><input type="reset" class="button button-submit" value="Reset" /></td>
</tr>
</table>
</div></p>
<p></p>
</div>
</article>
<!-- Article 2 end -->
<!-- Article 3 start -->
<div class="line"></div>
<article id="article3">
<h2>Insurance Information</h2>
<div class="line"></div>
<div class="articleBody clear"><!-- -->
<div style="float: left; padding-left: 50px; padding-top: 5px">
<table cellspacing="10" cellpadding="10" >
<tr>
<td height="30">
<b>Insurance Company Name</b>
</td>
<td>
<input type="text" name="lastname" value=""/>
</td>
</tr>
<tr>
<td height="30">
<b>Policy Name</b>
</td>
<td>
<input type="text" name="lastname" value=""/>
</td>
</tr>
<tr>
<td height="30">
<b>Policy No</b>
</td>
<td>
<input type="text" name="lastname" value=""/>
</td>
</tr>
<tr>
<td height="30">
<b>Validity</b>
</td>
<td>
<input type="text" name="lastname" value=""/>
</td>
</tr>
</table>
</div>
<div style="float: right;padding-right: 50px;padding-top: 50px">
<table>
<tr>
<td height="30">
<b>Constipation</b>
</td>
<td>
<input type="text" name="lastname" value=""/>
</td>
</tr>
<tr>
<td height="30">
<b>Asthma</b>
</td>
<td>
<input type="text" name="lastname" value=""/>
</td>
</tr>
<tr>
<td height="30">
<b>TB</b>
</td>
<td>
<input type="textbox" name="lastname" value=""/>
</td>
</tr>
</tr>
</table>
<div class="footer-bar" align="center" style="padding-top: 30px">
<table align="center" >
<tr >
<td width="100" align="center"><input type="submit" class="button button-submit" value="Submit" /></td>
<td width="100" align="center"><input type="reset" class="button button-submit" value="Reset" /></td>
</tr>
</table>
</div></p>
<p></p>
</div>
</article>
<!-- Article 3 end -->
</section>
<footer> <!-- Marking the footer section -->
<div class="line"></div>
<p>Copyright 2013 - mysite.com</p>
Go UP
spanwave
</footer>
</section> <!-- Closing the #page section -->
<!-- JavaScript Includes -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="jquery.scrollTo-1.4.2/jquery.scrollTo-min.js"></script>
<script src="script.js"></script>
</body>
</html>
i have been trying to sort out the error since last one hour but could not fix it.


it is because your input field is readonly
<input id="datepicker" readonly/>
//----^^^^---here
so the click on input won't fire thus.. not firing the datepicker , removing that(readonly) should work


Just remove the last two scripts you have included in bottom .You have already included jquery script at top.It will work fine
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="script.js"></script>

Related

Placing Check Boxes Next To Each Other

I want to place the check boxes and the tables next to each other with a proper alignment. I can seem to put the three check boxes that I've created beside each other in the same row but I am unable to align them all properly and neatly. I find some difficulties in formatting them by using Notepad++ as my developing tool.
Need help on this one.
Here is the CSS and HTML codes. Under this HTML section, the check boxes consist of respective table created in them. I have separated all the codes with the comment 'Scenario 1,2,3 and Main'.
td.left {
text-align: left;
}
th {
border: 1.5px solid #4682B4;
text-align: center;
padding: 2px;
}
<!--Scenario 1-->
<form id="checkbox1" method="get" align="left" style="display: inline-block; width:30%;">
<table style="width:20%" align="left">
<input type="checkbox" value="select" align="center" id="check1"> Calculate The Number of Head Count When Days Are Fixed<br>
<tr>
<td>Number of Days</td>
<td class="left"><input type="text" id="numDays" /></td>
</tr>
<tr>
<td>Head Count</td>
<td class="left"><input type="text" name="hc" id="hc" /> Per Shift</td>
</tr>
</table>
</form>
<!--End of Form For Scenario 1-->
<!--Scenario 2-->
<form id="checkbox2" method="get" align="left" style="display:inline-block; width:30%;">
<table style="width:20%" align="left">
<input type="checkbox" value="select" align="center" id="check2"> Calculate The Number of Days When Head Counts Are Fixed<br>
<tr>
<td>Number of Head Count</td>
<td class="left"><input type="text" id="numHeadC" /></td>
</tr>
<tr>
<td>Number of Days</td>
<td class="left"><input type="text" name="days" id="days" /> Days</td>
</tr>
</table>
</form>
<!--End of Form For Scenario 2-->
<!--Scenario 3-->
<form id="checkbox3" method="get" align="left" style="display: inline-block; width:30%;">
<table style="width:20%" align="left">
<input type="checkbox" value="select" align="center"> Calculate The Number of Head Counts According to The Daily Output<br>
<tr>
<td>Daily Output</td>
<td class="left"><input type="text" id="output" /></td>
</tr>
<tr>
<td>Headcount II</td>
<td class="left"><input type="text" name="hcperday" id="hcperday" /> Per Shift</td>
</tr>
</table>
</form>
<!--End of Form For Scenario 3-->
<br><br><br>
<!--Main-->
<form id="radioForm2" method="get" align="center">
<table style="width:30%" align="center">
<tr>
<td>Total</td>
<td class="left"><input type="text" name="total" id="total" align="center" /> Seconds</td>
</tr>
<tr>
<td>Standard Hour</td>
<td class="left"><input type="text" name="stdHour" id="stdHour" align="center" /> Hour</td>
</tr>
<tr>
<td>Earn Hour</td>
<td class="left"><input type="text" name="earnHour" id="earnHour" /> Hour</td>
</tr>
<tr>
<td>Output Per Day</td>
<td class="left"><input type="text" name="perday" id="perday" /> Per Day</td>
</tr>
</table>
</form>
<!--End of Form-->
<br><br><br>

I put the corrected input in an answer to show how it should look like. The comment is not the right place for html snippets. But this answer did still not resolve the view problem.
td.left {
text-align: left;
}
th {
border: 1.5px solid #4682B4;
text-align: center;
padding: 2px;
}
<!--Scenario 1-->
<form id="checkbox1" method="get" align="left" style="display: inline-block; width:30%;">
<table style="width:20%" align="left">
<tr>
<td colspan="2"><input type="checkbox" value="select" align="center" id="check1"> Calculate The Number of Head Count When Days Are Fixed</td>
</tr>
<tr>
<td>Number of Days</td>
<td class="left"><input type="text" id="numDays" /></td>
</tr>
<tr>
<td>Head Count</td>
<td class="left"><input type="text" name="hc" id="hc" /> Per Shift</td>
</tr>
</table>
</form>
<!--End of Form For Scenario 1-->
<!--Scenario 2-->
<form id="checkbox2" method="get" align="left" style="display:inline-block; width:30%;">
<table style="width:20%" align="left">
<tr>
<td colspan="2"><input type="checkbox" value="select" align="center" id="check2"> Calculate The Number of Days When Head Counts Are Fixed</td>
</tr>
<tr>
<td>Number of Head Count</td>
<td class="left"><input type="text" id="numHeadC" /></td>
</tr>
<tr>
<td>Number of Days</td>
<td class="left"><input type="text" name="days" id="days" /> Days</td>
</tr>
</table>
</form>
<!--End of Form For Scenario 2-->
<!--Scenario 3-->
<form id="checkbox3" method="get" align="left" style="display: inline-block; width:30%;">
<table style="width:20%" align="left">
<tr>
<td colspan="2"><input type="checkbox" value="select" align="center"> Calculate The Number of Head Counts According to The Daily Output</td>
</tr>
<tr>
<td>Daily Output</td>
<td class="left"><input type="text" id="output" /></td>
</tr>
<tr>
<td>Headcount II</td>
<td class="left"><input type="text" name="hcperday" id="hcperday" /> Per Shift</td>
</tr>
</table>
</form>
<!--End of Form For Scenario 3-->
<br><br><br>
<!--Main-->
<form id="radioForm2" method="get" align="center">
<table style="width:30%" align="center">
<tr>
<td>Total</td>
<td class="left"><input type="text" name="total" id="total" align="center" /> Seconds</td>
</tr>
<tr>
<td>Standard Hour</td>
<td class="left"><input type="text" name="stdHour" id="stdHour" align="center" /> Hour</td>
</tr>
<tr>
<td>Earn Hour</td>
<td class="left"><input type="text" name="earnHour" id="earnHour" /> Hour</td>
</tr>
<tr>
<td>Output Per Day</td>
<td class="left"><input type="text" name="perday" id="perday" /> Per Day</td>
</tr>
</table>
</form>
<!--End of Form-->
<br><br><br>

Copy button not working on HTML template

Can I please ask for assistance, im new to html and css i barely know this things though im trying to learn, here's what i made so far but i cant seem to get the copy button fixed .. can someone help me out please
im trying to create a template, im sorry im really trying hard to learn but im clueless..
<form id="tickettemplate" name="tickettemplate">
<table width="700">
<tbody>
<tr>
<td colspan="4" align="center">
<div align="center">
<p style="font-size: 14pt;" align="center">
<strong>Shin's Template</strong>
</p>
</div>
</td>
</tr>
</tbody>
</table>
<table style="font-size: 12pt; height: 164px;" width="697">
<tbody>
<tr>
<td valign="middle">
D/SESA
</td>
<td>
<input id="callername_singleuser" name=
"callername_singleuser" size="50" type="text" />
</td>
</tr>
<tr>
<td valign="middle">
Caller’s name:
</td>
<td>
<input id="Email" name="Email" size="50" type="text" />
</td>
</tr>
<tr>
<td valign="middle">
Callback number:
</td>
<td>
<input id="WinId_singleuser0" name="WinId_singleuser0"
size="50" type="text" />
</td>
</tr>
<tr>
<td valign="top">
E-mail address:
</td>
<td>
<input id="ctystate0" name="E-mail Address" size="50"
type="text" />
</td>
</tr>
<tr>
<td valign="middle">
Related case#s (history):
</td>
<td>
<input id="phonenumber_singleuser" name=
"phonenumber_singleuser" size="50" type="text" />
</td>
</tr>
<tr>
<td valign="top">
Location,remote/hotel/office:
</td>
<td>
<input id="client1" name="client1" size="50" type=
"text" />
</td>
</tr>
</tbody>
</table><br />
<div>
<br />
<table style=
"font-size: 12pt; border: 0px solid gray; height: 44px;" width=
"758" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td valign="middle">
Application name:
</td>
<td>
<input id="WinId_singleuser0" name="WinId_singleuser0"
size="50" type="text" />
</td>
</tr>
<tr>
<td valign="top">
Number of Users Affected:
</td>
<td>
<select id="Number of Users Affected:0" name=
"Number of Users Affected:" size="1">
<option value="Single User">
Single User
</option>
<option value="Less than 5 users">
Less than 5 users
</option>
<option value="5 or more users">
5 or more users
</option>
</select>
</td>
</tr>
</tbody>
</table><br />
<table style="font-size: 12pt; height: 255px;" width="604">
<tbody>
<tr>
<td valign="middle">
What is the problem:
</td>
<td>
<p>
<input id="callername_singleuser" name=
"callername_singleuser" size="50" type="text" />
</p>
</td>
</tr>
<tr>
<td valign="middle">
When did the issue/problem begin:
</td>
<td>
<input id="Email" name="Email" size="50" type="text" />
</td>
</tr>
<tr>
<td valign="middle">
Logon id: :
</td>
<td>
<input id="WinId_singleuser0" name="WinId_singleuser0"
size="50" type="text" />
</td>
</tr>
<tr>
<td valign="top">
Error message (if any):
</td>
<td>
<input id="ctystate0" name="Error message (if any):"
size="50" type="text" />
</td>
</tr>
<tr>
<td valign="middle">
When was the last time it worked properly:
</td>
<td>
<input id="phonenumber_singleuser" name=
"phonenumber_singleuser" size="50" type="text" />
</td>
</tr>
<tr>
<td valign="top">
Have there been any changes to your PC since the last
time it worked properly:
</td>
<td>
<input id="client1" name="client1" size="50" type=
"text" />
</td>
</tr>
<tr>
<td valign="middle">
Have you changed your password recently:
</td>
<td>
<input id="callername_singleuser" name=
"callername_singleuser" size="50" type="text" />
</td>
</tr>
</tbody>
</table><br />
<table style="font-size: 12pt;">
<tbody>
<tr>
<td valign="middle">
Trouble shooting steps (Detailed):
<textarea cols="50" rows="2">
</textarea>
</td>
</tr>
<tr>
<td valign="middle">
Additional Detail (links, screenshots etc...):
<textarea cols="50" rows="2">
</textarea>
</td>
</tr>
</tbody>
</table>
<div>
<br />
<table style=
"font-size: 12pt; border: 1px solid gray; height: 92px;"
width="612" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td valign="top">
Problem:
</td>
<td>
<input id="client1" name="client1" size="50" type=
"text" />
</td>
</tr>
<tr>
<td valign="top">
Cause:
</td>
<td>
<input id="client1" name="client1" size="50" type=
"text" />
</td>
</tr>
<tr>
<td valign="top">
Action:
</td>
<td>
<input id="client1" name="client1" size="50" type=
"text" />
</td>
</tr>
<tr>
<td valign="top">
Resolution:
</td>
<td>
<input id="client1" name="client1" size="50" type=
"text" />
</td>
</tr>
<tr>
<td align="right" width="150">
<input name="Reset" type="reset" value=
"Clear Template" />
</td>
<td align="right" width="450">
<input name="copyform" type="button" value=
"Copy" />
</td>
</tr>
</tbody>
</table>
</div>
</div>
</form>

Here is a solution that uses a few lines of JS.
HTML
<p id="p1">Text</p>
<button onclick="copyToClipboard('#p1')">Copy TEXT</button>
JS
function copyToClipboard(element) {
var $temp = $("<input>");
$("body").append($temp);
$temp.val($(element).text()).select();
document.execCommand("copy");
$temp.remove();
}

How can I hide/show a form when a button is clicked using javascript?

I actually need help to correct my code. I have watched a video from youtube but in that video, he use checkbox instead of button. so i'm having problem with the if else statement of the javascript. i have already checked the previous post that have same problem but couldn't find the one that can solve my problem. please help me. Thank you so much.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="css/tabMenu.css" rel="stylesheet" type="text/css" />
<style>
.hidden {
display:none;}
</style>
<script type="text/javascript">
function showHide()
{
var button = document.getElementById("butt");
var hiddeninput = document.getElementByClassName("hidden");
if(button.click)
{
hiddeninput.style.display = "block";
}
else
{
hiddeninput.style.display = "none";
}
}
</script>
</head>
<body>
<div id="navbar">
<div id="holder">
<ul>
<li>Employer Database</li>
<li>Company Presence</li>
<li>Company Promotion</li>
</ul>
</div><!--end of holder div -->
</div><!--end of navbar div -->
</br>
<p id="p1"><u>Employer List</u></p>
</br>
<table width="1345" height="113" border="1" id="table1">
<tr id="tr1">
<th width="46" height="35" scope="col">No.</th>
<th width="93" scope="col">Title</th>
<th width="157" scope="col">First Name</th>
<th width="171" scope="col">Last Name</th>
<th width="128" scope="col">Position</th>
<th width="130" scope="col">Sector</th>
<th width="178" scope="col">Company Name</th>
<th width="107" scope="col">Country</th>
<th width="97" scope="col">Email</th>
<th width="78" scope="col">Phone</th>
<th width="84" scope="col">Action</th>
</tr>
<tr>
<td height="34"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td height="34"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<br/>
<input name="addbutton" type="button" value="Add Employer" id="butt" onclick="showHide()"/>
<br/>
<br/>
<br/>
<form id="form1" action="add_employer.php" method="post" class="hidden">
<p align="left"><u><strong>Add Employer Detail</strong></u></p>
<br/>
<br/>
<TABLE cellpadding="5" cellspacing="2" align="center">
<TR>
<td><strong>Title </strong></td>
<td><strong>:
<input name="title" value="" type="text" size="50" maxlength="50">
</strong></td>
</TR>
<TR>
<td><strong>First Name </strong></td>
<td><strong>:
<input name="first_name" value="" type="text" size="50" maxlength="50">
</strong></td>
</TR>
<TR>
<td><strong>Last Name</strong></td>
<TD><strong>:
<input name="last_name" value="" type="text" size="50" maxlength="50">
</strong></TD>
</TR>
<TR>
<td><strong>Position</strong></td>
<TD><strong>:
<input name="position" value="" type="text" size="50" maxlength="50">
</strong></TD>
</TR>
<TR>
<td><strong>Sector</strong></td>
<TD><strong>:
<input name="sector" value="" type="text" size="50" maxlength="50">
</strong></TD>
</TR>
<TR>
<td><strong>Company Name</strong></td>
<TD><strong>:
<input name="company_name" value="" type="text" size="50" maxlength="50">
</strong></TD>
</TR>
<TR>
<td><strong>Country</strong></td>
<TD><strong>:
<input name="country" value="" type="text" size="50" maxlength="50">
</strong></TD>
</TR>
<TR>
<td><strong>Email</strong></td>
<TD><strong>:
<input name="email" value="" type="text" size="50" maxlength="50">
</strong></TD>
</TR>
<TR>
<td><strong>Phone</strong></td>
<TD><strong>:
<input name="phone" value="" type="text" size="50" maxlength="50">
</strong></TD>
</TR>
<TR>
<td><strong>Action</strong></td>
<TD><strong>:
<input name="action" value="" type="text" size="50" maxlength="50">
</strong>
<input name="addbutton" type="button" value="Add Employer"/>
<input name="clear" type="button" value="Clear"/>
</TD>
</TR>
</TABLE>
<br/>
<br/>
</form>
</body>
</html>

You can target the form using id and add remove class to show hide the form.
<style>
.hidden {
display:none;}
</style>
<script type="text/javascript">
function showHide() {
var hiddeninput = document.getElementById("form1");
if (hiddeninput.classList.contains("hidden")) {
hiddeninput.classList.remove("hidden");
}
else {
hiddeninput.classList.add("hidden");
}
}
</script>

Given that you're hiding the element with a class, you can show and hide it by removing and re-adding the class. The classList.toggle method* will do that:
function hide(id) {
var el = document.getElementById(id);
if (el && el.classList) {
el.classList.toggle('hidden');
}
}
<style type="text/css">
.hidden {
display: none;
}
</style>
<body>
<input id="foo"><br>
<button onclick="hide('foo')">Hide input</button>
</body>
* Note that the reference to MDN includes a polyfill for Element.classList to support older browsers.

how about this... ??
function showHide() {
var button = document.getElementById("butt");
var hiddeninput = document.getElementsByClassName("hidden");
var form1 = document.getElementById("form1");
if (form1 && form1.style.display=="none") {
form1.style.display = "block";
} else {
form1.style.display = "none";
}
}
<div id="navbar">
<div id="holder">
<ul>
<li>Employer Database
</li>
<li>Company Presence
</li>
<li>Company Promotion
</li>
</ul>
</div>
<!--end of navbar div -->
</br>
<p id="p1"><u>Employer List</u>
</p>
</br>
<table width="1345" height="113" border="1" id="table1">
<tr id="tr1">
<th width="46" height="35" scope="col">No.</th>
<th width="93" scope="col">Title</th>
<th width="157" scope="col">First Name</th>
<th width="171" scope="col">Last Name</th>
<th width="128" scope="col">Position</th>
<th width="130" scope="col">Sector</th>
<th width="178" scope="col">Company Name</th>
<th width="107" scope="col">Country</th>
<th width="97" scope="col">Email</th>
<th width="78" scope="col">Phone</th>
<th width="84" scope="col">Action</th>
</tr>
<tr>
<td height="34"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td height="34"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<br/>
<input name="addbutton" type="button" value="Add Employer" id="butt" onclick="showHide()" />
<br/>
<br/>
<br/>
<form id="form1" action="add_employer.php" method="post" style="display: none;">
<p align="left"><u><strong>Add Employer Detail</strong></u>
</p>
<br/>
<br/>
<TABLE cellpadding="5" cellspacing="2" align="center">
<TR>
<td><strong>Title </strong>
</td>
<td><strong>:
<input name="title" value="" type="text" size="50" maxlength="50">
</strong>
</td>
</TR>
<TR>
<td><strong>First Name </strong>
</td>
<td><strong>:
<input name="first_name" value="" type="text" size="50" maxlength="50">
</strong>
</td>
</TR>
<TR>
<td><strong>Last Name</strong>
</td>
<TD><strong>:
<input name="last_name" value="" type="text" size="50" maxlength="50">
</strong>
</TD>
</TR>
<TR>
<td><strong>Position</strong>
</td>
<TD><strong>:
<input name="position" value="" type="text" size="50" maxlength="50">
</strong>
</TD>
</TR>
<TR>
<td><strong>Sector</strong>
</td>
<TD><strong>:
<input name="sector" value="" type="text" size="50" maxlength="50">
</strong>
</TD>
</TR>
<TR>
<td><strong>Company Name</strong>
</td>
<TD><strong>:
<input name="company_name" value="" type="text" size="50" maxlength="50">
</strong>
</TD>
</TR>
<TR>
<td><strong>Country</strong>
</td>
<TD><strong>:
<input name="country" value="" type="text" size="50" maxlength="50">
</strong>
</TD>
</TR>
<TR>
<td><strong>Email</strong>
</td>
<TD><strong>:
<input name="email" value="" type="text" size="50" maxlength="50">
</strong>
</TD>
</TR>
<TR>
<td><strong>Phone</strong>
</td>
<TD><strong>:
<input name="phone" value="" type="text" size="50" maxlength="50">
</strong>
</TD>
</TR>
<TR>
<td><strong>Action</strong>
</td>
<TD><strong>:
<input name="action" value="" type="text" size="50" maxlength="50">
</strong>
<input name="addbutton" type="button" value="Add Employer" />
<input name="clear" type="button" value="Clear" />
</TD>
</TR>
</TABLE>
<br/>
<br/>
</form>

You can use jQuery for that.
For hiding do that in the onClick event on the button.
$( ".target" ).hide();
For showing
$( ".target" ).show();

jQuery Select form field with images

I am trying to create the jquery select field which includes images. (http://designwithpc.com/Plugins/ddSlick)
It seems that there is something wrong with my code, as the console is showing an error:
Uncaught TypeError: Object [object Object] has no method 'ddslick'
HTML
<form id="quote" action="" method="get"><script type="text/javascript">// <![CDATA[
$('#quote').keyup(function (){ doTotal(this); calcMenu(this); ddslick(this); });
// ]]></script>
<table id="table1" border="0" cellspacing="3" cellpadding="3">
<tbody>
<tr>
<td>Enquiry Date</td>
<td>
<div align="center"><input type="text" name="dateToday" size="25" /></div></td>
</tr>
<tr>
<td>Conference Name</td>
<td>
<div align="center"><input type="text" name="conferenceName" size="25" /></div></td>
</tr>
<tr>
<td>Company Name</td>
<td>
<div align="center"><input type="text" name="companyName" size="25" /></div></td>
</tr>
<tr>
<td>Special Requests</td>
<td><textarea name="comment" rows="5" cols="26"></textarea></td>
</tr>
</tbody>
</table>
<table id="table2" border="0" cellspacing="3" cellpadding="3">
<tbody>
<tr>
<td>First Name</td>
<td>
<div align="center"><input type="text" name="firstName" size="25" /></div></td>
</tr>
<tr>
<td>Last Name</td>
<td>
<div align="center"><input type="text" name="lastName" size="25" /></div></td>
</tr>
<tr>
<td>Tel No</td>
<td>
<div align="center"><input type="text" name="telNo" size="25" /></div></td>
</tr>
<tr>
<td>Cell</td>
<td>
<div align="center"><input type="text" name="cellNo" size="25" /></div></td>
</tr>
<tr>
<td>Email</td>
<td>
<div align="center"><input type="text" name="email" size="25" /></div></td>
</tr>
<tr>
<td><input onclick="formReset()" type="button" value="Reset form" /></td>
</tr>
</tbody>
</table>
<table id="tablex" border="1" cellspacing="3" cellpadding="3">
<tbody>
<tr>
<th scope="col" width="30">
<div align="center">Date</div></th>
<th scope="col" width="128">
<div align="center">Amount of Delegates ½ Day Conference # R 240 pp</div></th>
<th width="112">
<div align="center">Amount of Delegates Full Day Conference # R 260 pp</div></th>
<th width="112">
<div align="center">Menu No</div></th>
<th width="112">
<div align="center">Price pp for Menu (1-7: R70, 8-10 R85, 11: R105, 12: R85)</div></th>
<th width="112">
<div align="center">Total Persons for meals</div></th>
<th width="112">
<div align="center">Amount of Single Rooms # R 480 pp</div></th>
<th width="112">
<div align="center">Amount of Double Rooms # R 720 pp</div></th>
<th width="134">
<div align="center">Total for the day</div></th>
</tr>
<tr>
<td>
<div align="center"><input type="text" name="date1" size="10" /></div></td>
<td>
<div align="center"><input type="text" name="halfday1" size="5" maxlength="10" /></div></td>
<td>
<div align="center"><input type="text" name="fullday1" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="MenuNo1" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="MenuPrice1" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="MealPersons1" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="SingleRooms1" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="DoubleRooms1" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="total1" size="5" /></div></td>
</tr>
<tr>
<td>
<div align="center"><input type="text" name="date2" size="10" /></div></td>
<td>
<div align="center"><input type="text" name="halfday2" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="fullday2" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="MenuNo2" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="MenuPrice2" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="MealPersons2" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="SingleRooms2" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="DoubleRooms2" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="total2" size="5" /></div></td>
</tr>
<tr>
<td>
<div align="center"><input type="text" name="date3" size="10" /></div></td>
<td>
<div align="center"><input type="text" name="halfday3" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="fullday3" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="MenuNo3" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="MenuPrice3" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="MealPersons3" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="SingleRooms3" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="DoubleRooms3" size="5" /></div></td>
<td>
<div align="center"><input type="text" name="total3" size="5" /></div></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<div id="myDropdown">
<select id="myDropdown">
<option value="0" data-imagesrc="http://dl.dropbox.com/u/40036711/Images/facebook-icon-32.png"
data-description="Description with Facebook">Facebook</option>
<option value="1" data-imagesrc="http://dl.dropbox.com/u/40036711/Images/twitter-icon-32.png"
data-description="Description with Twitter">Twitter</option>
<option value="2" selected="selected" data-imagesrc="http://dl.dropbox.com/u/40036711/Images/linkedin-icon-32.png"
data-description="Description with LinkedIn">LinkedIn</option>
<option value="3" data-imagesrc="http://dl.dropbox.com/u/40036711/Images/foursquare-icon-32.png"
data-description="Description with Foursquare">Foursquare</option>
</select>
</div>
</form>
$('#myDropdown').ddslick({
onSelected: function(selectedData){
//callback function: do something with selectedData;
}
});

If you are using wordpress, try following this steps:
1 - Copy the jquery.ddslick.js file in the /js folder of your theme.
2 - Be sure you have write the correct path to the file in your header.php. Inside the <head> tag you should have something like this:
<script src='<?php echo get_template_directory_uri(); ?>/js/jquery.ddslick.js'></script>
3 - As #Arnelle Balane has point out, you probably should write this piece of code:
$('#myDropdown').ddslick({
onSelected: function(selectedData){
//callback function: do something with selectedData;
}
});
Inside some script tags:
<script type="text/javascript">
$('#myDropdown').ddslick({
onSelected: function(selectedData){
//callback function: do something with selectedData;
}
});
</script>
Or, you can put that code inside your custom .js file. That way you don't have to put all the code in the html:
a - Inside your /js folder, make another .js file, something like this: script.js
b - Inside the script.js file, copy the above code without script tags inside a jQuery on ready function, like this:
jQuery(document).ready(function($) {
$('#myDropdown').ddslick({
onSelected: function(selectedData){
//callback function: do something with selectedData;
}
});
});
4 - Check you have jquery activate on your theme, if not, you can download jquery from here and repeat step 2 for the jQuery file or you can use jQuery from wordpress.
5 - Double check for typos and test if works; if not, is probably something else; keep us informed.
Update: I add more info in the step three, in case of using a external .js file.

how to get the display the content of one page but clicking a button

i have a page having some contents plus a edit button So when you hit the edit button it will show the 2nd page. I want it as if both are in only one page. it will look like the last name(text area is converted into text field)Please tell me how to do it
the screen shot is
and the source code is as follows
<!DOCTYPE html> <!-- The new doctype -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>home</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<section id="page" > <!-- Defining the #page section with the section tag -->
<header > <!-- Defining the header section of the page with the appropriate tag -->
<hgroup>
<h1>Your Logo</h1>
<h3>and a fancy slogan</h3>
</hgroup>
<nav class="clear"> <!-- The nav link semantically marks your main site navigation -->
<ul>
<li>My Profile</li>
<li>Change password</li>
<li>Navigation Menu</li>
</ul>
</nav>
</header>
<section id="articles"> <!-- A new section with the articles -->
<!-- Article 1 start -->
<div class="line"></div> <!-- Dividing line -->
<article id="article1"> <!-- The new article tag. The id is supplied so it can be scrolled into view. -->
<h2>Dr. Sukant Kumar nayak</h2>
<div class="line"></div>
<div class="articleBody clear">
<div >
<div style="float: left; padding-left: 50px; padding-top: 5px">
<table cellspacing="10" cellpadding="10" >
<tr>
<td width="200" height="30">
<b>Last Name</b>
</td>
<td>
<label for="LastName">LastName</label>
</td>
</tr>
<tr>
<td height="30">
<b>First Name</b>
</td>
<td>
<label for="FirstName">First Name</label>
</td>
</tr>
<tr>
<td height="30">
<b>Date of Birth</b>
</td>
<td>
<label for="DateofBirth">Date of Birth</label>
</td>
</tr>
<tr>
<td height="30">
<b>Qualification</b>
</td>
<td>
<label for="LastName">Qualification</label>
</td>
</tr>
<tr>
<td height="30">
<b>Registration. No.</b>
</td>
<td>
<label for="RegistrationNo">Registration No</label>
</td>
</tr>
<tr>
<td height="30">
<b>Country of Registration</b>
</td>
<td>
<label for="CountryofRegistration">Country of Registration</label>
</td>
</tr>
<tr>
<td height="30">
<b>Practice Name</b>
</td>
<td>
<label for="PracticeName">Practice Name</label>
</td>
</tr>
<tr>
<td height="30">
<b>Phone</b>
</td>
<td>
<label for="Phone">Phone</label>
</td>
</tr>
<tr>
<td height="30">
<b>Email</b>
</td>
<td>
<label for="Email">Email</label>
</td>
</tr>
<tr>
<td height="30">
<b></b>
</td>
<td align="right" >
<label for="Email"><input type="submit" class="button button-submit" value="Edit" /></label>
</td>
</tr>
</table>
</div>
<div style="float: right;padding-right: 50px;padding-top: 50px">
<table>
<tr>
<td width="160" height="30">
<b>Address</b>
</td>
<td>
<label for="Address">Address</label>
</td>
</tr>
<tr>
<td height="30">
<b>Street</b>
</td>
<td>
<label for="Street">Street</label>
</td>
</tr>
<tr>
<td height="30">
<b>City</b>
</td>
<td>
<label for="City">City</label>
</td>
</tr>
<tr>
<td height="30">
<b>State</b>
</td>
<td>
<label for="State">State</label>
</td>
</tr>
<tr>
<td height="30">
<b>Country</b>
</td>
<td>
<label for="Country">Country</label>
</td>
</tr>
<tr>
<td height="30">
<b>Pin Code</b>
</td>
<td>
<label for="PinCode">Pin Code</label>
</td>
</tr>
<tr>
<td height="30">
<b>How do you know?</b>
</td>
<td>
<label for="HowDoYouKnow">How Do You Know</label>
</td>
</tr>
<tr>
<td height="30">
<b>Comment</b>
</td>
<td>
<label for="Comments">Comments</label>
</td>
</tr>
</table><div align="center" style="padding-top: 30px">
</div>
</div>
</div>
</div>
</article>
<!-- Article 1 end -->
<!-- Article 2 start -->
<div class="line"></div>
<div class="space"></div> <div class="space"></div> <div class="space"></div> <div class="space"></div>
<div class="space"></div><div class="space"></div><div class="space"></div><div class="space"></div><div class="space"></div><div class="space"></div><div class="space"></div>
<div class="space"></div><div class="space"></div><div class="space"></div><div class="space"></div><div class="space"></div><div class="space"></div>
<article id="article2">
<h2>Change Password</h2>
<div class="line"></div>
<div class="articleBody clear">
<figure>
<img src="medical.jpg" width="620" height="440" /></a>
</figure>
<p><div align="center" style="padding-top: 30px">
<table cellspacing="10" cellpadding="10">
<tr>
<td width="200" height="30"><h5>Old Password</h5></td>
<td height="30"><input name="old" type="password"></td>
</tr>
<tr>
<td height="30"><h5>New Password</h5></td>
<td height="30"><input name="newPsw" type="password"></td>
</tr>
<tr>
<td height="30"><h5>Confirm Password</h5></td>
<td height="30"><input name="confirm" type="password"></td>
</tr>
</table>
</div>
<div class="footer-bar" align="center" style="padding-top: 30px">
<table align="center" >
<tr >
<td width="100" align="center"><input type="submit" class="button button-submit" value="Submit" /></td>
<td width="100" align="center"><input type="reset" class="button button-submit" value="Reset" /></td>
</tr>
</table>
</div></p>
<p></p>
</div>
</article>
<!-- Article 2 end -->
<!-- Article 3 start -->
<div class="line"></div>
<!-- Article 3 end -->
</section>
<footer> <!-- Marking the footer section -->
<div class="line"></div>
<p>Copyright 2013 - mysite.com</p>
Go UP
dh
</footer>
</section> <!-- Closing the #page section -->
<!-- JavaScript Includes -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="jquery.scrollTo-1.4.2/jquery.scrollTo-min.js"></script>
<script src="script.js"></script>
</body>
</html>
when you hit the edit button the this should this display
![enter image description here][2]
the source code is as follows
<!DOCTYPE html> <!-- The new doctype -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>home</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<section id="page" > <!-- Defining the #page section with the section tag -->
<header > <!-- Defining the header section of the page with the appropriate tag -->
<hgroup>
<h1>Your Logo</h1>
<h3>and a fancy slogan</h3>
</hgroup>
<nav class="clear"> <!-- The nav link semantically marks your main site navigation -->
<ul>
<li>My Profile</li>
<li>Change password</li>
<li>Navigation Menu</li>
</ul>
</nav>
</header>
<section id="articles"> <!-- A new section with the articles -->
<!-- Article 1 start -->
<div class="line"></div> <!-- Dividing line -->
<article id="article1"> <!-- The new article tag. The id is supplied so it can be scrolled into view. -->
<h2>Dr. Sukant Kumar nayak</h2>
<div class="line"></div>
<div class="articleBody clear">
<div >
<div style="float: left; padding-left: 50px; padding-top: 50px">
<table cellspacing="10" cellpadding="10" >
<tr>
<td width="200" height="30">
<b>Last Name</b>
<p style="float:right; color: red ">* </p>
</td>
<td>
<input name="LastName" type="text" value="<%=lastName %>"/>
</td>
</tr>
<tr>
<td height="30">
<b>First Name</b>
<p style="float:right; color: red ">* </p>
</td>
<td>
<input name="FirstName" type="text" value="<%=firstName %>" />
</td>
</tr>
<tr>
<td height="30">
<b>Date of Birth</b>
</td>
<td>
<input name="DateofBirth" type="text" value="<%=DOB %>" />
</td>
</tr>
<tr>
<td height="30">
<b>Qualification</b>
</td>
<td>
<input name="Qualification" type="text" value="<%=Qualification %>" />
</td>
</tr>
<tr>
<td height="30">
<b>Registration. No.</b>
<p style="float:right; color: red ">* </p>
</td>
<td>
<input name="RegistrationNo" type="text" value="<%=RegistrationNo %>"/>
</td>
</tr>
<tr>
<td height="30">
<b>Country of Registration</b>
</td>
<td>
<input name="CountryofRegistration" type="text" value="<%=CountryOfRegistration %>" />
</td>
</tr>
<tr>
<td height="30">
<b>Practice Name</b>
</td>
<td>
<input name="PracticeName" type="text" value="<%=PracticeName %>" />
</td>
</tr>
<tr>
<td height="30">
<b>Phone</b>
<p style="float:right; color: red ">* </p>
</td>
<td>
<input name="Phone" type="text" value="<%=Phone %>"/>
</td>
</tr>
<tr>
<td height="30">
<b>Email</b>
<p style="float:right; color: red ">* </p>
</td>
<td>
<input name="Email" type="text" value="<%=Email %>"/>
</td>
</tr>
<tr>
<td height="30">
<b>Image</b>
</td>
<td>
<input name="Image" type="file" />
</td>
</tr>
</table>
</div>
<div style="float: right;padding-right: 50px;padding-top: 50px">
<table>
<tr>
<td width="160" height="30">
<b>Address</b>
</td>
<td>
<input name="Address" type="text" value="<%=Address %>"/>
</td>
</tr>
<tr>
<td height="30">
<b>Street</b>
</td>
<td>
<input name="Street" type="text" value="<%=Street %>" />
</td>
</tr>
<tr>
<td height="30">
<b>City</b>
<p style="float:right; color: red ">* </p>
</td>
<td>
<input name="City" type="text" value="<%=City %>" />
</td>
</tr>
<tr>
<td height="30">
<b>State</b>
<p style="float:right; color: red ">* </p>
</td>
<td>
<input name="State" type="text" value="<%=State %>" />
</td>
</tr>
<tr>
<td height="30">
<b>Country</b>
<p style="float:right; color: red ">* </p>
</td>
<td>
<input name="Country" type="text" value="<%=country %>" />
</td>
</tr>
<tr>
<td height="30">
<b>Pin Code</b>
</td>
<td>
<input name="PinCode" type="text" value="<%=PinCode %>" />
</td>
</tr>
<tr>
<td height="30">
<b>How do you know?</b>
</td>
<td>
<input name="HowDoYouKnow" type="text" />
</td>
</tr>
<tr>
<td height="30">
<b>Comment</b>
</td>
<td>
<textarea name="Comments" cols="15" rows="5" readonly></textarea>
</td>
</tr>
</table>
</div>
<br><br>
<div class="footer-bar" align="center" style="padding-top: 30px">
<table align="center" >
<tr >
<td width="100" align="center"><input type="submit" class="button button-submit" value="Submit" /></td>
<td width="100" align="center"><input type="reset" class="button button-submit" value="Reset" /></td>
</tr>
</table>
</div></p>
<p></p>
</div>
</article>
<!-- Article 2 end -->
<!-- Article 3 start -->
<div class="line"></div>
<!-- Article 3 end -->
</section>
<footer> <!-- Marking the footer section -->
<div class="line"></div>
<p>Copyright 2013 - mysite.com</p>
Go UP
dh
</footer>
</section> <!-- Closing the #page section -->
<!-- JavaScript Includes -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="jquery.scrollTo-1.4.2/jquery.scrollTo-min.js"></script>
<script src="script.js"></script>
</body>
</html>

As Praveen said, you don't need two different pages, but two divs in the same page, and then use some javascript to switch between the display/visibility of the two. You can do this with two different classess per element, which the classes having different properties for display (display:none and display:block) or visibility (visibilty: hidden and visibility:visible).
JQuery toggle() method is a straightforward option:
http://api.jquery.com/toggle/
But mind that it toggles display, so it will affect your layout (display:none affects your layout, while visibility:hidden does not), which is something probably you don't want. One way to avoid this (but I am not 100% sure this is the best way to do it) is to insert each div (position:absolute) within another div (position:relative)

apply a css class which you want to display.By clicking on button show those fields only.

Just Make two div.. One div with the first image contents and second div with second image content. and once u clicked edit button just hide the first div and display second div.....

Categories