• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 271
  • Last Modified:

Use one javascript script to affect all input fields

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
Zado
Asked:
Zado
1 Solution
 
Gene_CypCommented:
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
 
ZadoAuthor Commented:
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
 
HonorGodCommented:
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
daveamourCommented:
Time to look at jQuery!

http://api.jquery.com/live/
0
 
Carl TawnSystems and Integration DeveloperCommented:
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
 
ProculopsisCommented:

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
 
ZadoAuthor Commented:
Proculopsis, it works perfectly, exactly what I wanted, thanks!
0
 
darren-w-Commented:
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
 
darren-w-Commented:
doh!
0
 
darren-w-Commented:
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
 
ZadoAuthor Commented:
Sorry darren-w-, I should wait for other suggestions before accepting Proculopsis's comment. Thanks for your help.
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now