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

Gentopack · Apr 9, 2013

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 itthe screen shot isand the source code is as follows<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>home</title> <link rel="stylesheet" type="text/css" href="http://stackoverflow.com/questions/15900489/styles.css" /> </head> <body> <section id="page" >  <header >  <hgroup> <h1>Your Logo</h1> <h3>and a fancy slogan</h3> </hgroup> <nav class="clear">  <ul> <li><a href="http://stackoverflow.com/questions/15900489/#article1">My Profile</a></li> <li><a href="http://stackoverflow.com/questions/15900489/#article2">Change password</a></li> <li><a href="http://stackoverflow.com/questions/15900489/#article3">Navigation Menu</a></li> </ul> </nav> </header> <section id="articles">   <div class="line"></div>  <article id="article1">  <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="http://stackoverflow.com/questions/15900489/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>   <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="http://stackoverflow.com/questions/15900489/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="http://stackoverflow.com/questions/15900489/Submit" /></td> <td width="100" align="center"><input type="reset" class="button button-submit" value="http://stackoverflow.com/questions/15900489/Reset" /></td> </tr> </table> </div></p> <p></p> </div> </article>   <div class="line"></div>  </section> <footer>  <div class="line"></div> <p>Copyright 2013 - mysite.com</p> <a href="http://stackoverflow.com/questions/15900489/#" class="up">Go UP</a> <a href="http://stackoverflow.com/questions/15900489/www.df.com" class="by">dh</a> </footer> </section>   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script src="http://stackoverflow.com/questions/15900489/jquery.scrollTo-1.4.2/jquery.scrollTo-min.js"></script> <script src="http://stackoverflow.com/questions/15900489/script.js"></script> </body></html>when you hit the edit button the this should this display the source code is as follows<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>home</title> <link rel="stylesheet" type="text/css" href="http://stackoverflow.com/questions/15900489/styles.css" /> </head> <body> <section id="page" >  <header >  <hgroup> <h1>Your Logo</h1> <h3>and a fancy slogan</h3> </hgroup> <nav class="clear">  <ul> <li><a href="http://stackoverflow.com/questions/15900489/#article1">My Profile</a></li> <li><a href="http://stackoverflow.com/questions/15900489/#article2">Change password</a></li> <li><a href="http://stackoverflow.com/questions/15900489/#article3">Navigation Menu</a></li> </ul> </nav> </header> <section id="articles">   <div class="line"></div>  <article id="article1">  <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="http://stackoverflow.com/questions/15900489/<%=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="http://stackoverflow.com/questions/15900489/<%=firstName %>" /> </td> </tr> <tr> <td height="30"> <b>Date of Birth</b> </td> <td> <input name="DateofBirth" type="text" value="http://stackoverflow.com/questions/15900489/<%=DOB %>" /> </td> </tr> <tr> <td height="30"> <b>Qualification</b> </td> <td> <input name="Qualification" type="text" value="http://stackoverflow.com/questions/15900489/<%=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="http://stackoverflow.com/questions/15900489/<%=RegistrationNo %>"/> </td> </tr> <tr> <td height="30"> <b>Country of Registration</b> </td> <td> <input name="CountryofRegistration" type="text" value="http://stackoverflow.com/questions/15900489/<%=CountryOfRegistration %>" /> </td> </tr> <tr> <td height="30"> <b>Practice Name</b> </td> <td> <input name="PracticeName" type="text" value="http://stackoverflow.com/questions/15900489/<%=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="http://stackoverflow.com/questions/15900489/<%=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="http://stackoverflow.com/questions/15900489/<%=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="http://stackoverflow.com/questions/15900489/<%=Address %>"/> </td> </tr> <tr> <td height="30"> <b>Street</b> </td> <td> <input name="Street" type="text" value="http://stackoverflow.com/questions/15900489/<%=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="http://stackoverflow.com/questions/15900489/<%=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="http://stackoverflow.com/questions/15900489/<%=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="http://stackoverflow.com/questions/15900489/<%=country %>" /> </td> </tr> <tr> <td height="30"> <b>Pin Code</b> </td> <td> <input name="PinCode" type="text" value="http://stackoverflow.com/questions/15900489/<%=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="http://stackoverflow.com/questions/15900489/Submit" /></td> <td width="100" align="center"><input type="reset" class="button button-submit" value="http://stackoverflow.com/questions/15900489/Reset" /></td> </tr> </table> </div></p> <p></p> </div> </article>   <div class="line"></div>  </section> <footer>  <div class="line"></div> <p>Copyright 2013 - mysite.com</p> <a href="http://stackoverflow.com/questions/15900489/#" class="up">Go UP</a> <a href="http://stackoverflow.com/questions/15900489/www.df.com" class="by">dh</a> </footer> </section>   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script src="http://stackoverflow.com/questions/15900489/jquery.scrollTo-1.4.2/jquery.scrollTo-min.js"></script> <script src="http://stackoverflow.com/questions/15900489/script.js"></script> </body></html>

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

Gentopack

New Member