Mixing
Change input with string of multiple checkbox values
0
I need to be able to set the onclick function without onclick being in the input tag. The below code works great, but the input tags are generated and I cannot add the onclick event to them. Jquery solution is fine too.
function setValue(){
var val="";
var frm = document.getElementById("form1");
var cbs = document.getElementById("form1")['amenities'];
for(var n=0;n<cbs.length;n++){
if(cbs[n].checked){
val+=cbs[n].value+",";
}
}
var temp = val.split(",");
temp.pop();
frm.textname.value=temp
}
<form id="form1">
<input type="checkbox" name="amenities" value="coffee" onclick="setValue(this.value);">
<input type="checkbox" name="amenities" value="tea" onclick="setValue(this.value);">
<input type="checkbox" name="amenities" value="beer" onclick="setValue(this.value);">
<input type="checkbox" name="amenities" value="soda" onclick="setValue(this.value);">
<input type="checkbox" name="amenities" value="orangejuice" onclick="setValue(this.value);">
<input type="text" name="textname">
</form>javascript jquery checkbox input onclick
edited Nov 20 '18 at 23:12
azro
11.1k41538
asked Nov 20 '18 at 23:09
David BeanDavid Bean
31
add a comment |
0
I need to be able to set the onclick function without onclick being in the input tag. The below code works great, but the input tags are generated and I cannot add the onclick event to them. Jquery solution is fine too.
function setValue(){
var val="";
var frm = document.getElementById("form1");
var cbs = document.getElementById("form1")['amenities'];
for(var n=0;n<cbs.length;n++){
if(cbs[n].checked){
val+=cbs[n].value+",";
}
}
var temp = val.split(",");
temp.pop();
frm.textname.value=temp
}
<form id="form1">
<input type="checkbox" name="amenities" value="coffee" onclick="setValue(this.value);">
<input type="checkbox" name="amenities" value="tea" onclick="setValue(this.value);">
<input type="checkbox" name="amenities" value="beer" onclick="setValue(this.value);">
<input type="checkbox" name="amenities" value="soda" onclick="setValue(this.value);">
<input type="checkbox" name="amenities" value="orangejuice" onclick="setValue(this.value);">
<input type="text" name="textname">
</form>javascript jquery checkbox input onclick
edited Nov 20 '18 at 23:12
azro
11.1k41538
asked Nov 20 '18 at 23:09
David BeanDavid Bean
31
1
Possible duplicate of add event listener on elements created dynamically
– zfrisch
Nov 20 '18 at 23:15
add a comment |
0
0
0
I need to be able to set the onclick function without onclick being in the input tag. The below code works great, but the input tags are generated and I cannot add the onclick event to them. Jquery solution is fine too.
function setValue(){
var val="";
var frm = document.getElementById("form1");
var cbs = document.getElementById("form1")['amenities'];
for(var n=0;n<cbs.length;n++){
if(cbs[n].checked){
val+=cbs[n].value+",";
}
}
var temp = val.split(",");
temp.pop();
frm.textname.value=temp
}
<form id="form1">
<input type="checkbox" name="amenities" value="coffee" onclick="setValue(this.value);">
<input type="checkbox" name="amenities" value="tea" onclick="setValue(this.value);">
<input type="checkbox" name="amenities" value="beer" onclick="setValue(this.value);">
<input type="checkbox" name="amenities" value="soda" onclick="setValue(this.value);">
<input type="checkbox" name="amenities" value="orangejuice" onclick="setValue(this.value);">
<input type="text" name="textname">
</form>javascript jquery checkbox input onclick
edited Nov 20 '18 at 23:12
azro
11.1k41538
asked Nov 20 '18 at 23:09
David BeanDavid Bean
31
I need to be able to set the onclick function without onclick being in the input tag. The below code works great, but the input tags are generated and I cannot add the onclick event to them. Jquery solution is fine too.
function setValue(){
var val="";
var frm = document.getElementById("form1");
var cbs = document.getElementById("form1")['amenities'];
for(var n=0;n<cbs.length;n++){
if(cbs[n].checked){
val+=cbs[n].value+",";
}
}
var temp = val.split(",");
temp.pop();
frm.textname.value=temp
}
<form id="form1">
<input type="checkbox" name="amenities" value="coffee" onclick="setValue(this.value);">
<input type="checkbox" name="amenities" value="tea" onclick="setValue(this.value);">
<input type="checkbox" name="amenities" value="beer" onclick="setValue(this.value);">
<input type="checkbox" name="amenities" value="soda" onclick="setValue(this.value);">
<input type="checkbox" name="amenities" value="orangejuice" onclick="setValue(this.value);">
<input type="text" name="textname">
</form>function setValue(){
var val="";
var frm = document.getElementById("form1");
var cbs = document.getElementById("form1")['amenities'];
for(var n=0;n<cbs.length;n++){
if(cbs[n].checked){
val+=cbs[n].value+",";
}
}
var temp = val.split(",");
temp.pop();
frm.textname.value=temp
}
<form id="form1">
<input type="checkbox" name="amenities" value="coffee" onclick="setValue(this.value);">
<input type="checkbox" name="amenities" value="tea" onclick="setValue(this.value);">
<input type="checkbox" name="amenities" value="beer" onclick="setValue(this.value);">
<input type="checkbox" name="amenities" value="soda" onclick="setValue(this.value);">
<input type="checkbox" name="amenities" value="orangejuice" onclick="setValue(this.value);">
<input type="text" name="textname">
</form>function setValue(){
var val="";
var frm = document.getElementById("form1");
var cbs = document.getElementById("form1")['amenities'];
for(var n=0;n<cbs.length;n++){
if(cbs[n].checked){
val+=cbs[n].value+",";
}
}
var temp = val.split(",");
temp.pop();
frm.textname.value=temp
}
<form id="form1">
<input type="checkbox" name="amenities" value="coffee" onclick="setValue(this.value);">
<input type="checkbox" name="amenities" value="tea" onclick="setValue(this.value);">
<input type="checkbox" name="amenities" value="beer" onclick="setValue(this.value);">
<input type="checkbox" name="amenities" value="soda" onclick="setValue(this.value);">
<input type="checkbox" name="amenities" value="orangejuice" onclick="setValue(this.value);">
<input type="text" name="textname">
</form>javascript jquery checkbox input onclick
javascript jquery checkbox input onclick
edited Nov 20 '18 at 23:12
azro
11.1k41538
asked Nov 20 '18 at 23:09
David BeanDavid Bean
31
edited Nov 20 '18 at 23:12
azro
11.1k41538
asked Nov 20 '18 at 23:09
David BeanDavid Bean
31
edited Nov 20 '18 at 23:12
azro
11.1k41538
edited Nov 20 '18 at 23:12
azro
11.1k41538
edited Nov 20 '18 at 23:12
azro
11.1k41538
11.1k41538
asked Nov 20 '18 at 23:09
David BeanDavid Bean
31
asked Nov 20 '18 at 23:09
David BeanDavid Bean
31
asked Nov 20 '18 at 23:09
David BeanDavid Bean
31
31
1
Possible duplicate of add event listener on elements created dynamically
– zfrisch
Nov 20 '18 at 23:15
add a comment |
1
Possible duplicate of add event listener on elements created dynamically
– zfrisch
Nov 20 '18 at 23:15
1
1
Possible duplicate of add event listener on elements created dynamically
– zfrisch
Nov 20 '18 at 23:15
Possible duplicate of add event listener on elements created dynamically
– zfrisch
Nov 20 '18 at 23:15
add a comment |
4 Answers
4
active
oldest
votes
0
Use the .map() function
$(".checkbox").change(function() {
$("#text").val( $('.checkbox:checked').map(function() { return this.value; }).get().join(','));
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1">
<input type="checkbox" class="checkbox" name="amenities" value="coffee" >
<input type="checkbox" class="checkbox" name="amenities" value="tea" >
<input type="checkbox" class="checkbox" name="amenities" value="beer" >
<input type="checkbox" class="checkbox" name="amenities" value="soda">
<input type="checkbox" class="checkbox" name="amenities" value="orangejuice" >
<input type="text" name="textname" id= "text">
</form>answered Nov 21 '18 at 4:04
Sooriya DasanayakeSooriya Dasanayake
9121411
Thank you so much, I struggled with this for most of a day. Your code above didn't exactly do what I needed it to do, but it put me on the right track.
– David Bean
Nov 26 '18 at 15:45
add a comment |
0
//attach a change handler to the form.
//the change event bubbles up to the parent
var $form = $('#form1').on('change', function(){
//set the value of the textname
$form.find('[name="textname"]').val(
//get all the checked checkbox and map all their values to an array
$form.find(':checkbox:checked').map(function(){
//return the value for each checked element
return this.value;
}).get() //use get() to get a basic array, not a jQuery object
);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1">
<input type="checkbox" name="amenities" value="coffee">
<input type="checkbox" name="amenities" value="tea">
<input type="checkbox" name="amenities" value="beer">
<input type="checkbox" name="amenities" value="soda">
<input type="checkbox" name="amenities" value="orangejuice">
<input type="text" name="textname">
</form>answered Nov 20 '18 at 23:21
TaplarTaplar
16k21529
add a comment |
-1
you can try this:
$('input[type=checkbox]').change(function() {
//logic goes here
});
answered Nov 20 '18 at 23:19
Poonam HirparaPoonam Hirpara
3115
add a comment |
-1
Plain JS:
var mForm = document.getElementById("form1");
mForm.addEventListener("click", function(event){
console.log("clicked", event.toElement); // do whatever you want with this element, add condition to sort checkboxes only
});
UPDATED:
var frm = document.getElementById("form1");
var cbs = document.getElementById("form1")['amenities'];
function setValue(frm, cbs){
var output = ;
for( var n in cbs){
if(cbs[n].checked){
output.push(cbs[n].value);
}
}
frm.textname.value=output.join();
}
frm.addEventListener("click", function(event){
if (event.toElement.type == "checkbox") {
setValue(frm, cbs);
}
});
answered Nov 20 '18 at 23:25
Denis KovzelyukDenis Kovzelyuk
716
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%2f53402986%2fchange-input-with-string-of-multiple-checkbox-values%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
4 Answers
4
active
oldest
votes
4 Answers
4
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
Use the .map() function
$(".checkbox").change(function() {
$("#text").val( $('.checkbox:checked').map(function() { return this.value; }).get().join(','));
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1">
<input type="checkbox" class="checkbox" name="amenities" value="coffee" >
<input type="checkbox" class="checkbox" name="amenities" value="tea" >
<input type="checkbox" class="checkbox" name="amenities" value="beer" >
<input type="checkbox" class="checkbox" name="amenities" value="soda">
<input type="checkbox" class="checkbox" name="amenities" value="orangejuice" >
<input type="text" name="textname" id= "text">
</form>answered Nov 21 '18 at 4:04
Sooriya DasanayakeSooriya Dasanayake
9121411
Thank you so much, I struggled with this for most of a day. Your code above didn't exactly do what I needed it to do, but it put me on the right track.
– David Bean
Nov 26 '18 at 15:45
add a comment |
0
Use the .map() function
$(".checkbox").change(function() {
$("#text").val( $('.checkbox:checked').map(function() { return this.value; }).get().join(','));
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1">
<input type="checkbox" class="checkbox" name="amenities" value="coffee" >
<input type="checkbox" class="checkbox" name="amenities" value="tea" >
<input type="checkbox" class="checkbox" name="amenities" value="beer" >
<input type="checkbox" class="checkbox" name="amenities" value="soda">
<input type="checkbox" class="checkbox" name="amenities" value="orangejuice" >
<input type="text" name="textname" id= "text">
</form>answered Nov 21 '18 at 4:04
Sooriya DasanayakeSooriya Dasanayake
9121411
Thank you so much, I struggled with this for most of a day. Your code above didn't exactly do what I needed it to do, but it put me on the right track.
– David Bean
Nov 26 '18 at 15:45
add a comment |
0
0
0
Use the .map() function
$(".checkbox").change(function() {
$("#text").val( $('.checkbox:checked').map(function() { return this.value; }).get().join(','));
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1">
<input type="checkbox" class="checkbox" name="amenities" value="coffee" >
<input type="checkbox" class="checkbox" name="amenities" value="tea" >
<input type="checkbox" class="checkbox" name="amenities" value="beer" >
<input type="checkbox" class="checkbox" name="amenities" value="soda">
<input type="checkbox" class="checkbox" name="amenities" value="orangejuice" >
<input type="text" name="textname" id= "text">
</form>answered Nov 21 '18 at 4:04
Sooriya DasanayakeSooriya Dasanayake
9121411
Use the .map() function
$(".checkbox").change(function() {
$("#text").val( $('.checkbox:checked').map(function() { return this.value; }).get().join(','));
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1">
<input type="checkbox" class="checkbox" name="amenities" value="coffee" >
<input type="checkbox" class="checkbox" name="amenities" value="tea" >
<input type="checkbox" class="checkbox" name="amenities" value="beer" >
<input type="checkbox" class="checkbox" name="amenities" value="soda">
<input type="checkbox" class="checkbox" name="amenities" value="orangejuice" >
<input type="text" name="textname" id= "text">
</form>$(".checkbox").change(function() {
$("#text").val( $('.checkbox:checked').map(function() { return this.value; }).get().join(','));
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1">
<input type="checkbox" class="checkbox" name="amenities" value="coffee" >
<input type="checkbox" class="checkbox" name="amenities" value="tea" >
<input type="checkbox" class="checkbox" name="amenities" value="beer" >
<input type="checkbox" class="checkbox" name="amenities" value="soda">
<input type="checkbox" class="checkbox" name="amenities" value="orangejuice" >
<input type="text" name="textname" id= "text">
</form>$(".checkbox").change(function() {
$("#text").val( $('.checkbox:checked').map(function() { return this.value; }).get().join(','));
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1">
<input type="checkbox" class="checkbox" name="amenities" value="coffee" >
<input type="checkbox" class="checkbox" name="amenities" value="tea" >
<input type="checkbox" class="checkbox" name="amenities" value="beer" >
<input type="checkbox" class="checkbox" name="amenities" value="soda">
<input type="checkbox" class="checkbox" name="amenities" value="orangejuice" >
<input type="text" name="textname" id= "text">
</form>answered Nov 21 '18 at 4:04
Sooriya DasanayakeSooriya Dasanayake
9121411
answered Nov 21 '18 at 4:04
Sooriya DasanayakeSooriya Dasanayake
9121411
answered Nov 21 '18 at 4:04
Sooriya DasanayakeSooriya Dasanayake
9121411
answered Nov 21 '18 at 4:04
Sooriya DasanayakeSooriya Dasanayake
9121411
9121411
Thank you so much, I struggled with this for most of a day. Your code above didn't exactly do what I needed it to do, but it put me on the right track.
– David Bean
Nov 26 '18 at 15:45
add a comment |
Thank you so much, I struggled with this for most of a day. Your code above didn't exactly do what I needed it to do, but it put me on the right track.
– David Bean
Nov 26 '18 at 15:45
Thank you so much, I struggled with this for most of a day. Your code above didn't exactly do what I needed it to do, but it put me on the right track.
– David Bean
Nov 26 '18 at 15:45
Thank you so much, I struggled with this for most of a day. Your code above didn't exactly do what I needed it to do, but it put me on the right track.
– David Bean
Nov 26 '18 at 15:45
add a comment |
0
//attach a change handler to the form.
//the change event bubbles up to the parent
var $form = $('#form1').on('change', function(){
//set the value of the textname
$form.find('[name="textname"]').val(
//get all the checked checkbox and map all their values to an array
$form.find(':checkbox:checked').map(function(){
//return the value for each checked element
return this.value;
}).get() //use get() to get a basic array, not a jQuery object
);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1">
<input type="checkbox" name="amenities" value="coffee">
<input type="checkbox" name="amenities" value="tea">
<input type="checkbox" name="amenities" value="beer">
<input type="checkbox" name="amenities" value="soda">
<input type="checkbox" name="amenities" value="orangejuice">
<input type="text" name="textname">
</form>answered Nov 20 '18 at 23:21
TaplarTaplar
16k21529
add a comment |
0
//attach a change handler to the form.
//the change event bubbles up to the parent
var $form = $('#form1').on('change', function(){
//set the value of the textname
$form.find('[name="textname"]').val(
//get all the checked checkbox and map all their values to an array
$form.find(':checkbox:checked').map(function(){
//return the value for each checked element
return this.value;
}).get() //use get() to get a basic array, not a jQuery object
);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1">
<input type="checkbox" name="amenities" value="coffee">
<input type="checkbox" name="amenities" value="tea">
<input type="checkbox" name="amenities" value="beer">
<input type="checkbox" name="amenities" value="soda">
<input type="checkbox" name="amenities" value="orangejuice">
<input type="text" name="textname">
</form>answered Nov 20 '18 at 23:21
TaplarTaplar
16k21529
add a comment |
0
0
0
//attach a change handler to the form.
//the change event bubbles up to the parent
var $form = $('#form1').on('change', function(){
//set the value of the textname
$form.find('[name="textname"]').val(
//get all the checked checkbox and map all their values to an array
$form.find(':checkbox:checked').map(function(){
//return the value for each checked element
return this.value;
}).get() //use get() to get a basic array, not a jQuery object
);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1">
<input type="checkbox" name="amenities" value="coffee">
<input type="checkbox" name="amenities" value="tea">
<input type="checkbox" name="amenities" value="beer">
<input type="checkbox" name="amenities" value="soda">
<input type="checkbox" name="amenities" value="orangejuice">
<input type="text" name="textname">
</form>answered Nov 20 '18 at 23:21
TaplarTaplar
16k21529
//attach a change handler to the form.
//the change event bubbles up to the parent
var $form = $('#form1').on('change', function(){
//set the value of the textname
$form.find('[name="textname"]').val(
//get all the checked checkbox and map all their values to an array
$form.find(':checkbox:checked').map(function(){
//return the value for each checked element
return this.value;
}).get() //use get() to get a basic array, not a jQuery object
);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1">
<input type="checkbox" name="amenities" value="coffee">
<input type="checkbox" name="amenities" value="tea">
<input type="checkbox" name="amenities" value="beer">
<input type="checkbox" name="amenities" value="soda">
<input type="checkbox" name="amenities" value="orangejuice">
<input type="text" name="textname">
</form> //attach a change handler to the form.
//the change event bubbles up to the parent
var $form = $('#form1').on('change', function(){
//set the value of the textname
$form.find('[name="textname"]').val(
//get all the checked checkbox and map all their values to an array
$form.find(':checkbox:checked').map(function(){
//return the value for each checked element
return this.value;
}).get() //use get() to get a basic array, not a jQuery object
);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1">
<input type="checkbox" name="amenities" value="coffee">
<input type="checkbox" name="amenities" value="tea">
<input type="checkbox" name="amenities" value="beer">
<input type="checkbox" name="amenities" value="soda">
<input type="checkbox" name="amenities" value="orangejuice">
<input type="text" name="textname">
</form> //attach a change handler to the form.
//the change event bubbles up to the parent
var $form = $('#form1').on('change', function(){
//set the value of the textname
$form.find('[name="textname"]').val(
//get all the checked checkbox and map all their values to an array
$form.find(':checkbox:checked').map(function(){
//return the value for each checked element
return this.value;
}).get() //use get() to get a basic array, not a jQuery object
);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1">
<input type="checkbox" name="amenities" value="coffee">
<input type="checkbox" name="amenities" value="tea">
<input type="checkbox" name="amenities" value="beer">
<input type="checkbox" name="amenities" value="soda">
<input type="checkbox" name="amenities" value="orangejuice">
<input type="text" name="textname">
</form>answered Nov 20 '18 at 23:21
TaplarTaplar
16k21529
answered Nov 20 '18 at 23:21
TaplarTaplar
16k21529
answered Nov 20 '18 at 23:21
TaplarTaplar
16k21529
answered Nov 20 '18 at 23:21
TaplarTaplar
16k21529
16k21529
add a comment |
add a comment |
-1
you can try this:
$('input[type=checkbox]').change(function() {
//logic goes here
});
answered Nov 20 '18 at 23:19
Poonam HirparaPoonam Hirpara
3115
add a comment |
-1
you can try this:
$('input[type=checkbox]').change(function() {
//logic goes here
});
answered Nov 20 '18 at 23:19
Poonam HirparaPoonam Hirpara
3115
add a comment |
-1
-1
-1
you can try this:
$('input[type=checkbox]').change(function() {
//logic goes here
});
answered Nov 20 '18 at 23:19
Poonam HirparaPoonam Hirpara
3115
you can try this:
$('input[type=checkbox]').change(function() {
//logic goes here
});
answered Nov 20 '18 at 23:19
Poonam HirparaPoonam Hirpara
3115
answered Nov 20 '18 at 23:19
Poonam HirparaPoonam Hirpara
3115
answered Nov 20 '18 at 23:19
Poonam HirparaPoonam Hirpara
3115
answered Nov 20 '18 at 23:19
Poonam HirparaPoonam Hirpara
3115
3115
add a comment |
add a comment |
-1
Plain JS:
var mForm = document.getElementById("form1");
mForm.addEventListener("click", function(event){
console.log("clicked", event.toElement); // do whatever you want with this element, add condition to sort checkboxes only
});
UPDATED:
var frm = document.getElementById("form1");
var cbs = document.getElementById("form1")['amenities'];
function setValue(frm, cbs){
var output = ;
for( var n in cbs){
if(cbs[n].checked){
output.push(cbs[n].value);
}
}
frm.textname.value=output.join();
}
frm.addEventListener("click", function(event){
if (event.toElement.type == "checkbox") {
setValue(frm, cbs);
}
});
answered Nov 20 '18 at 23:25
Denis KovzelyukDenis Kovzelyuk
716
add a comment |
-1
Plain JS:
var mForm = document.getElementById("form1");
mForm.addEventListener("click", function(event){
console.log("clicked", event.toElement); // do whatever you want with this element, add condition to sort checkboxes only
});
UPDATED:
var frm = document.getElementById("form1");
var cbs = document.getElementById("form1")['amenities'];
function setValue(frm, cbs){
var output = ;
for( var n in cbs){
if(cbs[n].checked){
output.push(cbs[n].value);
}
}
frm.textname.value=output.join();
}
frm.addEventListener("click", function(event){
if (event.toElement.type == "checkbox") {
setValue(frm, cbs);
}
});
answered Nov 20 '18 at 23:25
Denis KovzelyukDenis Kovzelyuk
716
add a comment |
-1
-1
-1
Plain JS:
var mForm = document.getElementById("form1");
mForm.addEventListener("click", function(event){
console.log("clicked", event.toElement); // do whatever you want with this element, add condition to sort checkboxes only
});
UPDATED:
var frm = document.getElementById("form1");
var cbs = document.getElementById("form1")['amenities'];
function setValue(frm, cbs){
var output = ;
for( var n in cbs){
if(cbs[n].checked){
output.push(cbs[n].value);
}
}
frm.textname.value=output.join();
}
frm.addEventListener("click", function(event){
if (event.toElement.type == "checkbox") {
setValue(frm, cbs);
}
});
answered Nov 20 '18 at 23:25
Denis KovzelyukDenis Kovzelyuk
716
Plain JS:
var mForm = document.getElementById("form1");
mForm.addEventListener("click", function(event){
console.log("clicked", event.toElement); // do whatever you want with this element, add condition to sort checkboxes only
});
UPDATED:
var frm = document.getElementById("form1");
var cbs = document.getElementById("form1")['amenities'];
function setValue(frm, cbs){
var output = ;
for( var n in cbs){
if(cbs[n].checked){
output.push(cbs[n].value);
}
}
frm.textname.value=output.join();
}
frm.addEventListener("click", function(event){
if (event.toElement.type == "checkbox") {
setValue(frm, cbs);
}
});
answered Nov 20 '18 at 23:25
Denis KovzelyukDenis Kovzelyuk
716
edited Nov 21 '18 at 0:06
answered Nov 20 '18 at 23:25
Denis KovzelyukDenis Kovzelyuk
716
answered Nov 20 '18 at 23:25
Denis KovzelyukDenis Kovzelyuk
716
answered Nov 20 '18 at 23:25
Denis KovzelyukDenis Kovzelyuk
716
716
add a comment |
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%2f53402986%2fchange-input-with-string-of-multiple-checkbox-values%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
1
Possible duplicate of add event listener on elements created dynamically
– zfrisch
Nov 20 '18 at 23:15