Solved

Use one javascript script to affect all input fields

Posted on 2011-03-09
11
252 Views
Last Modified: 2012-08-13
Hi,

I have the following code:
<INPUT TYPE="TEXT" NAME="NC1" VALUE="Prefix" onfocus="if(this.value==this.defaultValue)this.value=''" onblur="if(this.value=='')this.value=this.defaultValue">
<INPUT TYPE="TEXT" NAME="NC2" VALUE="Chart" onfocus="if(this.value==this.defaultValue)this.value=''" onblur="if(this.value=='')this.value=this.defaultValue">
<INPUT TYPE="TEXT" NAME="NC3" VALUE="Suffix" onfocus="if(this.value==this.defaultValue)this.value=''" onblur="if(this.value=='')this.value=this.defaultValue">

Open in new window

So as you can see in every input there's repeated code:
onfocus="if(this.value==this.defaultValue)this.value=''" onblur="if(this.value=='')this.value=this.defaultValue"

Open in new window

I have more than 100 input fields and instead using 'onfocus' 'onblur' in every input field, I want to make just one common class for it, I mean something like this:
<script>
[proper code here needed]
onfocus="if(this.value==this.defaultValue)this.value=''" onblur="if(this.value=='')this.value=this.defaultValue"
</script>

<INPUT TYPE="TEXT" NAME="NC1" VALUE="Prefix">
<INPUT TYPE="TEXT" NAME="NC2" VALUE="Chart">
<INPUT TYPE="TEXT" NAME="NC3" VALUE="Suffix">

Open in new window


Thanks for any help
0
Comment
Question by:Zado
11 Comments
 
LVL 7

Expert Comment

by:Gene_Cyp
ID: 35082761
The onfocus and onblur are events triggered.

Those stay inside the Tags.

What you CAN do, is take the "logic" part and put it in a method and call the method instead of having to repeat the code every time.

<script>
mymethod()
{
// code implementation goes here
}
</script>
.
.
.
<INPUT TYPE="TEXT" NAME="NC1" VALUE="Prefix" onfocus="MyMethod('myparameter1 value', 'myparameter2 value')" onblur="MyMethod2('myparameter1 value', 'myparameter2 value')">

etc



Why is this important? If at any point in time you want to change the behaviour, you only have to do it once, in just one location and the behaviour globally changes for all of them
0
 
LVL 8

Author Comment

by:Zado
ID: 35082808
So I can't do it my way? Because that would be perfect for me. Your solution is some step forward, but it's not exactly what I wanted. Thanks for your help. Any other ideas are welcome.
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 35082829
You could have a script that is executed when the page is loaded that scans through the Document Object Model (DOM) and locates each input field.  It could then add onfocus and onblur events for each.
0
Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

 
LVL 19

Expert Comment

by:daveamour
ID: 35082884
Time to look at jQuery!

http://api.jquery.com/live/
0
 
LVL 52

Expert Comment

by:Carl Tawn
ID: 35082957
Try something like:
    <script language="javascript">

        var elems = document.getElementsByTagName("input");

        for (var idx = 0; idx != elems.length; ++idx)
        {
            elems[idx].onfocus = function() { if(this.value==this.defaultValue)this.value=''; }
            elems[idx].onblur = function() { if(this.value=='')this.value=this.defaultValue; }
        }


    </script>

Open in new window

0
 
LVL 20

Accepted Solution

by:
Proculopsis earned 500 total points
ID: 35083320

jQuery is your friend:

<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<title>http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_26873898.html</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">

jQuery(document).ready( function() {

  $("input[name^=NC]").each( function() {
    $(this)
    .attr( { defaultValue: $(this).val() } )
    .focus( eventFocus )
    .blur( eventBlur );
  });

});

function eventFocus() {
  if ( $(this).val() == $(this).attr( "defaultValue" ) ) {
    $(this).val( "" );
  }
}

function eventBlur() {
  if ( $(this).val() == "" ) {
    $(this).val( $(this).attr( "defaultValue" ) );
  }
}

</script>
</head>
<body>

<INPUT TYPE="TEXT" NAME="NC1" VALUE="Prefix" />
<INPUT TYPE="TEXT" NAME="NC2" VALUE="Chart" />
<INPUT TYPE="TEXT" NAME="NC3" VALUE="Suffix" />

</body>
</html>

Open in new window

0
 
LVL 8

Author Comment

by:Zado
ID: 35083566
Proculopsis, it works perfectly, exactly what I wanted, thanks!
0
 
LVL 13

Expert Comment

by:darren-w-
ID: 35083631
It being even more friendlier:

<script type="text/javascript">
    $(function(){              
        $("input").focus(function(){
            if(($(this).val() == $(this)[0].defaultValue)) {
                $(this).val('');
            }
        }).blur(function(){                     
            if ($(this).val() == '') {
                var defVal = $(this)[0].defaultValue;
                $(this).val(defVal);
            }
        });
        
    });

</script>

Open in new window

:

0
 
LVL 13

Expert Comment

by:darren-w-
ID: 35083639
doh!
0
 
LVL 13

Expert Comment

by:darren-w-
ID: 35083770
took our var definition as not required.

    $(function(){              
        $("input").focus(function(){
            if(($(this).val() == $(this)[0].defaultValue)) {
                $(this).val('');
            }
        }).blur(function(){                     
            if ($(this).val() == '') {            
                $(this).val($(this)[0].defaultValue);
            }
        });        
    });

Open in new window

0
 
LVL 8

Author Comment

by:Zado
ID: 35083963
Sorry darren-w-, I should wait for other suggestions before accepting Proculopsis's comment. Thanks for your help.
0

Featured Post

Active Directory Webinar

We all know we need to protect and secure our privileges, but where to start? Join Experts Exchange and ManageEngine on Tuesday, April 11, 2017 10:00 AM PDT to learn how to track and secure privileged users in Active Directory.

Question has a verified solution.

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

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
This article will inform Clients about common and important expectations from the freelancers (Experts) who are looking at your Gig.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

820 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