Solved

Use one javascript script to affect all input fields

Posted on 2011-03-09
11
257 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
What Is Transaction Monitoring and who needs it?

Synthetic Transaction Monitoring that you need for the day to day, which ensures your business website keeps running optimally, and that there is no downtime to impact your customer experience.

 
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

On Demand Webinar: Networking for the Cloud Era

Ready to improve network connectivity? Watch this webinar to learn how SD-WANs and a one-click instant connect tool can boost provisions, deployment, and management of your cloud connection.

Question has a verified solution.

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

This article discusses four methods for overlaying images in a container on a web page
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
In this seventh video of the Xpdf series, we discuss and demonstrate the PDFfonts utility, which lists all the fonts used in a PDF file. It does this via a command line interface, making it suitable for use in programs, scripts, batch files — any pl…

695 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