How to generate "x" jQuery scripts with a for loop?

Question

This might sound very strange and probably it is, so forgive me if I'm committing a bad mistake. I have an unspecified number of <input type='text'>, generated at runtime and identified with a progress number id like id='data1', id='data2'...I would like to have a jQuery script on every input. I thought to generate x scripts for x inputs but it doesn't work.

How could I do this?

function addPreparations (nos, pietanze) {
  var numeroTotale = nos.value;
  var box = document.getElementById("box_righe");
  generateScripts(numeroTotale);
  if (numeroTotale == '') {
    box.innerHTML = '';
  }
  else {
    var righe = "<table class='table table-hover'>";
    righe += "<th class='text-center'>Pietanza</th><th class='text-center'>U. di Misura</th><th class='text-center'>Quantità</th><th class='text-center'>Cuoco</th><th class='text-center'>Data di Preparazione</th>";
    for (i = 1; i <= numeroTotale; i++) {
      righe = righe + "<tr><td><select name='pietanza"+i+"' class='form-control' onchange='showMU(this.value, \"p\", "+i+");'>";
      righe = righe + "<option value=''>Selezionare la pietanza "+i+"</option>";
      for (j=0; j<pietanze.length; j++) {
        righe = righe + "<option value='"+pietanze[j]+"'>"+pietanze[j]+"</option>";
      }
      righe = righe + "</select></td>";
      righe = righe + "<td align='center'><p id='umis"+i+"' class='h5'>- - -</p></td>";
      righe = righe + "<td><input type='number' placeholder='Inserire la quantità' name='quantita"+i+"' class='form-control'/></td>";
      righe = righe + "<td><input type='text' placeholder='Inserire il cuoco' name='cuoco"+i+"' class='form-control'/></td>";
      righe = righe + "<td><input type='text' placeholder='GGMMAAAA' id='data"+i+"' class='form-control' name='data"+i+"' /></td></tr>";
    }
    righe = righe + "</table>";

    righe = righe + "<input type='submit' name='storageConfirm' value='Conferma' class='btn btn-success'/>&nbsp&nbsp";
    righe = righe + "<input type='reset' value='Reimposta' class='btn btn-danger'/>";

    box.innerHTML = righe;
  }
}

function generateScripts (total) {
  for (i=1; i<=total; i++) {
    $(document).ready(function() {
      $("body").on('keydown', '#data'+i, function(e) {
        if ((e.keyCode == 8) || (e.keyCode >= 96 && e.keyCode <= 105) || (e.keyCode >= 48 && e.keyCode <= 57)) {
          return;
        }
        else {
          alert("Solo numeri!");
          e.preventDefault();
        }
      });
    });
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

in your jquery code, in the for loop, check if the '#data'+i exists, if not, exit the loop? — Nomistake
– Nomistake, Commented Mar 15, 2017 at 15:06

Zakaria Acharki · Accepted Answer · 2017-03-15 15:11:38Z

4

Use attribute selector [] with the start with ^ selector ([id^="data"]), your code should be :

$(document).ready(function() {
    $("body").on('keydown', '[id^="data"]', function(e) {
        //Your logic HERE
    });
});

Or you could give all your inputs a common class and use it as selector like :

$(document).ready(function() {
    $("body").on('keydown', '.common_class', function(e) {
        //Your logic HERE
    });
});

NOTE : It's better to use the input event when you track the user input, like :

$(document).ready(function() {
    $("body").on('input', '[id^="data"]', function(e) {
        //Your logic HERE
    });
});

Hope this helps.

edited Mar 15, 2017 at 15:11

answered Mar 15, 2017 at 15:04

Zakaria Acharki

67.5k15 gold badges79 silver badges106 bronze badges

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

2 Comments

Zakaria Acharki Over a year ago

Why @Nomistake :) ?

Nomistake Over a year ago

@Zakaria dont remember 😀 maybe: he's talking about '... id like id='data1', id='data2'...' so my guess it has to be unique for an untold reason...

gen_Eric · Accepted Answer · 2017-03-15 15:05:23Z

0

You do not need the loop here. What you want to do is add a class to each of these elements. Something like inputdata; make sure this same class is on all of the inputs.

Then you can just do:

$(document).ready(function(){
    $('body').on('click', '.inputdata', function(e){
    });
});

answered Mar 15, 2017 at 15:05

gen_Eric

228k42 gold badges304 silver badges343 bronze badges

3 Comments

Nomistake Over a year ago

he asks for id's

gen_Eric Over a year ago

@Nomistake: True, but adding a class is still a valid solution.

Nomistake Over a year ago

Maybe. But he's talking about '... id like id='data1', id='data2'...' so my guess it has to be unique for an untold reason...

Collectives™ on Stack Overflow

How to generate "x" jQuery scripts with a for loop?

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related