pkm pkm - 2 months ago 7
jQuery Question

Ajax request not starting

I have below html part

<div style="display:inline-block" class="seeker">
<style>h2 {color: white;}</style>
<form action="">
<input type="checkbox" class="seek" id=CLOUD name="CLOUD" value="CLOUD" >CLOUD &emsp;
<input type="checkbox" class="seek" id=TESTING name="TESTING" value="TESTING" >TESTING &emsp;
</form>
</div>


and this as part of script

<script>
$('.seek').click(function(){
alert("test");
/*var value = document.getElementById(id).value;
var endpoint = '/xyz/pqr/'
var url = endpoint.concate(value)
$.get(url, function(data){
$("#testDIV").html(response);
});*/
});


But on checking the checkbox the ajax call is not triggered any issue with code?

Answer

$('.seek').on('change', function() {
   var checkedValues = $('.seek:checked').map(function(){
     return $(this).val();
   }).get();
   console.log("Changed: ", this.value, "to", this.checked)
   console.log(checkedValues);  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="display:inline-block" class="seeker">
    <style>h2   {color: white;}</style>
        <form action="">
        <input type="checkbox" class="seek" id=CLOUD name="CLOUD" value="CLOUD"  >CLOUD &emsp;
        <input type="checkbox" class="seek" id=TESTING name="TESTING" value="TESTING"  >TESTING &emsp;
    </form>
</div>

You should use the change event, not click for checkboxes:

$('.seek').on('change', function(event) {
     event.preventDefault();
     alert("test");
});