473,320 Members | 1,879 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

Combining two javascript on same trigger

Hello,

I'm trying to combine two javascript functions to occur on the same onfocus form field event. My code is below. I have one script which highlights the current form field div, and another script, coded in the div itself, which is supposed to make some text visible when the form field is also clicked on. If I remove one function, the other will work. But if both functions are in the code, only the highlight function works. Any idea how I can combine the two?

Many thanks!
Josh
------------------------------

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  2.       "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  3. <html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" >
  4. <head>
  5.   <meta http-equiv="content-language" content="en" />
  6.   <title>User Registration</title>
  7. <style>
  8. html, body {
  9.   color: #000;
  10.   background-color: #fff;
  11.   font-size:15px;
  12. }
  13.  
  14. form div.active {
  15.   background-color: #98FB98;
  16.   border: 0px solid #8a8;
  17. }
  18.  
  19. #user_registration
  20. {
  21.     border:1px solid #6495ED;
  22.     margin:auto auto;
  23.     margin-top:100px;
  24.     width:500px;
  25.     background-color: #ECF1EF;
  26. }
  27.  
  28. </style>
  29. <script type="text/javascript"><!--
  30. function hasClassName(el,c){
  31.   c=c.replace(/\-/g,'\\-');
  32.   return (new RegExp('(^|\\s)'+c+'(\\s|$)')).test(el.className);  
  33. }
  34. function addClassName(el,c){
  35.   if(hasClassName(el,c)) return;
  36.   var curClass=el.className||'';
  37.   el.className=curClass+((curClass.length>0)?' ':'')+c;
  38. }
  39. function removeClassName(el,c){
  40.   var re=new RegExp('\\s*'+c.replace(/\-/g,'\\-')+'\\s*');
  41.   el.className=el.className.replace(re,' ').replace(/^\s*|\s*$/g,'');
  42. }
  43. function highlightElm(el,light){
  44.   if(!el) return;
  45.   if(light) addClassName(el,'active');
  46.   else removeClassName(el,'active');
  47. }
  48. window.onload = function(){
  49.   document.getElementById('field1').onfocus=function  (){
  50.     highlightElm(this.parentNode,true);
  51.   }
  52.   document.getElementById('field1').onblur=function(  ){
  53.     highlightElm(this.parentNode,false);
  54.   }
  55.  }
  56.  
  57. // -->
  58. </script>
  59. </head>
  60. <body>
  61.  
  62. <form method="post" action="" id="user_registration" name="user_registration">
  63. <div id="username">
  64.     Username
  65.     <p></p>
  66.     <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">
  67.  
  68.     <div id="usernote" style="display:none;">
  69.     Your username can only contain letters (A-Z) or numbers (0-9)
  70.     </div>
  71. </div>
  72.  
  73. </form> 
  74.  
  75.  
  76. </body>
  77. </html>
  78.  
  79.  
  80.  
Dec 17 '07 #1
2 1061
gits
5,390 Expert Mod 4TB
try the following - adapt your first onfocus-assignment the following way:

Expand|Select|Wrap|Line Numbers
  1. document.getElementById('field1').onfocus = function() {
  2.     // toggle usernote to be visible
  3.     document.getElementById('usernote').style.display = 'block';
  4.  
  5.     // highlight field
  6.     highlightElm(this.parentNode, true);
  7. }
  8.  
now remove the onfocus-handling from your html-input-node ... and now: when it works then adapt the onblur-assigment accordingly

kind regards
Dec 17 '07 #2
Thank you, GITS. It worked perfectly. Appreciate your patience...it's my first time working with javascript (as you can no doubt tell!)
Cheers!
Dec 17 '07 #3

Sign in to post your reply or Sign up for a free account.

Similar topics

2
by: Brian | last post by:
Hi All, Can someone please point me in the right direction I am having problems combining JS and ASP. What I am trying to do is store in a database using ASP the referring page of my visitors. ...
4
by: JesusFreak | last post by:
From: us_traveller@yahoo.com (JesusFreak) Newsgroups: microsoft.public.scripting.jscript Subject: toolbar script problem NNTP-Posting-Host: 192.92.126.136 Recently, I downloaded the following...
4
by: Adam Smith | last post by:
Hello, How can I call or trigger an external javascript twice in a form? I have <script language="JavaScript" src="country_state.js" name="Country_State"> <script type="text/javascript"...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
0
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.