?
Solved

Cannot get form field to clear when clicked

Posted on 2007-11-29
9
Medium Priority
?
250 Views
Last Modified: 2009-12-06
I have a phplist subscribe form in the top right of this site:

http://www.mokitaproductions.org/index.php?page=home

I'm trying to make the text "enter your email" disappear when the form field is clicked. This should be relatively straightforward, but I can't get it to work.

The javascript I'm using is at:

http://www.mokitaproductions.org/list/clearformfield.js

The form code is attached below.

<form method="post" action="http://www.mokitaproductions.org/list/?p=subscribe" name="signup" target="windowName" onsubmit="window.open('', this.target,
	'dialog,modal,scrollbars=no,resizable=no,width=500,height=250,left=0,top=0');">
	<table border="0">
		<tbody>
			<tr>
				<td class="email-box">
				<div align="center">
				<input name="email" id="email" value="enter your email" size="20" onfocus="clearField(this)" type="text" />
				<script language="Javascript" type="text/javascript">
				addFieldToCheck("email","Email");</script>
				</div>
				</td>
				<td class="attributeinput"> </td>
				<td class="submit"><input class="formInputButton" name="subscribe" value="join mailing list" onclick="return checkform();" type="submit" /></td>
			</tr>
			<input name="htmlemail" value="1" type="hidden" />
		</tbody>
	</table>
	<input name="list[2]" value="signup" type="hidden" /><input name="listname[2]" value="Mokita" type="hidden" />
	<div style="display: none">
	<input name="VerificationCodeX" size="20" type="text" />
	</div>
</form>

Open in new window

0
Comment
Question by:gajones76
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
  • 2
  • +1
9 Comments
 
LVL 16

Expert Comment

by:grahamnonweiler
ID: 20377974
You can achieve the same reuslt without any additional scripts as shown the attached snippet correspnding to your above line 8.


<input name="email" id="email" value="enter your email" size="20" onfocus="if(this.value=='enter your email') {this.value=''}" type="text" />

Open in new window

0
 

Author Comment

by:gajones76
ID: 20378037
thanks Graham. I have put your code into the form on this page only:

http://www.mokitaproductions.org/index.php?page=home

but, for some reason it is still not working....


0
 
LVL 16

Expert Comment

by:grahamnonweiler
ID: 20378112
You have part of the script missing...

should be:

onFocus="if(this.value=='enter your email')  { this.value='' }"

where the '' after the = in value are two single quotes.



0
Are You Using the Best Web Development Editor?

The worlds of web hosting and web development are constantly evolving. Every year we see design trends change, coding standards adapt and new frameworks/CMS created. With such a quick pace of change it’s easy to get lost trying to keep up.

See if your editor made the list.

 
LVL 29

Expert Comment

by:Göran Andersson
ID: 20378146
The reason that the function that you used didn't work, is that you didn't specify the defaultValue argument that it uses:

<input name="email" id="email" value="enter your email" defaultValue="enter your email" size="20" onfocus="clearField(this)" type="text" />


Regardning the code that you are using now:

change

<input name="email" id="email" value="enter your email" size="20" onfocus="if(this.value=='enter your email') " type="text" />

to

<input name="email" id="email" value="enter your email" size="20" onfocus="if(this.value=='enter your email') { this.value=''; }" type="text" />
0
 

Author Comment

by:gajones76
ID: 20378382
thanks. however it still doesn't work:

http://www.mokitaproductions.org/index.php?page=form-test

the first time I load that page, the following error is displayed:

string(131) "Smarty error: [in globalcontent:mailinglist line 8]: syntax error: unrecognized tag: this.value='' (Smarty_Compiler.class.php, line 446)" string(119) "Smarty error: [in globalcontent:mailinglist  line 8]: syntax error: unrecognized tag '' (Smarty_Compiler.class.php, line 590)"

Subsequent reloads of the page remove the error, but also strip out the offfending code from the form:

{ this.value=''; }"

I'm using cmsmadesimple and wonder whether that has something to do with it. Whether i put the code directly into the page or in a content block the result is the same.
0
 
LVL 29

Expert Comment

by:Göran Andersson
ID: 20378628
The system that you are using uses brackets, which is unfortunate, as Javascript does too.

Fortunately, you don't need the brackets in this Javascript:

<input name="email" id="email" value="enter your email" size="20" onfocus="if(this.value=='enter your email') this.value='';" type="text" />
0
 

Author Comment

by:gajones76
ID: 20378674
thanks for that. In the end I found there is a {literal} tag in the CMS that you can wrap around to preserve the code.
0
 

Accepted Solution

by:
ee_auto earned 0 total points
ID: 25982783
Question PAQ'd, 500 points refunded, and stored in the solution database.
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

752 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question