• Page:
  • 1

Set max limit for selecting checkbox and append value in form

ONLINE

Set max limit for selecting checkbox and append value in form

3 months, 1 week ago
Hi All,

Recently, I got a work where I need to select checkbox max up to five and send there values in email.

// Input field for checkbox in your form  
<input class="single-checkbox" type="checkbox" name="select_check_box" value="dynamic_values" >

<script type="text/javascript">
  jQuery(document).ready(function(){
    var limit = 5;  //set max limit of checkbox
    var product = new Array();
      jQuery('input.single-checkbox').on('change', function(evt) {
        var temp = jQuery(this).val();
        var checkbox_action = jQuery(this).prop('checked');  //check checkbox selected or not(return true/false)  
          if(!checkbox_action){
            delete product[temp];   //pop last unchecked element from an array
          }

        if(jQuery('input.single-checkbox:checked').length > limit) {
          jQuery(this).prop('checked',false);
          this.checked = false;
        }else if(checkbox_action){
          product[temp] = temp;  //push checked element in an array
        }
        //set input field to append it in your form
        if(!jQuery('#product_selected_values').length){
          jQuery('<input>').attr({
          type: 'hidden',
          id: 'product_selected_values',
          name: 'product_selected_values'
          }).appendTo('#formid');
        }
        setProductValues(product);
      });

    })
    // set comma separated values in an input field
    function setProductValues(product){
    var temp = Object.values(product);  //get only values from an object
    console.log(typeof temp);
    jQuery('#product_selected_values').val(temp.join(","));
  }

</script>
Last Edit: 3 months, 1 week ago by Ashwin Verma.
The following user(s) said Thank You: Vicky Jain, Rajat Pal, Devendra Sharma, Ulka Wawoo, Maseeha Khan, Ramratan Singh
  • Page:
  • 1

Upcoming Events

Who's Online