0

I have checkbox function but I have problem in getting the value of the checkbox after clicking the submit button. I have done the function and seems like I can't figure out on how to fix this problem. 

let fruit_temp = [];
$(document).ready(function() {
  $('input[name="fruitGroup"]').change(function() {
    fruit_temp = [];
    $('input[name="fruitGroup"]:checked').each(function() {
      fruit_temp.push($(this).val());
    });
  });

});

const getFruitType = () => {
  axios.get(`${url}FruitList`)
    .then(function(response) {
      if (response.data.status == 'success') {
        response.data.result.map((e) => {
          $('#fruitlist').append(`<li><label class="checkbox"><input type="checkbox" name="fruitGroup" value="${e.id}" > ${e.name}</label></li>`);
        });
      }
    });

}

const submit = () => {
  let formData = new FormData();
  //more formData
  formData.append('Fruit', fruit_temp);

  for (var pair of formData.entries()) {
    console.log(pair[0] + ', ' + pair[1]);
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="col-lg-12 mb-30">
  <label><b>Choose Multiple Fruit</b></label><br>
  <div class="form-group">
    <ul id="fruitlist"></ul>
  </div>
</div>

<button onclick="submit()">Submit</button>
nonutt
  • 155
  • 1
  • 10
  • When I run your code it works just fine, did you check you console for erros – Carsten Løvbo Andersen Sep 07 '21 at 11:22
  • Where and when is the `getFruitType ()` function called? – Rüzgar Sep 07 '21 at 11:34
  • @Rüzgar I agree that information is missing, but I don't believe that would be the issue, because then the OP could not select any elements. – Carsten Løvbo Andersen Sep 07 '21 at 11:38
  • Yes I get it. I am trying to understand what the real problem is, do you want to get the checked values of the checkboxes created by `getFruitType ()` function? Am I getting it right? – Rüzgar Sep 07 '21 at 11:42
  • @Rüzgar No, OP clearly states that when he press submit button then I can't see what checkbox has been check or not. He saves the value of the checked checkbox here `fruit_temp ` – Carsten Løvbo Andersen Sep 07 '21 at 11:45
  • 2
    Have you tried `$(document).on('change', 'input[name="fruitGroup"]', function() {` inside `$(document).ready(function() {`? Because the inputs are dynamically created, you need the pass the event listener to document. – Rüzgar Sep 07 '21 at 11:47
  • @Rüzgar I already put it inside the `$(document).ready(function() {` did I put it wrongly? – nonutt Sep 07 '21 at 14:04
  • @Rüzgar I wish u put it as answer so I can upvote this. fixed my mistake. thank you, if you don't mind whats the different between `$(document).on('change', 'input[name="fruitGroup"]', function() ` and `$('input[name="fruitGroup"]').change(function() {` ? – nonutt Sep 07 '21 at 14:13
  • 2
    Selectors and event handlers specified at page load will only match elements which exist at page load. You are adding new elements *after* page load, and your event listeners will not match them - jQuery doesn't know about those new elements. You need to delegate your handlers to an element that exists at load, and filter to match only your target elements. – Don't Panic Sep 07 '21 at 14:29
  • Thanks @mailme. No need to upvote. You can get detailed information from [this link](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) Glad it helped. – Rüzgar Sep 08 '21 at 07:23

0 Answers0