Dynamically change input labels

Question

How change the label caption which are generated dynamically through jQuery

This is my current code

<div class="form-group">
    <label class="col-sm-2 control-label">Scheme Length</label>
    <div class="col-sm-10">
    <input type="number" name="s_Length" min="1" max="24" class="form-control" id="s_Length" placeholder="No. of Draws" required> 
    </div>
</div>`

<div class="dynamiclength"></div>

And script is

$("#s_Length").change(function(){
    var maxField = $(this).val();
    var wrapper = $('.dynamiclength');
    wrapper.html("");
    var fieldHTML = '<div class="form-group"><label class="col-sm-2 control-label">Draw Dates</label><div class="col-sm-10"><input type="text" name="drawdate[]" class="form-control" placeholder="No. of Draws" value="" required></div>';
    var x;
    for(x=0; x < maxField; x++){ 
        $(wrapper).append(fieldHTML);
    }
});

So how can I change label of generated input fields, say 1st Draw date, 2nd Draw Date... according to no. of fields generated ?

Alive to die - Anant · Accepted Answer · 2019-06-28T05:02:42.997

a) Put your fieldHTML code inside loop.

b) Create a function to get corresponding st,nd,rd,th based on number.

c) var x; is not required actually.

Working snippet:-

$("#s_Length").change(function(){
  var maxField = $(this).val();
  var wrapper = $('.dynamiclength');
  wrapper.html("");
  for(x=0; x < maxField; x++){
    var fieldHTML = '<div class="form-group"><label class="col-sm-2 control-label">'+ordinal_suffix_of(x+1)+ ' Draw Dates</label><div class="col-sm-10"><input type="text" name="drawdate[]" class="form-control" placeholder="No. of Draws" value="" required></div>';
    $(wrapper).append(fieldHTML);
  }
});

function ordinal_suffix_of(i) {
  var j = i % 10,
  k = i % 100;
  if (j == 1 && k != 11) {
    return i + "st";
  }
  if (j == 2 && k != 12) {
    return i + "nd";
  }
  if (j == 3 && k != 13) {
    return i + "rd";
  }
  return i + "th";
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
  <label class="col-sm-2 control-label">Scheme Length</label>
  <div class="col-sm-10">
    <input type="number" name="s_Length" min="1" max="24" class="form-control" id="s_Length" placeholder="No. of Draws" required>
  </div>
</div>

<div class="dynamiclength"></div>

Reference taken:- Add st, nd, rd and th (ordinal) suffix to a number

@user3045457 glad to help you.Thanks – Alive to die - Anant Jun 28 '19 at 05:07 — Alive to die - Anant, Jun 28 '19 at 05:07

Dynamically change input labels

1 Answers1