Hello,
Could anyone direct me to some sample script that makes a div or text visible only when a webform field in selected. So for example, in the below snippet, I want the text "Your username can only contain letters (A-Z) or numbers (0-9)" to be visible only when the user has selected "field1" in the form. Likewise, when the user leaves "field1," the text should become invisible again.
Many thanks!
Josh -
<div id="username">
-
Username
-
<p></p>
-
<input type="text" id="field1" name="field1" size="20" tabindex="1">
-
-
<div id="usernote">
-
Your username can only contain letters (A-Z) or numbers (0-9)
-
</div>
-
-
</div>
-
6  1919  gits 5,390
Expert Mod 4TB
hi ...
welcome to TSDN ...
you may use the onfocus and onblur of your textbox events for that purpose. onfocus you should set the div's style display to block and unblur to none ...
kind regards
-
<div id="username">
-
Username
-
<p></p>
-
<input type="text" id="field1" name="field1" onblur="document.getElementById('usernote').style.display = 'none'" onfocus="document.getElementById('usernote').style.display = 'block';" size="20" tabindex="1">
-
-
<div id="usernote" style="display:none;">
-
Your username can only contain letters (A-Z) or numbers (0-9)
-
</div>
-
</div>
-
Many thanks Tromton....works like a charm! I'm trying to now combine this onfocus/onblur function with another onfocus/onblur function. Is it possible to combine two scripts that function on the same trigger event?
Thanks! -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
-
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
-
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" >
-
<head>
-
<meta http-equiv="content-language" content="en" />
-
<title>User Registration</title>
-
<style>
-
html, body {
-
color: #000;
-
background-color: #fff;
-
font-size:15px;
-
}
-
-
form div.active {
-
background-color: #98FB98;
-
border: 0px solid #8a8;
-
}
-
-
#user_registration
-
{
-
border:1px solid #6495ED;
-
margin:auto auto;
-
margin-top:100px;
-
width:500px;
-
background-color: #ECF1EF;
-
}
-
-
</style>
-
<script type="text/javascript"><!--
-
function hasClassName(el,c){
-
c=c.replace(/\-/g,'\\-');
-
return (new RegExp('(^|\\s)'+c+'(\\s|$)')).test(el.className);
-
}
-
function addClassName(el,c){
-
if(hasClassName(el,c)) return;
-
var curClass=el.className||'';
-
el.className=curClass+((curClass.length>0)?' ':'')+c;
-
}
-
function removeClassName(el,c){
-
var re=new RegExp('\\s*'+c.replace(/\-/g,'\\-')+'\\s*');
-
el.className=el.className.replace(re,' ').replace(/^\s*|\s*$/g,'');
-
}
-
function highlightElm(el,light){
-
if(!el) return;
-
if(light) addClassName(el,'active');
-
else removeClassName(el,'active');
-
}
-
window.onload = function(){
-
document.getElementById('field1').onfocus=function(){
-
highlightElm(this.parentNode,true);
-
}
-
document.getElementById('field1').onblur=function(){
-
highlightElm(this.parentNode,false);
-
}
-
}
-
-
// -->
-
</script>
-
</head>
-
<body>
-
-
<form method="post" action="" id="user_registration" name="user_registration">
-
<div id="username">
-
Username
-
<p></p>
-
<input type="text" id="field1" name="field1" onblur="document.getElementById('usernote').style.display = 'none'" onfocus="document.getElementById('usernote').style.display = 'block';" size="20" tabindex="1">
-
-
<div id="usernote" style="display:none;">
-
Your username can only contain letters (A-Z) or numbers (0-9)
-
</div>
-
</div>
-
-
</form>
-
-
-
</body>
-
</html>
-
gits 5,390
Expert Mod 4TB
for that purpose create a function that calls what you want and call the function from the event-handlers of your textbox ...: - function do_onfocus(node) {
-
// your current code to call
-
node.style.display = 'block';
-
-
// put the further calls here
-
}
-
later on:
[HTML]<input type="text" id="field1" name="field1" onfocus="do_onfocus(this);">[/HTML]
note that i pass the node itself to the function ... it's a little bit more elegant and much shorter :)
kind regards
Thank you both! It is much appreciated.
Josh
gits 5,390
Expert Mod 4TB
aaargh ... sorry for misguiding you :) ... this is the textbox of course and you should use the document.getElementById('usernote') to set the display property but you may use this for the highlighting of the inputbox ...
kind regards
Sign in to post your reply or Sign up for a free account.
Similar topics
by: Chris |
last post by:
Hi,
I use a datagrid in a webform but the grid is never visible in the browser
(only at design-time is it visible).
Using it in a Winform : no problem.
How come ?
Thnx
|
by: jmarr02s |
last post by:
Hi,
How do I replace with when the field is empty?
Thanks!
jmarr02s
|
by: flunn |
last post by:
I'm a beginner with php. I'm trying to learn it so I can make quizzes and tutorials for my English as a Second Language site.
I'm trying to make a form that does the following:
(1) the user...
|
by: Sideburns |
last post by:
I am trying to use a checkbox to make a textbox visible when checkbox=yes and invisible when the checkbox=no. I am not sure if this is the best way to go about this. It has been a while since I have...
|
by: ACF |
last post by:
Hello,
I’m trying to format only selected text in an RTF Memo field in Access 2007
I’m able to copy selected text in a Memo field to the Windows clipboard with following code:
...
|
by: ddtpmyra |
last post by:
This is just a follow-up question above, this time i wanted to have a dependend drop down that when the users selected 'others' for instance another texbox will show-up right next to my drop down. ...
|
by: Indrajit Chakraborty |
last post by:
I am developing a simple web site in ASP. I have a web page which has a form, and I want to set the values of two text box to 2 fields selected by a query. One of the fields is a name field which has...
|
by: KeredDrahcir |
last post by:
Is there a way to put some default text in a form field that will disappear when the user focuses on it.
For example you have a login form and it says E-mail in the E-mail box but this disappears as...
|
by: Hema Selvan |
last post by:
I am new to MS Access. I have created a database. One of the field have Item number which has more than 20 digits. First i had the field with Text. I have problem as the Item number is duplicating....
|
by: Charles Arthur |
last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
|
by: emmanuelkatto |
last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud.
Please let me know.
Thanks!
Emmanuel
|
by: Sonnysonu |
last post by:
This is the data of csv file
1 2 3
1 2 3
1 2 3
1 2 3
2 3
2 3
3
the lengths should be different i have to store the data by column-wise with in the specific length.
suppose the i have to...
|
by: Hystou |
last post by:
There are some requirements for setting up RAID:
1. The motherboard and BIOS support RAID configuration.
2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
|
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers,...
|
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
| |
