I've created a set of dynamically created textboxes like so
<input id="Pun{{item}}" type="text"
class="form-control textbox" placeholder=Punishment >
</div>
Where punishmentnum is an array of numbers. I want to know how to get data from each of the created textboxes, any help is appreciated.
I have created a solution on stackblitz.
Update the for each input with value iterated by *ngFor value as below.
<div *ngFor="let item of items">
<input id="Pun{{item}}" type="text" [(ngModel)]="pun[item]"
name="pun[item]" class="form-control textbox" placeholder="punishment
{{item}}" > {{pun}}
</div>
where
items = [1, 2, 3, 4];
pun = [];
You can use document.getElementById().
Your HTML file:
<input id="Pun{{item}}" type="text" class="form-control textbox" placeholder=Punishment>
Your ts file:
var item="YOUR_ITEM_HERE";
var textValue = (document.getElementById("Pun"+item) as any).value;
Related
My angular5 template looks somewhat like this:
<div ngFor="for x of X">
<input [(ngModel)]="x.name" type="text" class="form-control" name="name" maxlength="250" aria-required="true">
<button (click)="null_append(X)">append</button>
</div>
My angular component that is responsible for that template looks somewhat like this:
X=[
{name:null}
]
null_append(o){
console.log(o);
var null_found=false;
for(let c of o){
console.log(c.name)
if(c.name==null){
null_found = true;
}
}
if(!null_found){
o.push({name: null});
}
}
The problem that I am facing is that, when a new element is being pushed on that array it stays in the array but the input fields become empty. This is not something I want.
the problem was at the name, I was using the same name in all the input fields. My working version looks like following:
<div ngFor="for x of X;let i = index">
<input [(ngModel)]="x.name" type="text" class="form-control" name="name{{i}}" maxlength="250" aria-required="true">
<button (click)="null_append(X)">append</button>
</div>
I am developing an application and I am using Vue 2 as the javascript framework,
inside a v-for loop I need the counter of the loop to be bound to the v-model name of the elements, this my code:
<div v-for="n in total" class="form-group">
<input type="hidden" id="input_id" :name="'input_name_id[' + n + ']'" v-model="form.parent_id_n" />
</div>
I need n to be the counter of the loop, for example for the first element it should be:
<div class="form-group">
<input type="hidden" id="input_id" :name="'input_name_id[1]" v-model="form.parent_id_1" />
</div>
the name attribute binding works but I have no idea how to get the v-model working as well?
To use v-model with form.parent_id[n]:
form should be a data property.
form.parent_id should be an array.
Then you can do the following:
<div id="demo">
<div v-for='n in 3'>
<input v-model="form.parent_id[n]">
</div>
<div v-for='n in 3'>
{{ form.parent_id[n] }}
</div>
</div>
by having a vue instance setup like:
var demo = new Vue({
el: '#demo',
data: {
form: {
parent_id: []
}
}
})
Check this fiddle for a working example.
Another way achieve this is using bracket notation of accessing object property.
<div v-for="n in total" class="form-group">
<input type="hidden"
id="input_id"
:name="'input_name_id[' + n + ']'"
v-model="form['parent_id_' + n ]" />
</div>
Repeated text filed 10 times and separated v-model for each
<v-text-field
v-for="(n,index) in 10"
:key="index"
v-model="pricing.name[n]"
color="info"
outline
validate-on-blur
/>
storing data
data() {
return {
pricing:{
name: [],
}
}
When you modify an Array by directly setting an index (e.g. arr[0] = val) or modifying its length property. Similarly, Vue.js cannot pick up these changes. Always modify arrays by using an Array instance method, or replacing it entirely. Vue provides a convenience method arr.$set(index, value) which is syntax sugar for arr.splice(index, 1, value).
this code worked for me:
HTML
<input type="number" #input="updateValue($event, i, 'pci')" :value="form.neighbours[i].pci" />
JS
updateValue(event, i, key) {
const neighbour = {...this.form.neighbours[i]};
neighbour[key] = event.target.value;
this.form.neighbours.splice(i, 1, neighbour)
}
Assuming input_name_id is a string, What you need to do is :name="'input_name_id' + n"
Here is a working solution
I want to be able to add/remove items in an order and have them aggregate into an array to be sent to the backend. The data will look like:
CustomerName: Billy
Orders: [Pizza, Burger, Sushi]
Can't find any SO answers or documentation that gets into iterated input binding. Anyone attempted this? Template code:
<div>
<input
type="text"
name="name"
title="name"
placeholder="Customer Name"
[(ngModel)]="customerName"/>
</div>
<div *ngFor="let item of itemsInNewOrder; let i = index">
<input
type="text"
name="order"
title="order"
[(ngModel)]="itemsInNewOrder[index]"/>
</div>
inside the Add New button's click function:
...firebaseStuff... .push({name: name, order: this.itemsInNewOrder})
unfortunately, this doesn't work. Thanks in advance! :)
Edit 1: There are 2 buttons that trigger (respectively):
incrementItemsInNewOrder() {
this.itemsInNewOrder.push("")
}
decrementItemsInNewOrder() {
this.itemsInNewOrder.pop()
}
I can see one problem. You should use the variable i that you have declared in template.
<div *ngFor="let item of itemsInNewOrder; let i = index">
<input
type="text"
name="order"
title="order"
[(ngModel)]="itemsInNewOrder[i]"/> <------ HERE
</div>
EDIT
angular seems to be doing change detection when typing into the inputs and renders them again, when that happens you lose the focus.
but if you wrap the values into objects and suddenly it works.
Component:
itemsInNewOrder = [{value: 'Soda'}, {value: 'Burger'}, {value: 'Fries'}];
template:
<div *ngFor="let item of itemsInNewOrder; let i = index">
<input
type="text"
name="order"
title="order"
[(ngModel)]="itemsInNewOrder[i].value"/>
</div>
I have the next problem: I'm trying to use a modal jQuery form, this one, inside, changes dynamically the content of a table by using a template loaded. This template has a select which I want to load with data in the moment I put into the document.
This is the modal form:
<div id="divNuevoPartido" title="Nuevo Partido a introducir" style="display:none;">
<div id="divJugadoresDelPartido">
<h3>Introduce número de jugadores</h3>
<select id="selectJugadoresDelPartido">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<table id="tableJugadoresDelPartido"></table>
</div>
</div>
When 'selectJugadoresDelPartido' change, the table 'tableJugadoresDelPartido' changes dynamically depending of the number, insert this template inside the table n-times selected in 'selectJugadoresDelPartido'
This is the template, just fo 1 row:
<td>
<label for="jugadorName">Jugador</label>
<select class="selectorJugadores" name="jugadorName"></select>
<label for="isWinner">Ganador?</label>
<input type="checkbox" name="isWinner" />
<label for="isMvp">MVP?</label>
<input type="radio" name="isMvp" />
<label for="puntajeJugador">Puntaje</label>
<input type="number" name="puntajeJugador" />
<label for="golesJugador">Goles</label>
<input type="number" name="golesJugador" />
<label for="asistenciasJugador">Asistencias</label>
<input type="number" name="asistenciasJugador" />
<label for="salvadasJugador">Salvadas</label>
<input type="number" name="salvadasJugador" />
<label for="tirosJugador">Disparos</label>
<input type="number" name="tirosJugador" />
</td>
And finally, here is de JS code it should insert the template n-times selected above and also load data inside the select '.selectorJugadores'
function refrescarTablaJugadoresPartido(numJugadores){
$("#tableJugadoresDelPartido").empty();
for (var iMax = 0; iMax < parseInt(numJugadores); iMax++) {
var tmpRow = $("<tr></tr>");
tmpRow.attr("id", iMax);
tmpRow.load("views/templates/estadisticas_jugador_partido.html");
if($.isEmptyObject(usersList))
cargarJugadores();
var tmpOption = $("<option></option>");
tmpOption.html(usersList[0].getCodigo());
tmpRow.find("select").html(tmpOption);
$("#tableJugadoresDelPartido").append(tmpRow);
}
};
Everything inside the mehtod it's working but at the time I try to find the select into tmpRow, I seems it doesn't find and nothing is loaded inside.
NOTES:
usersList is a global variable: var usersList = new Array() with an objet with two variables: codigo and nombre, working fine in that way;
I'm loading just to test with one option, I'noticed about it :)
cargarJugadores() it's a function which load userList array (it's working perfecly)
Any ideas?
Thanks for everything
May be the document has not been loaded at the time you call the find command, beacuse load is asynchoronous.
You could put the find inside a callback in load, this way:
tmpRow.load("views/templates/estadisticas_jugador_partido.html" , function() {
tmpRow.find("select").html(tmpOption);
});
This way, the find command will be called once the load is complete.
I'm adding new inputs dynamically. And I would also like to read values dynamically from them. My championName variable doesn't work in JS.
<form name="second_form" id="second_form" action="#" method="POST" style="margin: 0;" >
<div id="p_scents">
<p>
<label for="p_scnts">
<input type="text" id="p_scnt" size="20" list="champions" name="champion[]" value="" placeholder="Enter Champion's name">
<datalist id="champions"></datalist>
Add General Change<a></a>
Add Spell<a></a>
</label>
</p>
</div>
<br/><input type="submit" value="submit">
</form>
function val(doublechamp) {
var championsWithExtraSpells = ["Aatrox", "Elise", "Fizz", "Heimerdinger", "Jayce", "Lee Sin", "Nidalee", "Rek'Sai","Twisted Fate"];
var champion = this["champion[]"];
var championName = document.getElementsByName("Champion[]").value;
if($.inArray(championName, championsWithExtraSpells)==-1){
var existsInArray = false;}
else{
var existsInArray = true;}
d = document.getElementById("change[]").value;
var spellname = document.getElementById("ttt");
spellname.value=champions[""+championName+""][change(d, existsInArray)];
}
Collection returned by getElementsByName() in the line, so just replace it.
UPDATED
JS :
Replace :
var championName = document.getElementsByName("Champion[]").value;
By :
for(var i=0;i<document.getElementsByName("champion[]").length;i++)
var championName = document.getElementsByName("champion[]")[0].value;
Now you can get all the inputs values.
There are couple of changes you need to make:
- You're not invoking the function anywhere in the code you're showing
you'll need to add an onChange clause to the input or an onsubmit to the form to check the values..
the name of an element can't contain [] - so you should remove those from the name;
<input type="text" id="p_scnt" size="20" list="champions" name="champion" value="" placeholder="Enter Champion's name">
getElementsByName returns nodelist, not a single node (even if there's only one match). If you make the following changes you'll get farther:
And in the script change these two lines:
var championName = document.getElementsByName("champion");
if($.inArray(championName[0].value, championsWithExtraSpells)==-1){