javascript issue with displaying labels inside textbox

Question

Hi I am having a iput type text defined as follows

  <input type="text" name="dateInputUserActivity1" value="" id="dateInputUserActivity1" onfocus="HideLabel(this)" onblur="ShowLabel(this)">

I have defined the functions HideLabel(textbox) and ShowLabel(textbox) in an external javascript file like this:

          function HideLabel(txtField){
        if(
           txtField.name=='dateInputResourceEventActivityComparison1' 
            || txtField.name=='dateInputResourceActivityComparison1' 
            || txtField.name=='dateInputResourceEventStatistics1'
            || txtField.name=='dateInputUserImportHistory1'
            || txtField.name=='dateInputUserActivity1'
            || txtField.name=='dateInputUserEventStatistics1'
            || txtField.name=='dateInputUserStatistics1'   // top10distinct chart date
            || txtField.name=='dateInputtop10UserActivity1'
        ){
            if(txtField.value=='From Date')
                txtField.value = '';
            else
                txtField.select();
        }else if(txtField.name=='dateInputResourceEventActivityComparison2'
        || txtField.name=='dateInputUserActivity2'
        || txtField.name=='dateInputUserEventStatistics2'
        || txtField.name=='dateInputResourceActivityComparison2'
        || txtField.name=='dateInputUserImportHistory2'
        || txtField.name=='dateInputUserStatistics2'
        || txtField.name=='dateInputtop10UserActivity2'
        || txtField.name=='dateInputResourceEventStatistics2'){
            if(txtField.value=='To Date'){
                txtField.value = '';

            }
            else{

                txtField.select();
            }
        }
    } 

function ShowLabel(txtField){
        if(
               txtField.name=='dateInputResourceEventActivityComparison1' 
            || txtField.name=='dateInputResourceActivityComparison1' 
            || txtField.name=='dateInputResourceEventStatistics1'
            || txtField.name=='dateInputUserImportHistory1'
            || txtField.name=='dateInputUserActivity1'
            || txtField.name=='dateInputUserEventStatistics1'
            || txtField.name=='dateInputUserStatistics1'   // top10distinct chart date
            || txtField.name=='dateInputtop10UserActivity1'
){
            if(txtField.value.trim()=='')
                txtField.value = 'From Date';
        }else if(
            txtField.name=='dateInputResourceEventActivityComparison2'
        || txtField.name=='dateInputUserActivity2'
        || txtField.name=='dateInputUserEventStatistics2'
        || txtField.name=='dateInputResourceActivityComparison2'
        || txtField.name=='dateInputUserImportHistory2'
        || txtField.name=='dateInputUserStatistics2'
        || txtField.name=='dateInputtop10UserActivity2'
        || txtField.name=='dateInputResourceEventStatistics2'
    ){
            if(txtField.value.trim()==''){
                txtField.value = 'To Date';
                //txtField.type = 'text';
            }
        }
    }

These are all the date field textboxes which I want to modify to display label in the textbox.

Right now only the first field in the if statement shows the labels in the textbox, the other fields display the labels only when I focus in and focus out of the field. How do I show the labels on all the fields on pageload?

thedailywtf.com called, they want their code back

Dónal
– Dónal

2012-02-27 12:42:47 +00:00
Commented Feb 27, 2012 at 12:42 — Dónal
– Dónal, Commented Feb 27, 2012 at 12:42

Domenic · Accepted Answer · 2012-02-08 05:40:38Z

1

Have you considered

<input type="text" name="dateInputUserActivity1" value="" id="dateInputUserActivity1" placeholder="From Date">

The key is the placeholder attribute.

answered Feb 8, 2012 at 5:40

Domenic

113k42 gold badges227 silver badges275 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

pri_dev Over a year ago

yeah can try that too... looks really simple

pri_dev · Accepted Answer · 2012-02-08 04:29:44Z

0

The issue was setting the default value="From Date", which was empty.. so I added that in all text-field tags and its working fine.

answered Feb 8, 2012 at 4:29

pri_dev

11.8k16 gold badges76 silver badges122 bronze badges

Collectives™ on Stack Overflow

javascript issue with displaying labels inside textbox

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related