Add the values from checkboxes on Angular
0
I have a doubt. I have some checkboxes that I want to add on a final input (#equipamentoPunct) to finally submit all the data:
<div class="form-group">
<label><h3>Equipamento</h3></label> <br>
<label><input type="checkbox" id="cbox1" class="sumEq" value="14,28571429"> Equipo de sonido</label><br>
<label><input type="checkbox" id="cbox2" class="sumEq" value="14,28571429"> Equipo de luces </label><br>
<label><input type="checkbox" id="cbox3" class="sumEq" value="14,28571429"> Ryder</label><br>
<label><input type="checkbox" id="cbox4" class="sumEq" value="14,28571429"> Backline</label><br>
<label><input type="checkbox" id="cbox5" class="sumEq" value="14,28571429"> Alquiler de equipos</label><br>
<label><input type="checkbox" id="cbox6" class="sumEq" value="14,28571429"> Escenario</label><br>
<label><input type="checkbox" id="cbox7" class="sumEq" value="0"> Camerinos 0</label><br>
<label><input type="checkbox" id="cbox8" class="sumEq" value="4,76190476"> Camerinos 1 o 2</label><br>
<label><input type="checkbox" id="cbox9" class="sumEq" value="14,28571429"> Camerinos 3+</label><br>
</div>
<div class="form-group">
<label for="equipamentoPunct">Puntuación Equipamento</label>
<input type="number" class="form-control" id="equipamentoPunct" name="equipamentoPunct" [(ngModel)]="venue.equipamentoPunct">
</div>
I founded a lot of info about how to do it with vanilla JS or jQuery, but I have a lot of problems on angular. Any ideas?
angular forms typescript
edited Nov 13 '18 at 16:51
Samuel J Mathew
3,53212228
asked Nov 13 '18 at 16:48
Joan Subirats LlaveriaJoan Subirats Llaveria
52
add a comment |
0
I have a doubt. I have some checkboxes that I want to add on a final input (#equipamentoPunct) to finally submit all the data:
<div class="form-group">
<label><h3>Equipamento</h3></label> <br>
<label><input type="checkbox" id="cbox1" class="sumEq" value="14,28571429"> Equipo de sonido</label><br>
<label><input type="checkbox" id="cbox2" class="sumEq" value="14,28571429"> Equipo de luces </label><br>
<label><input type="checkbox" id="cbox3" class="sumEq" value="14,28571429"> Ryder</label><br>
<label><input type="checkbox" id="cbox4" class="sumEq" value="14,28571429"> Backline</label><br>
<label><input type="checkbox" id="cbox5" class="sumEq" value="14,28571429"> Alquiler de equipos</label><br>
<label><input type="checkbox" id="cbox6" class="sumEq" value="14,28571429"> Escenario</label><br>
<label><input type="checkbox" id="cbox7" class="sumEq" value="0"> Camerinos 0</label><br>
<label><input type="checkbox" id="cbox8" class="sumEq" value="4,76190476"> Camerinos 1 o 2</label><br>
<label><input type="checkbox" id="cbox9" class="sumEq" value="14,28571429"> Camerinos 3+</label><br>
</div>
<div class="form-group">
<label for="equipamentoPunct">Puntuación Equipamento</label>
<input type="number" class="form-control" id="equipamentoPunct" name="equipamentoPunct" [(ngModel)]="venue.equipamentoPunct">
</div>
I founded a lot of info about how to do it with vanilla JS or jQuery, but I have a lot of problems on angular. Any ideas?
angular forms typescript
edited Nov 13 '18 at 16:51
Samuel J Mathew
3,53212228
asked Nov 13 '18 at 16:48
Joan Subirats LlaveriaJoan Subirats Llaveria
52
add a comment |
0
0
0
I have a doubt. I have some checkboxes that I want to add on a final input (#equipamentoPunct) to finally submit all the data:
<div class="form-group">
<label><h3>Equipamento</h3></label> <br>
<label><input type="checkbox" id="cbox1" class="sumEq" value="14,28571429"> Equipo de sonido</label><br>
<label><input type="checkbox" id="cbox2" class="sumEq" value="14,28571429"> Equipo de luces </label><br>
<label><input type="checkbox" id="cbox3" class="sumEq" value="14,28571429"> Ryder</label><br>
<label><input type="checkbox" id="cbox4" class="sumEq" value="14,28571429"> Backline</label><br>
<label><input type="checkbox" id="cbox5" class="sumEq" value="14,28571429"> Alquiler de equipos</label><br>
<label><input type="checkbox" id="cbox6" class="sumEq" value="14,28571429"> Escenario</label><br>
<label><input type="checkbox" id="cbox7" class="sumEq" value="0"> Camerinos 0</label><br>
<label><input type="checkbox" id="cbox8" class="sumEq" value="4,76190476"> Camerinos 1 o 2</label><br>
<label><input type="checkbox" id="cbox9" class="sumEq" value="14,28571429"> Camerinos 3+</label><br>
</div>
<div class="form-group">
<label for="equipamentoPunct">Puntuación Equipamento</label>
<input type="number" class="form-control" id="equipamentoPunct" name="equipamentoPunct" [(ngModel)]="venue.equipamentoPunct">
</div>
I founded a lot of info about how to do it with vanilla JS or jQuery, but I have a lot of problems on angular. Any ideas?
angular forms typescript
edited Nov 13 '18 at 16:51
Samuel J Mathew
3,53212228
asked Nov 13 '18 at 16:48
Joan Subirats LlaveriaJoan Subirats Llaveria
52
I have a doubt. I have some checkboxes that I want to add on a final input (#equipamentoPunct) to finally submit all the data:
<div class="form-group">
<label><h3>Equipamento</h3></label> <br>
<label><input type="checkbox" id="cbox1" class="sumEq" value="14,28571429"> Equipo de sonido</label><br>
<label><input type="checkbox" id="cbox2" class="sumEq" value="14,28571429"> Equipo de luces </label><br>
<label><input type="checkbox" id="cbox3" class="sumEq" value="14,28571429"> Ryder</label><br>
<label><input type="checkbox" id="cbox4" class="sumEq" value="14,28571429"> Backline</label><br>
<label><input type="checkbox" id="cbox5" class="sumEq" value="14,28571429"> Alquiler de equipos</label><br>
<label><input type="checkbox" id="cbox6" class="sumEq" value="14,28571429"> Escenario</label><br>
<label><input type="checkbox" id="cbox7" class="sumEq" value="0"> Camerinos 0</label><br>
<label><input type="checkbox" id="cbox8" class="sumEq" value="4,76190476"> Camerinos 1 o 2</label><br>
<label><input type="checkbox" id="cbox9" class="sumEq" value="14,28571429"> Camerinos 3+</label><br>
</div>
<div class="form-group">
<label for="equipamentoPunct">Puntuación Equipamento</label>
<input type="number" class="form-control" id="equipamentoPunct" name="equipamentoPunct" [(ngModel)]="venue.equipamentoPunct">
</div>
I founded a lot of info about how to do it with vanilla JS or jQuery, but I have a lot of problems on angular. Any ideas?
angular forms typescript
angular forms typescript
edited Nov 13 '18 at 16:51
Samuel J Mathew
3,53212228
asked Nov 13 '18 at 16:48
Joan Subirats LlaveriaJoan Subirats Llaveria
52
edited Nov 13 '18 at 16:51
Samuel J Mathew
3,53212228
asked Nov 13 '18 at 16:48
Joan Subirats LlaveriaJoan Subirats Llaveria
52
edited Nov 13 '18 at 16:51
Samuel J Mathew
3,53212228
edited Nov 13 '18 at 16:51
Samuel J Mathew
3,53212228
edited Nov 13 '18 at 16:51
Samuel J Mathew
3,53212228
3,53212228
asked Nov 13 '18 at 16:48
Joan Subirats LlaveriaJoan Subirats Llaveria
52
asked Nov 13 '18 at 16:48
Joan Subirats LlaveriaJoan Subirats Llaveria
52
asked Nov 13 '18 at 16:48
Joan Subirats LlaveriaJoan Subirats Llaveria
52
52
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
0
If I got this right, you could do it like this:
In the template you can bind a method call to the change event of the input.
<input type="checkbox" (change)="changeValue($event, 1)"> <span>1</span> <br/>
<input type="checkbox" (change)="changeValue($event, 1)"> <span>1</span> <br/>
While in the controller you can add/remove the value depending on wether the input is checked or not:
public totalValue = 0;
public changeValue(event, value) {
if (event.srcElement.checked) {
this.totalValue += value;
} else {
this.totalValue -= value;
}
}
You can use the totalValue however you want.
You can find a working example here
answered Nov 13 '18 at 17:20
toskvtoskv
18.4k53948
Thank you sir! It works perfect! ;)
– Joan Subirats Llaveria
Nov 15 '18 at 17:10
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53285806%2fadd-the-values-from-checkboxes-on-angular%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
If I got this right, you could do it like this:
In the template you can bind a method call to the change event of the input.
<input type="checkbox" (change)="changeValue($event, 1)"> <span>1</span> <br/>
<input type="checkbox" (change)="changeValue($event, 1)"> <span>1</span> <br/>
While in the controller you can add/remove the value depending on wether the input is checked or not:
public totalValue = 0;
public changeValue(event, value) {
if (event.srcElement.checked) {
this.totalValue += value;
} else {
this.totalValue -= value;
}
}
You can use the totalValue however you want.
You can find a working example here
answered Nov 13 '18 at 17:20
toskvtoskv
18.4k53948
Thank you sir! It works perfect! ;)
– Joan Subirats Llaveria
Nov 15 '18 at 17:10
add a comment |
0
If I got this right, you could do it like this:
In the template you can bind a method call to the change event of the input.
<input type="checkbox" (change)="changeValue($event, 1)"> <span>1</span> <br/>
<input type="checkbox" (change)="changeValue($event, 1)"> <span>1</span> <br/>
While in the controller you can add/remove the value depending on wether the input is checked or not:
public totalValue = 0;
public changeValue(event, value) {
if (event.srcElement.checked) {
this.totalValue += value;
} else {
this.totalValue -= value;
}
}
You can use the totalValue however you want.
You can find a working example here
answered Nov 13 '18 at 17:20
toskvtoskv
18.4k53948
Thank you sir! It works perfect! ;)
– Joan Subirats Llaveria
Nov 15 '18 at 17:10
add a comment |
0
0
0
If I got this right, you could do it like this:
In the template you can bind a method call to the change event of the input.
<input type="checkbox" (change)="changeValue($event, 1)"> <span>1</span> <br/>
<input type="checkbox" (change)="changeValue($event, 1)"> <span>1</span> <br/>
While in the controller you can add/remove the value depending on wether the input is checked or not:
public totalValue = 0;
public changeValue(event, value) {
if (event.srcElement.checked) {
this.totalValue += value;
} else {
this.totalValue -= value;
}
}
You can use the totalValue however you want.
You can find a working example here
answered Nov 13 '18 at 17:20
toskvtoskv
18.4k53948
If I got this right, you could do it like this:
In the template you can bind a method call to the change event of the input.
<input type="checkbox" (change)="changeValue($event, 1)"> <span>1</span> <br/>
<input type="checkbox" (change)="changeValue($event, 1)"> <span>1</span> <br/>
While in the controller you can add/remove the value depending on wether the input is checked or not:
public totalValue = 0;
public changeValue(event, value) {
if (event.srcElement.checked) {
this.totalValue += value;
} else {
this.totalValue -= value;
}
}
You can use the totalValue however you want.
You can find a working example here
answered Nov 13 '18 at 17:20
toskvtoskv
18.4k53948
answered Nov 13 '18 at 17:20
toskvtoskv
18.4k53948
answered Nov 13 '18 at 17:20
toskvtoskv
18.4k53948
answered Nov 13 '18 at 17:20
toskvtoskv
18.4k53948
18.4k53948
Thank you sir! It works perfect! ;)
– Joan Subirats Llaveria
Nov 15 '18 at 17:10
add a comment |
Thank you sir! It works perfect! ;)
– Joan Subirats Llaveria
Nov 15 '18 at 17:10
Thank you sir! It works perfect! ;)
– Joan Subirats Llaveria
Nov 15 '18 at 17:10
Thank you sir! It works perfect! ;)
– Joan Subirats Llaveria
Nov 15 '18 at 17:10
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53285806%2fadd-the-values-from-checkboxes-on-angular%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
