Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Use one javascript script to affect all input fields

Posted on 2011-03-09
11
Medium Priority
?
269 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
[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
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
Industry Leaders: 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!

 
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 2000 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

Tech or Treat! - Giveaway

Submit an article about your scariest tech experience—and the solution—and you’ll be automatically entered to win one of 4 fantastic tech gadgets.

Question has a verified solution.

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

Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
This article will show how Aten was able to supply easy management and control for Artear's video walls and wide range display configurations of their newsroom.
In this fifth video of the Xpdf series, we discuss and demonstrate the PDFdetach utility, which is able to list and, more importantly, extract attachments that are embedded in PDF files. It does this via a command line interface, making it suitable …
Starting up a Project
Suggested Courses

636 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