Add placeholder dynamically using Javascript/Jquery

Question

I need one help.I need to add placeholder dynamically into the input field in a loop using Javascript.Let me to explain the code below.

<input class="form-control oditek-td-blank1"   placeholder="e.g:9 AM-10AM" >

Now here my placeholder value e.g:9 AM-10AM i need to add this in a loop means in first itretion it will be e.g:9 AM-10AM in second itretion it will be e.g:10 AM-11AM and so on upto 6 times.Here 6 input field will create and 6 placeholder with different value as given will create dynamically.Please help me.

madalinivascu · Accepted Answer · 2015-11-26 09:23:53Z

3

try: attr()

 var j = 0;
 var k = 1;
 var type2 ="AM",type= 'AM';
  $('.oditek-td-blank1').each(function(i,v){
      j++; k++;
    if(j>12) {
     type= (type=="AM")?"PM":"AM";
     time = '1 '+type;
     j = 1;
    } else {
     time = j+' '+type;
    }
       if(k>12) {
     type2= (type2=="AM")?"PM":"AM";
     time2 = '1 '+type2;
     k = 1;
    } else {
     time2 = k+' '+type2;
    }
      $(v).attr('placeholder','e.g:'+time+' '+time2 );
});

https://jsfiddle.net/h6w5j6x8/1/

edited Nov 26, 2015 at 9:23

answered Nov 26, 2015 at 8:40

madalinivascu

32.4k4 gold badges42 silver badges59 bronze badges

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

3 Comments

user5443928 Over a year ago

Will it give the proper time format like 9AM-10AM,10AM-11AM,11AM-12AM,1PM-2PM...... ?

madalinivascu Over a year ago

if you have 6 inputs with class .oditek-td-blank1 than it will

user5443928 Over a year ago

If i will measure the loop itretion by length then ?

Jai · Accepted Answer · 2015-11-26 09:27:41Z

0

You can use something like this, which can enable you to control the creation of elements and start time as well:

function setInputPlaceholders(num, sTime, duration) {
  var arr = [],
    endTime,
    startTime = sTime;
  for (var i = 0; i < num; i++) {
    endTime = startTime + duration;
    var inp = document.createElement("input");
    inp.type = "text";
    var ampm = startTime <= 12 && endTime <= 12 ? " AM " : " PM "
    inp.setAttribute("placeholder", startTime + ampm + endTime + ampm);
    document.body.appendChild(inp);
    startTime = endTime;
  }
}

setInputPlaceholders(6, 9, 1);

answered Nov 26, 2015 at 9:27

Jai

74.8k12 gold badges77 silver badges104 bronze badges

Collectives™ on Stack Overflow

Add placeholder dynamically using Javascript/Jquery

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related