Error while Passing multiple checkbox value to a function in JavaScript

Question

P.S- There are other similar questions, but their methods show an error message

I have a form with multiple checkbox values. A user may select one or more than one options.

<input type="radio" id="DecisionA" class="DecisionType" name="DecisionType" value="d1">
<input type="radio" id="DecisionB" class="DecisionType" name="DecisionType" value="d2">


 <input class="form-check-input DecisionComments" type="checkbox" name="decisionComments[]" value="1">
<label class="form-check-label" for="flexCheckDefault">Decision 1</label>

 <input class="form-check-input DecisionComments" type="checkbox" name="decisionComments[]" value="2">
<label class="form-check-label" for="flexCheckDefault">Decision 2</label>

 <input class="form-check-input DecisionComments" type="checkbox" name="decisionComments[]" value="3">
<label class="form-check-label" for="flexCheckDefault">Decision 3</label>

 <input class="form-check-input DecisionComments" type="checkbox" name="decisionComments[]" value="4">
<label class="form-check-label" for="flexCheckDefault">Decision 4</label>

 <input class="form-check-input DecisionComments" type="checkbox" name="decisionComments[]" value="other">
<label class="form-check-label" for="flexCheckDefault">Other Reasons</label>

<button class="submitDecision">Submit</button>

In JavaScript, I tried to send all the data onto another function as mentioned here.

$('.submitDecision').click(function(){

    var decisionCheckboxes = new Array();

    console.log(decisionCheckboxes);
        
    
         var  data = {};
 data['DecisionType'] =$('input:radio[name=DecisionType]:checked').val();
         
        $("input:checked").each(function() {
 
                 decisionCheckboxes.push($(this).val()); 
          });
          data['decisionComments']=decisionCheckboxes;
          
         
            console.log(data);
           saveDecision(data); -------------> saveDecision is the function
        
       }
  });

In the console, I am getting this, EVEN IF NO OPTION IS SELECTED

DecisionType:"3"
decisionComments: (9) ["1", "2", "3","4" ,"other", "on", "on", "on", "on", "on"]

Please tell me the problem

Bhautik · Accepted Answer · 2021-03-25T07:10:05.463

First, you are pushing all input rather than the only the checkbox. check below code.

$('.submitDecision').click(function(){
    var decisionCheckboxes = [];
    var  data = {};
    data['DecisionType'] =$('input:radio[name=DecisionType]:checked').val();     
    $("input.form-check-input:checked").each(function() { 
        if( $(this).val() == 'other' ){
           console.log('conditions for other value');
        }
        decisionCheckboxes.push($(this).val()); 
    });
    data['decisionComments']=decisionCheckboxes;     
    console.log(data);       
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" id="DecisionA" class="DecisionType" name="DecisionType" value="d1">
<input type="radio" id="DecisionB" class="DecisionType" name="DecisionType" value="d2">


 <input class="form-check-input DecisionComments" type="checkbox" name="decisionComments[]" value="1">
<label class="form-check-label" for="flexCheckDefault">Decision 1</label>

 <input class="form-check-input DecisionComments" type="checkbox" name="decisionComments[]" value="2">
<label class="form-check-label" for="flexCheckDefault">Decision 2</label>

 <input class="form-check-input DecisionComments" type="checkbox" name="decisionComments[]" value="3">
<label class="form-check-label" for="flexCheckDefault">Decision 3</label>

 <input class="form-check-input DecisionComments" type="checkbox" name="decisionComments[]" value="4">
<label class="form-check-label" for="flexCheckDefault">Decision 4</label>

 <input class="form-check-input DecisionComments" type="checkbox" name="decisionComments[]" value="other">
<label class="form-check-label" for="flexCheckDefault">Other Reasons</label>

<button class="submitDecision">Submit</button>

Yep. Although, I had figured it out, thanks anyways, By the way, is there any way to know if :"other" is selected as a decision in that script? — Asish, Mar 25 '21 at 07:03

Error while Passing multiple checkbox value to a function in JavaScript

1 Answers1