How to add one picture to the left side of HTML page? - javascript

I'm trying to add one picture to the left side of this page I know basic of HTML. Any suggestion?
Following is not woking? Do I need two container or something wrong?
<?
session_start();
$_SESSION['usertmp'];
$_SESSION['emailtmp'];
if(strlen($_SESSION['usertmp'])<1 ||is_null($_SESSION['usertmp']))
{
$_SESSION['usertmp'] = "";
}
if(strlen($_SESSION['emailtmp'])<1 ||is_null($_SESSION['emailtmp']))
{
$_SESSION['emailtmp'] = "";
}
?>
<!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>Show Information</title>
<style type="text/css">
html, body {height:100%; margin:0; padding:0;}
#page-background {position:fixed; top:0; left:0; width:100%; height:100%;}
#content {position:relative; z-index:1; padding:10px;}
#
</style>
</head>
<body>
<div id="page-background"><img src="images/main.jpg" width="100%" height="100%" alt="Smile"></div>
<left>
<div class="container" style="width:800px" id="content">
<div class="header"><img src="images/logoo.png" width="177" height="61" longdesc="main.php" />
</left>
<center>
<div class="container" style="width:800px" id="content">
<div class="header"><img src="images/logoo.png" width="177" height="61" longdesc="main.php" /> <!-- end .header --></div>
<center>
<div class="content" style="background-image:url(); height:427px; color: #FFF;vertical-align:middle">
<table width="300" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="">
<tr>
<form name="form1" method="post" action="checklogin.php">
<td>
<table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="">
<tr>
<td colspan="3"><strong>Member Login </strong></td>
</tr>
<tr>
<td width="78">Username</td>
<td width="6">:</td>
<td width="294"><input name="myusername" type="text" id="myusername"></td>
</tr>
<tr>
<td>Password</td>
<td>:</td>
<td><input name="mypassword" type="password" id="mypassword"></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><input type="submit" name="Submit" value="Login"></td>
</tr>
</table>
</td>
</form>
</tr>
</table>
<table width="300" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="">
<tr>
<form name="form2" method="post" action="signup.php">
<td>
<table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="">
<tr>
<td colspan="3"><p> </p>
<p><strong> Sign Up Here</strong></p></td>
</tr>
<tr>
<td width="78">Username</td>
<td width="6">:</td>
<td width="294"><input name="myusername" type="text" id="myusername" value = "<? echo $_SESSION['usertmp'] ?>"></td>
</tr>
<tr>
<td>Enter Password</td>
<td>:</td>
<td><input name="mypassword" type="password" id="mypassword"></td>
</tr>
<tr>
<td>Confirm Password</td>
<td>:</td>
<td><input name="mypassword2" type="password" id="mypassword2"></td>
</tr>
<tr>
<td>Email id</td>
<td>:</td>
<td><input name="myemail" type="text" id="myemail" value = "<? echo $_SESSION['emailtmp'] ?>"></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><input type="submit" name="Submit" value="Sign Up"></td>
</tr>
</table>
</td>
</form>
</tr>
</table>
</div>
</center>
</center>
</body>
</html>

There are many ways you could achieve what you are looking to do. You should try to simplify your markup if you can. If you want to keep your login credential table in the middle. Here is a way to do it using 3 main divs as 32.98% width columns. Float them left and use the first column for the pic that you want on the left. Here it is in jsbin. Of course the images aren't working bc it doesn't have access to the proper path http://jsbin.com/muxac/1/edit
<!doctype html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="styles/main.css">
<style>
.col-1, .col-2, .col-3 {
width: 32.98%;
float:left;
}
</style>
</head>
<body>
<div class="container">
<header class="header">
</header>
<div class="row">
<div class="col-1">
<div class="header"><img src="images/logoo.png" width="177" height="61" longdesc="main.php" /></div>
</div> <!-- End of COLUMN 1 -->
<div class="col-2"> <!-- Start of COLUMN 2 -->
<div class="header"><img src="images/logoo.png" width="177" height="61" longdesc="main.php" />
<table width="300" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="">
<tr>
<form name="form1" method="post" action="checklogin.php">
<td>
<table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="">
<tr>
<td colspan="3"><strong>Member Login </strong></td>
</tr>
<tr>
<td width="78">Username</td>
<td width="6">:</td>
<td width="294"><input name="myusername" type="text" id="myusername"></td>
</tr>
<tr>
<td>Password</td>
<td>:</td>
<td><input name="mypassword" type="password" id="mypassword"></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><input type="submit" name="Submit" value="Login"></td>
</tr>
</table>
</td>
</form>
</tr>
</table>
<table width="300" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="">
<tr>
<form name="form2" method="post" action="signup.php">
<td>
<table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="">
<tr>
<td colspan="3"><p> </p>
<p><strong> Sign Up Here</strong></p></td>
</tr>
<tr>
<td width="78">Username</td>
<td width="6">:</td>
<td width="294"><input name="myusername" type="text" id="myusername" value = "<? echo $_SESSION['usertmp'] ?>"></td>
</tr>
<tr>
<td>Enter Password</td>
<td>:</td>
<td><input name="mypassword" type="password" id="mypassword"></td>
</tr>
<tr>
<td>Confirm Password</td>
<td>:</td>
<td><input name="mypassword2" type="password" id="mypassword2"></td>
</tr>
<tr>
<td>Email id</td>
<td>:</td>
<td><input name="myemail" type="text" id="myemail" value = "<? echo $_SESSION['emailtmp'] ?>"></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><input type="submit" name="Submit" value="Sign Up"></td>
</tr>
</table>
</td>
</form>
</tr>
</table>
</div> <!-- End of COLUMN 2 -->
<div class="col-3"> <!-- COLUMN 3 -->
<!-- You can leave this empty if you want -->
</div>
<div class="row">
<div class="footer">
</div>
</div>
</div>
</div>
</body>
</html>

To position the picture You can use CSS. Here is the code(Insert it in the style attribute of the html tag):
position:absolute;left:0px;top:0px/*Here inserte the necesary pixels to position the picture*/

If what you want is just the header image to be at the top left, put inside the <style> this: .header img {display: inline-block; float: left;}

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>

How can I only allow certain domains in email field?

Is it possibly to restrict sign up to only one domain like user#gmail.com? Here is my HTML page so far:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="/umfiles/style.css" media="screen"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0;"/>
<title>User Signup</title>
</head>
<script type="text/javascript" src="/umfiles/general.js"></script>
<body>
<form name="signup" action="" method="post"
onsubmit="return checkSignupForm()">
<input type="hidden" name="signup" value="start" />
<div id="cntr_container">
<table id="cntr_conttable">
<tr>
<td id="cntr_conttd">
<div id="cntr_continner">
<div class="shadow">
<div class="shadow-inner">
<div class="shadow-cnt">
<div id="cntr_logo">
<img src="/umfiles/logo.gif" alt="Mikrotik" />
<p id="logo_title">TITLE</p>
</div>
<table class="cntr_tbl">
<tr>
<td align="right">
email
</td>
<td align="left">
<input type="text" id="sf_email" name="email"
class="signup" value="$(email)" maxlength="100"
autocorrect="off" autocapitalize="off">
</td>
</tr>
<tr>
<td align="right">
phone
</td>
<td align="left">
<input type="text" id="sf_phone" name="phone"
class="signup" value="" maxlength="100"
autocorrect="off" autocapitalize="off">
</td>
</tr>
<tr>
<td align="right">
login
</td>
<td align="left">
<input type="text"
name="login" id="sf_user" maxlength="100"
value="$(login)" class="signup"
autocorrect="off" autocapitalize="off">
</td>
</tr>
<tr>
<td align="right">
password
</td>
<td align="left">
<input type="password" name="password" id="sf_pwd"
class="signup" maxlength="50">
</td>
</tr>
<tr>
<td align="right">
confirm password
</td>
<td align="left">
<input type="password" name="confirm_password" id="sf_cnf_pwd"
class="signup" maxlength="50">
</td>
</tr>
<tr class="top">
<td align="right">
<br />
<b>Prepaid time</b>
</td>
</tr>
<tr class="top">
<td align="right">
time (price)
</td>
<td align="left">
$(profiles)
</td>
</tr>
<tr class="top" id="method_row">
<td align="right">
pay with
</td>
<td align="left">
$(methods)
</td>
</tr>
<tr>
<td colspan="2" align="right">
<input type="submit" name="btn_signup" id="btn_signup" value="Sign up">
</td>
</tr>
<tr>
<td colspan="2" align="center">
<p class="signuperror">$(error)</p>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</td>
</tr>
</table>
</div>
</form>
<script language="JavaScript">
<!--
if (document.signup && document.signup.user) document.signup.user.focus();
function checkSignupForm() {
if (!checkEmail("sf_email")) return false;
if (!checkMinLen("sf_user", "Login", 3)) return false;
if (!checkMinLen("sf_pwd", "Password", 5)) return false;
if (!checkAreEqual("sf_pwd", "sf_cnf_pwd", "Passwords differ")) return false;
return true;
}
-->
</script>
</body>
I believe the part that needs looked at is the bottom javascript section. I apologize for the question, but this got thrown onto me and I know nothing about html and/or javascript.
Thanks in Advance!

Tabbed Forms Using HTML, CSS, JS

I've been playing around with some ideas I've been searching for, and I came across this:
http://jsfiddle.net/RcrCJ/
original html
<div id="container">
<div id="content">
<ul id="info-nav">
<li><span>Tab1</span></li>
<li><span>Tab2</span></li>
</ul>
<div id="info">
<form action="inex.html" method="post" id="form1" name="form1" class="formfields">
<div id="equipment_details" class="hide">
<table border="0" cellspacing="1" cellpadding="2" id="tbl_equipment_details" width="100%">
<tr>
<td width="23%" class="txt-right">XXXX</td>
<td width="31%"><input type="text" name="" id="qw" /></td>
</tr>
<tr>
<td class="txt-right">XXX</td>
<td><input type="checkbox" id="" value="1" name="" checked=""></td>
</tr>
<tr>
<td class="txt-right">XXX XXX</td>
<td><input type="text" value="" name="" id="we" /></td>
</tr>
</table>
<!--tbl_equipment_details closed-->
</div><!--div equipment_details closed-->
<!--<div id="specifications" class="hide">-->
<div id="job_costs" class="hide">
<table border="0" cellspacing="1" cellpadding="2" width="100%" id="tbl_specifications">
<tr>
<td width="18%" class="txt-right">Notes</td>
<td colspan="2" valign="top">
<textarea rows="3" id="description" cols="60" name=""></textarea> </td>
</tr>
<tr>
<td class="txt-right">XXX</td>
<td width="39%">
<select name="purchased_from">
<option selected></option>
<option value="xxx">xxx1</option>
<option value="xxx">xxx2</option>
</select> </td>
<td class="txt-right"> </td>
</tr>
</table>
<!--</div>
<div id="job_costs" class="hide">-->
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td align="center"> </td>
</tr>
<tr>
<td align="center">
<div>
<input value="Cancel" name="qq" type="button">
<input value="Save Changes" name="ww" type="submit">
</div> </td>
</tr>
</table>
</div><!--div feedback closed-->
</form>
</div><!--div info closed-->
</div><!--div content closed-->
</div><!--div container closed-->
original javascript
$(document).ready(function(){
$( '#info #job_costs' ).hide();
$('#info-nav li').click(function(e) {
$('#info .hide').hide();
$('#info-nav .current').removeClass("current");
$(this).addClass('current');
var clicked = $(this).find('a:first').attr('href');
$('#info ' + clicked).fadeIn('fast');
e.preventDefault();
}).eq(0).addClass('current');
});
It was almost exactly what I was looking to do, but I wanted more tabs. I started playing around with it, but for some reason that I can't seem to understand, when I add a third or fourth etc. tab and I run it, it will display all of the tabs until you click on one of them, then it appears normal. I figured it was something silly, but I must have played around with this for hours now and I'm still no further ahead than when I started.
I'm no pro, but I'm usually pretty good at trial / error. This is what I hacked together in an attempt to make 3 tabs:
http://jsfiddle.net/cwaddilove/0Lo7jnoj/
modified html
<div id="container">
<div id="content">
<ul id="info-nav">
<li><span>Tab1</span></li>
<li><span>Tab2</span></li>
<li><span>Tab3</span></li>
</ul>
<div id="info">
<form action="inex.html" method="post" id="form1" name="form1" class="formfields">
<div id="equipment_details" class="hide">
<table border="0" cellspacing="1" cellpadding="2" id="tbl_equipment_details" width="100%">
<tr>
<td width="23%" class="txt-right">XXXX</td>
<td width="31%"><input type="text" name="" id="qw" /></td>
</tr>
<tr>
<td class="txt-right">XXX</td>
<td><input type="checkbox" id="" value="1" name="" checked=""></td>
</tr>
<tr>
<td class="txt-right">XXX XXX</td>
<td><input type="text" value="" name="" id="we" /></td>
</tr>
</table>
<!--tbl_equipment_details closed-->
</div><!--div equipment_details closed-->
<!--<div id="specifications" class="hide">-->
<div id="job_costs" class="hide">
<table border="0" cellspacing="1" cellpadding="2" width="100%" id="tbl_specifications">
<tr>
<td width="18%" class="txt-right">Notes</td>
<td colspan="2" valign="top">
<textarea rows="3" id="description" cols="60" name=""></textarea> </td>
</tr>
<tr>
<td class="txt-right">XXX</td>
<td width="39%">
<select name="purchased_from">
<option selected></option>
<option value="xxx">xxx1</option>
<option value="xxx">xxx2</option>
</select> </td>
<td class="txt-right"> </td>
</tr>
</table>
<!--</div>
<div id="job_costs" class="hide">-->
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td align="center"> </td>
</tr>
</table>
</div><!--div feedback closed-->
<div id="job_assignment" class="hide">
<table border="0" cellspacing="1" cellpadding="2" width="100%" id="tbl_assignment">
<tr>
<td width="18%" class="txt-right">Notes</td>
<td colspan="2" valign="top">
<textarea rows="3" id="assignment" cols="60" name=""></textarea> </td>
</tr>
<tr>
<td class="txt-right">XXX</td>
<td width="39%">
<select name="sold_to">
<option selected></option>
<option value="xxx">xxx1</option>
<option value="xxx">xxx2</option>
</select> </td>
<td class="txt-right"> </td>
</tr>
</table>
<!--</div>
<div id="job_costs" class="hide">-->
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td align="center"> </td>
</tr>
<tr>
<td align="center">
<div>
<input value="Cancel" name="qq" type="button">
<input value="Save Changes" name="ww" type="submit">
</div> </td>
</tr>
</table>
</div><!--div feedback closed-->
</form>
</div><!--div info closed-->
</div><!--div content closed-->
</div><!--div container closed-->
modified javascript
$(document).ready(function(){
$( '#info #job_costs #job_assignment' ).hide();
$('#info-nav li').click(function(e) {
$('#info .hide').hide();
$('#info-nav .current').removeClass("current");
$(this).addClass('current');
var clicked = $(this).find('a:first').attr('href');
$('#info ' + clicked).fadeIn('fast');
e.preventDefault();
}).eq(0).addClass('current');
});
I'm hoping someone will be able to see what I've done wrong and can help point me in the right direction.
Thanks in advanced!
You have an error in jQuery selector:
$( '#info #job_costs #job_assignment' ).hide();
To hide several elements you need to put comma in between selectors like this:
$( '#info, #job_costs, #job_assignment' ).hide();
Solution in your case: you just need to hide two of the tabs so that one would be visible at the beginning. This is what you need to use in your code:
$( '#job_costs, #job_assignment' ).hide();
There is some room for improvement here but this will work. Here is updated fiddle

Validate text boxes created dynamically having unique ids and names using jQuery validate

I am using jQuery for creating multiple text fields on button click. It is working fine. Now I need to validate all test boxes.
This is my HTML code:
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Patient Portal</title>
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="css/style2.css" />
<![endif]-->
<!--[if !IE]> -->
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!-- <![endif]-->
<script type="text/javascript" language="javascript" src="js/scripts.js"></script>
<script type="text/javascript" language="javascript" src="js/basicnifo.js"></script>
<script src="js/jquery-1.3.2.min.js"></script>
<script src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/datepicker2.js"></script>
</head>
<body>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" class="m5">
<tr>
<td valign="top" class="m4">
<form action="#" method="post" name="reg" id="reg">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><div class="m12">
<table width="100%" border="0" cellspacing="1" cellpadding="2" id="items">
<thead>
<tr>
<td colspan="7" align="center" bgcolor="#62a3e0" style="width:15%;"><strong>Problem List</strong></td>
</tr>
<tr>
<td align="center" bgcolor="#EAEAEA" style="width:1%;"><strong>Problem</strong></td>
<td align="center" bgcolor="#EAEAEA" style="width:1%;"><strong>Status</strong></td>
<td align="center" bgcolor="#EAEAEA" style="width:1%;"><strong>Active Date</strong></td>
</tr>
</thead>
<tbody>
<tr>
<td bgcolor="#F5F5F5" style="width:15%;"><input type="text" tabindex="1" name="Problem1" id="Problem1" class="m16 autocomplete" value="" /></td>
<td bgcolor="#F5F5F5" style="width:15%;"><select name="Status1" id="Status1" class="drop2" tabindex="1" >
<option value="1" selected="selected">active</option>
<option value="2">in-active</option>
</select></td>
<td bgcolor="#F5F5F5" style="width:15%;"><input type="text" name="Date1" id="Date1" class="m16 datepick" tabindex="1" value=""/></td>
<input type="hidden" name="patientProblemsid1" id="patientProblemsid1" class="m16" value="0"/>
<input type="hidden" name="sSaved" id="sSaved" value="null" class="m10" />
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5" align="right">
<input type="button" name="update" id="update" value="ADD ROW" tabindex="10" class="bt-press add_more" onmouseover="changeBgImage('images/button-bg2.png', 'update')" onmouseout="changeBgImage('images/button-bg.png', 'update')" /></td>
</tr>
<tr>
<td colspan="5" align="right">
<input type="submit" name="button" id="SAVE" value="SAVE" class="bt-press" tabindex="50" onmouseover="changeBgImage('images/button-bg2.png', 'SAVE')" onmouseout="changeBgImage('images/button-bg.png', 'SAVE')" />
<input type="submit" name="button" id="NEXT" value="NEXT" class="bt-press" tabindex="51" onmouseover="changeBgImage('images/button-bg2.png', 'NEXT')" onmouseout="changeBgImage('images/button-bg.png', 'NEXT')" /></td>
</tr>
</tfoot>
<input type="hidden" name="item_count" id="item_count" value="1" />
<input type="hidden" name="page" value="patienthistory" class="m10" />
<input type="hidden" name="Cliinicid" value="" class="m10" />
</table>
</div></td>
</tr>
</table>
</form>
<div class="m7"> <br />
</div>
</td>
</tr>
</table>
</body>
</html>
And this is my JavaScript part for adding text boxes on button click:
<script>
$(".add_more").click(function(event){
event.preventDefault();
var count = $("#item_count").val();
count = parseInt(count);
//alert(count);
var new_count = count +1;
// alert(new_count);
// $(".delete_link").remove();
var html = '<tr>\
<td bgcolor="#F5F5F5" style="width:15%;"><input type="text" name="Problem'+new_count+'" id="Problem'+new_count+'" tabindex="11" class="m16 autocomplete" value="" /></td> \
<td width="15%" bgcolor="#F5F5F5" style="width:15%;"><select name="Status'+new_count+'"id="Status'+new_count+'" tabindex="11" class="drop2 ">\
<option value="1" selected="selected"> active</option><option value="2">inactive</option>\
</select></td> \
<td bgcolor="#F5F5F5" style="width:15%;"><input type="text" name="Date'+new_count+'" id="Date'+new_count+'" tabindex="11" class="m16 datepicker" value="" /></td> \
</tr>';
var $html = $(html);
var $ht = $html.find('input.datepicker')[0];
$($ht).datepicker({dateFormat:"mm-dd-yy"});
$('#items > tbody:last').append($html);
$("#item_count").val(new_count);
});
</script>
I need to validate all text boxes. Thanks in advance.
.validate() Will help you to validate your form elements with use of ID or class of a form.
You please follow the following URL to get validation for your script:
http://jqueryvalidation.org/validate/
In your validation script validate each input type text field using same class name like.
$("#SAVE").click(function(){ $(".m16").each(function(){
var values=this.value;
if(values.length<1)
{
alert("Text box empty");
}
});
});

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