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?

Answer 1

Have you considered

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

The key is the placeholder attribute.