Change input with string of multiple checkbox values

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>

edited Nov 20 at 23:12

azro

10.4k41438

asked Nov 20 at 23:09

David Bean

1

Possible duplicate of add event listener on elements created dynamically
– zfrisch
Nov 20 at 23:15

add a comment |

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>

edited Nov 20 at 23:12

azro

10.4k41438

asked Nov 20 at 23:09

David Bean

1

Possible duplicate of add event listener on elements created dynamically
– zfrisch
Nov 20 at 23:15

add a comment |

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>

edited Nov 20 at 23:12

azro

10.4k41438

asked Nov 20 at 23:09

David Bean

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

edited Nov 20 at 23:12

azro

10.4k41438

asked Nov 20 at 23:09

David Bean

edited Nov 20 at 23:12

azro

10.4k41438

asked Nov 20 at 23:09

David Bean

edited Nov 20 at 23:12

azro

10.4k41438

edited Nov 20 at 23:12

azro

10.4k41438

edited Nov 20 at 23:12

azro

10.4k41438

asked Nov 20 at 23:09

David Bean

asked Nov 20 at 23:09

David Bean

asked Nov 20 at 23:09

David Bean

1

Possible duplicate of add event listener on elements created dynamically
– zfrisch
Nov 20 at 23:15

add a comment |

1

Possible duplicate of add event listener on elements created dynamically
– zfrisch
Nov 20 at 23:15

Possible duplicate of add event listener on elements created dynamically
– zfrisch
Nov 20 at 23:15

add a comment |

4 Answers
4

active

oldest

votes

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 at 4:04

Sooriya Dasanayake

8551410

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 at 15:45

add a comment |

            //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 at 23:21

Taplar

15.3k21529

add a comment |

-1

you can try this:

$('input[type=checkbox]').change(function() {

    //logic goes here

});

answered Nov 20 at 23:19

Poonam 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);

    }

});

edited Nov 21 at 0:06

answered Nov 20 at 23:25

Denis Kovzelyuk

696

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');
});

Post as a guest

Name

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

Name

Required, but never shown

4 Answers
4

active

oldest

votes

4 Answers
4

active

oldest

votes

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 at 4:04

Sooriya Dasanayake

8551410

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 at 15:45

add a comment |

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 at 4:04

Sooriya Dasanayake

8551410

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 at 15:45

add a comment |

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 at 4:04

Sooriya Dasanayake

8551410

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 at 4:04

Sooriya Dasanayake

8551410

answered Nov 21 at 4:04

Sooriya Dasanayake

8551410

answered Nov 21 at 4:04

Sooriya Dasanayake

8551410

answered Nov 21 at 4:04

Sooriya Dasanayake

8551410

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 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 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 at 15:45

add a comment |

            //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 at 23:21

Taplar

15.3k21529

add a comment |

            //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 at 23:21

Taplar

15.3k21529

add a comment |

            //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 at 23:21

Taplar

15.3k21529

            //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 at 23:21

Taplar

15.3k21529

answered Nov 20 at 23:21

Taplar

15.3k21529

answered Nov 20 at 23:21

Taplar

15.3k21529

answered Nov 20 at 23:21

Taplar

15.3k21529

add a comment |

-1

you can try this:

$('input[type=checkbox]').change(function() {

    //logic goes here

});

answered Nov 20 at 23:19

Poonam Hirpara

3115

add a comment |

-1

you can try this:

$('input[type=checkbox]').change(function() {

    //logic goes here

});

answered Nov 20 at 23:19

Poonam Hirpara

3115

add a comment |

-1

you can try this:

$('input[type=checkbox]').change(function() {

    //logic goes here

});

answered Nov 20 at 23:19

Poonam Hirpara

3115

you can try this:

$('input[type=checkbox]').change(function() {

    //logic goes here

});

answered Nov 20 at 23:19

Poonam Hirpara

3115

answered Nov 20 at 23:19

Poonam Hirpara

3115

answered Nov 20 at 23:19

Poonam Hirpara

3115

answered Nov 20 at 23:19

Poonam 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);

    }

});

edited Nov 21 at 0:06

answered Nov 20 at 23:25

Denis Kovzelyuk

696

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);

    }

});

edited Nov 21 at 0:06

answered Nov 20 at 23:25

Denis Kovzelyuk

696

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);

    }

});

edited Nov 21 at 0:06

answered Nov 20 at 23:25

Denis Kovzelyuk

696

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);

    }

});

edited Nov 21 at 0:06

answered Nov 20 at 23:25

Denis Kovzelyuk

696

edited Nov 21 at 0:06

answered Nov 20 at 23:25

Denis Kovzelyuk

696

answered Nov 20 at 23:25

Denis Kovzelyuk

696

answered Nov 20 at 23:25

Denis Kovzelyuk

696

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.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

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');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Tukukkk