I have a page with a grid containing a lot if input with "strange names" to simulate an array:
<input type="text" id="Punteggi[@counter].Descrizione" readonly="readonly" tabindex="-1" name="Punteggi[@counter].Descrizione" class="{validate: {required:true}}" value="@item.Descrizione" />
How can I set the value of these inputs with jQuery, specifically, how would I select them? I tried in a lot of ways but nothing works.
Since this question was asked and answered, more developments have been made in the DOM and CSSOM space to make this easier, both for jQuery users, and for non-jQuery users. I present CSS.escape():
In jQuery:
var id = "Punteggi[@counter].Descrizione";
var selector = `#${CSS.escape(id)}`;
var val = $(selector).val();
console.log(val);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="Punteggi[@counter].Descrizione" readonly="readonly" tabindex="-1" name="Punteggi[@counter].Descrizione" class="{validate: {required:true}}" value="@item.Descrizione" />Without jQuery:
var id = "Punteggi[@counter].Descrizione";
var selector = `#${CSS.escape(id)}`;
var val = document.querySelector(selector).value;
console.log(val);<input type="text" id="Punteggi[@counter].Descrizione" readonly="readonly" tabindex="-1" name="Punteggi[@counter].Descrizione" class="{validate: {required:true}}" value="@item.Descrizione" />