CODEWITHSUNDEEP
javascript
pri_dev
pri_dev

Reputation: 11645

javascript issue with displaying labels inside textbox

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?

Upvotes: 0

Views: 346

Answers (2)

Domenic
Domenic

Reputation: 112817

Have you considered

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

The key is the placeholder attribute.

Upvotes: 1

pri_dev
pri_dev

Reputation: 11645

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.

Upvotes: 0

Related Questions