Solved

Use one javascript script to affect all input fields

Posted on 2011-03-09
11
247 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
 
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
What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

 
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

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

Suggested Solutions

Whether you’re a college noob or a soon-to-be pro, these tips are sure to help you in your journey to becoming a programming ninja and stand out from the crowd.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this fourth video of the Xpdf series, we discuss and demonstrate the PDFinfo utility, which retrieves the contents of a PDF's Info Dictionary, as well as some other information, including the page count. We show how to isolate the page count in a…

758 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

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now