Member Avatar for justinmyoung

Hi

I'm having trouble with a simple html form. I'm trying to have the input box read a simple message, such as "enter ticket number here", and allow the user to click anywhere within the input box to clear the message and begin entering their number.

The two problems I'm having, and I have no idea why, is

#1 clearing the message when a user clicks anywhere within the box

#2 allowing the user the ability to click anywhere within the box

I can get it to work outside the page that it's in now, but within the page it doesn't work at all.

I attached the file below

Thanks for any help!

<!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" dir="ltr">

<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title></title>

<link rel="stylesheet" href="" type="text/css" media="" />

<script language="javascript">AC_FL_RunContent = 0;</script>

<script src="slideshow/AC_RunActiveContent.js" language="javascript"></script>

</head>

<body>


<style>


/***********************BEGIN*****************/


body {
	font-size:12px;
	font-family: "Lucida Grande", sans-serif;
	background-color: #000;
	color: #fff8eb;
	text-align: center;	
	background: #5a5b5e url('images/bg.gif');
	padding: 50px 0 50px 0;
	margin: 0;		
	}

h1, h2, h3{
	padding: 0;
	margin: 0;
}

p{
	line-height:1.3em;
}

ul{
	list-style: none;
	margin: 0;
	padding: 0;
}

li{
	margin: 0 0 0 0;
	padding: 0;
}

a:link{
	text-decoration: none;

}

a:hover{
	color: #808080;
}

.left{
	float: left;
}

.right{
	float: right;
}
	
.clear{
	clear: both;	
	overflow: hidden;
}
	
.inside{	/*other articles*/
	margin: 0px auto;
	border: 1px dotted #E1E6E5;
	background: #fafafa;
	padding: 10px 20px 0px 20px;
	-moz-border-radius: 5px;
	-khtml-border-radius: 5px;	
	-webkit-border-radius: 5px;
	border-radius: 5px;
	
}



/******************CONTAINER********/


#container {
	
	width: 905px;
	text-align: left;
	margin: -5px auto ;	
	background: #fff;
	border: 10px solid #E1E6E5;
	padding: 0px;	
}

#header {
	width: 100%;	
}

#header .bottom li.selected a{
	color: #4b4a4a;
	background: #f1dab5;
	border: 1px solid #cacaca;
	border-bottom: 1px solid #808080;
	border-right: 1px solid #808080;
	-moz-border-radius: 6px;
	-khtml-border-radius: 6px;	
	-webkit-border-radius: 3px;
	border-radius: 1px;	
}


#header .bottom {
	border: none;
	}

	#logo{
		width: 905px;
		height: 118px;
		float: left;
		background: #fff url('images/header2.gif') no-repeat;
		border: 1px solid blue;	
	}



/*******************NAV*************************/

	
#nav{	/*menu*/
	
	padding: 0px 0px 0px 0px;
	margin:3px 0px 16px 25px;	/*top,right,bottom,left*/	
	display: inline;
	float: left;
	width:540px;
	border: none;
}

	
#nav li {	
	float: left;
	background-color: #FBFFFB;
	
	
}

#nav li a:hover {
	background: #f1dab5;
}

#nav li a {

	margin: 9px 5px 0px 0px;
	padding: 9px 8px 9px 8px; /*nav box*/
    list-style: none;
	font-variant: small-caps;
	border: 1px solid #cacaca;
	border-bottom: 1px solid #808080;
	border-right: 1px solid #808080;
	font-family: georgia, sans-serif;
	font-weight: bold;
	font-size: 13px;
	color: #5B5B5B;	
	text-decoration: none;
	display: block;	
	
	-moz-border-radius: 1px;
	-khtml-border-radius: 1px;	
	-webkit-border-radius: 1px;
	border-radius: 1px;	
	

}


#content { /*wraps around main content*/
	width: 592px;	
	float: left;
	margin: 0 0 0 25px;	
	display: inline;
}

#nav li.cart {
	border: none;
}


/**************SEARCH************************************/



#s { /*search box */

	background: #FBFFFB;
	border: thin solid #cacaca;

	margin-top: 139px;
	float: right;
	padding:0px;


	color: #808080;
	
	-moz-border-radius: 10px;
	-khtml-border-radius: 10px;	
	-webkit-border-radius: 10px;
	border-radius: 10px;


}

#searchsubmit{	/*status button */


	font-variant: small-caps;
	background-color: #fafafa;
	height: 38px;
	

	border: 1px solid #ccc;
	color: #8E0209;	
	
	cursor: auto;
	font-size:15px;
	position: absolute;
	
	-moz-border-radius: 10px;
	-khtml-border-radius: 10px;	
	-webkit-border-radius: 10px;
	border-radius: 10px;

}

#extraDiv1{
	position:absolute;
	top:194px;
	width:602px;
	height:220px;
	left:50%;
	
	
	margin-left:0px;
	background:url('') no-repeat;
	}

	* html #extraDiv1{
		position:absolute;
		}



/***********MAIN PICTURE/FIRST ARTICLE*******/


#slideshow .top{ 
	width: 577px;
	height: 200px;	
	
	
	padding: 0px;
	background: #000 url('') no-repeat;
	margin-left: 0px;
	margin-top: 0px;
	
	border-top: thin solid #262626;
	border-bottom: thin solid #262626;
	
	-moz-border-radius: 4px;
	-khtml-border-radius: 4px;	
	-webkit-border-radius: 0px;
	border-radius: 0px;
	
	
}
	

#slideshow .bottom {
	
	margin: 10px 16px 0 0;
	text-align: left;		
	padding: 20px 30px 15px 30px;
	background: #fafafa url('') no-repeat;
	border: 1px dotted #E1E6E5;
	
	-moz-border-radius: 5px;
	-khtml-border-radius: 5px;	
	-webkit-border-radius: 8px;
	border-radius: 3px;
		
}


/**************BIG EXCERPT**********************/


.bigExcerpt p{
	margin: 2px 0 0 0;	
	color: #4e4c4c;	/*color of text beneath picture*/
	display: inline-block;
	line-height: 1.9em;
	font-size: 14px;
	
}

.bigExcerpt h2{	 /*title text beneath picture*/
	margin: 0px 0px 10px 0;	
	color: #fbfffb;	
	font-family: "georgia", sans-serif;
	font-weight: normal;
	display: inline-block;
	letter-spacing:0px;
	line-height: 1.3em;
	
	
}

.bigExcerpt h2 a:link, .bigExcerpt h2 a:visited{	
	color: #990000; 									/*color of title beneath picture*/
	text-decoration: none;
	font-size: 22px; /*size of main header*/
}

.bigExcerpt h2 a:hover{	
	text-decoration: underline;	
}

.bigExcerpt .postMeta a:link, .bigExcerpt .postMeta a:visited{
	text-decoration: none;	
	color: #ccc;	
}

.bigExcerpt .date{
	font-family: Georgia, sans-serif;
	font-weight: normal;
	font-size: 12px;
	margin: 0 0 0 10px;
	float: left;
	
}

.bigExcerpt .commentCount{	
	margin: 0 0 0 0;
	padding: 0 0 0 17px;
	background: transparent url('images/comment_icon_sm_light.gif') 5px no-repeat;
	float: right;
}

.bigExcerpt h3{ /*In Inspiration header*/
	padding: 0 0 5px 0;
	font-size: 10px;
	background: transparent url('images/dot_border.gif') repeat-x bottom;
	margin: 0px 0px 15px 0;
	display: inline-block;
	width: 100%;
	color: #990000;	
	font-family: 'Lucida Grande', sans-serif;
	color: #990000;

	font-weight: normal;
	float: left;
}

.bigExcerpt  p a:link, .bigExcerpt a:visited{	
	color: #000;
	text-decoration: none;
}

.bigExcerpt  img{	
	border: none;
}

.bigExcerpt .more-link{
	display: none;
}

.bigExcerpt .moreLink{
	background: transparent url() no-repeat;
	padding: 3px 0 0 25px;
	margin: 5px 0 0 0;
	height: 21px;
	display: block;
	color: #990000;
	float: right;
	text-decoration: none;
	font-family: Georgia, sans-serif;
	font-size: 16px;	
}

.bigExcerpt .date, .otherArticle .date a:link{
	font-family: 'lucida grande', sans-serif;
	font-weight: normal;
	font-size: 10px;
	margin: 0 0 0 10px;
	float: right;
}


.post .inside{	
	margin: 0 0 0 30px;
	
}

.bigExcerpt .number{
	font-size: 35px;
}



/***********************THE OTHER ARTICLES****************/


#otherArticles{
	width: 650px;
	height: 590px;
	margin: 0px 0 0 0;
	
	
}

#otherArticles .otherArticle{
	width: 285px;
	height: 245px;
	text-align: center;
	float: left;
	margin: 0 8px 10px 0;
	display: inline;
	background: #fff;
	color: #4d4b47;	
	font-size: 11px;
		
	
}


#otherArticles .otherArticle .inside{
	width: 240px;
	height: 590px;
	text-align: left;
	overflow: hidden;
	margin: 17px auto;	
	
	-moz-border-radius: 8px;
	-khtml-border-radius: 8px;	
	-webkit-border-radius: 8px;
	border-radius: 8px;
}

.otherArticle .postMeta{
	font-family: 'Lucida Grande', sans-serif;
	color: #990000;
	font-size: 10px;
	font-weight: normal;
	float: left;
}

.otherArticle .postMeta a:link, .otherArticle .postMeta a:visited{
	text-decoration: none;	
	color: #c41616;	
}

.otherArticle .date, .otherArticle .date a:link{
	font-family: 'lucida grande', sans-serif;
	font-weight: normal;
	font-size: 10px;
	margin: 0 0 0 10px;
	float: left;
}

.otherArticle .commentCount{	
	margin: 0 0 0 0;
	padding: 0 0 0 17px;
	background: transparent url('') 5px no-repeat;
	float: right;
}

.otherArticle:link{	
	text-decoration: none;
	color: #4d4b47;
}

.otherArticle:hover{
	
	text-decoration: none;
	color: #4d4b47;	
	/*background-position: 0px -241px;*/
}


.otherArticle h2{
	font-size: 20px;
	font-family: 'lucida grande', sans-serif;
	font-variant: small-caps;
	margin: 0 0 10px 0;
	color: #808080;
}

.otherArticle h2 a:link, .otherArticle h2 a:visited{	
	color: #4d4b47;
	text-decoration: none;
}

.otherArticle h2 a:hover{	
	color: #c41616;
}

.otherArticle a:link, .otherArticle a:visited{
	color: #c41616;	
	text-decoration: none;
}

.otherArticle h3{
	padding: 2px 0 5px 0;
	font-size: 11px;
	background: transparent url('images/dot_border.gif') repeat-x bottom;
	margin: 2px 0px 8px 0;
}

.otherArticle .thumb{
	float: left;
	margin: 4px 10px 5px 0;
	border: 1px solid #808080;
	padding: 1px;
}

.otherArticle p{	
	margin: 0;
}

.otherArticle .more-link{
	display: none;
}

#paginationBar{
	background-color: #000;
	color: #fff;
	width: 577px;
	margin: 0 0 0 0;
	font-family: 'lucida grande', sans-serif;
	font-size: 11px;
	font-weight: bold;
}

#paginationBar .inside{
	padding: 10px;
}

#paginationBar a:link, #paginationBar a:visited{	
	color: #fff;
	text-decoration: none;
}


/************SIDEBAR*********************/


#sidebar{	
	
	width: 260px;
	float: right;	
	margin: 0 25px 0 0;
	display: inline;
	
}


/**************ADS*******************/


#ads{
	
	font-size: 12px;
	line-height: 1.8em;		
	display: block;	
	height: 179px;
	color: #808080;
	
	
	border-top: thin solid #e3e1e1;
	border-bottom: thin solid #e3e1e1;
	border-right: 0px solid #ccc;
	border-left: 0px solid #ccc;
		
	-webkit-border-radius: 0px;
	padding: 10px;
	margin: 0 0 7px 0;
	background-color: #fafafa;
	
}

#ads .first_word {

	font-size: 13px;
	color: #990000;
	font-style: oblique;
	font-variant: small-caps;
	
}

#ads .moreLink {
	float: right;
	margin-top: 5px;
	color: #808080;
}


/************POPULAR ARTICLES***************/

#featuredProducts{	
	clear: both;
	border: 1px dotted #E1E6E5;
	border-bottom: 0px;
	margin: 15px 0 0 0;
	padding: 0px;
	background-color: #fafafa;
	-moz-border-radius: 8px;
	-khtml-border-radius: 8px;	
	-webkit-border-radius: 8px;
	border-radius: 8px;
}

#featuredProducts h2{
	font-family: Georgia, sans-serif;	
	color: #3d3d3d;	
	padding: 10px 10px 10px 20px;
	font-size: 12px;
	margin: 0px 0 5px 0;
	background: #fafafa url('images/featured.jpg') bottom no-repeat;	
	-moz-border-radius: 5px;
	-khtml-border-radius: 5px;	
	-webkit-border-radius: 8px;
	border-radius: 3px;
}

#featuredProducts ul{
	list-style: none;
  • 3 Contributors
  • 4 Replies
  • 85 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by justinmyoung
Member Avatar for justinmyoung

Not two minutes after I posted this, I figured the problem out. I had an extra div tag that was covering the input box and only allowing the top portion of the box to be clicked in. I spent three hours on that one. fun stuff.

But the basic problem of clearing the text within the input box when a user clicks within it, I still don't know how to solve. If someone could help me with that one, I'd appreciate it.

Member Avatar for sreein1986

please send me the code

Thanx,
sree

Member Avatar for buddylee17

You want something like this? This textbox clears when the user clicks it.

<input type="text" onfocus="this.value=''; this.onfocus=null;" name="notes" value="enter ticket number here" />
commented: Good example, nice work :) +8
Member Avatar for justinmyoung

Thanks very much. That works great!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.