當複選框是票時發送POST - 無需提交按鈕

Question

我想在不提交按鈕的情況下發送POST數據，當勾選其中一個複選框時 - 使用AJAX。

我有這樣的代碼，但我認爲，當我勾選複選框時，我應該得到一個發佈數據的警報（要知道，它的工作），但我沒有得到任何反應。我已經添加的jQuery所以這是某種形式的代碼功能錯誤..

<form method="post" name="form1"> 
    <input type="checkbox" name="checkboxList[]" value="1">value1</input> 
    <input type="checkbox" name="checkboxList[]" value="2">value2</input> 
    <input type="checkbox" name="checkboxList[]" value="3">value3</input> 
</form> 

<script> 

jQuery(document).ready(function($){ 

    // jQuery code is in here 
    $("input[type=checkbox]").on("click", function() { 

    var data = $(this).val(); 
    console.log(data); // 1, 2 or 3 (value) 
    $.ajax({ 
     url: "<?php echo JURI::getInstance(); ?>", // URL should be correct! 
     type: "POST", 
     async: true, 
     cache: false, 
     data: {data: data}, 
     dataType: 'text', 
     success: function(data){ 
      alert(data); 
     } 
    }); 
    }); 

}); 




</script> 

問題：獲取網頁的HTML內容，而不是成功的方法值

Answer 1

改變你的HTML如下1.刪除</input>和變化2.變化形式name到id

<form method="post" id="form1"> 
    <input type="checkbox" name="checkboxList[]" value="1">value1 
    <input type="checkbox" name="checkboxList[]" value="2">value2 
    <input type="checkbox" name="checkboxList[]" value="3">value3 
</form> 

變化JS

var data = $("#form1").serialize(); 

您的表單沒有選擇，並在後有空白數據

Answer 2

請嘗試以下代碼。

<form method="post" name="form1"> 
    <input type="checkbox" name="checkboxList[]" value="1">value1</input> 
    <input type="checkbox" name="checkboxList[]" value="2">value2</input> 
    <input type="checkbox" name="checkboxList[]" value="3">value3</input> 
</form> 

<script> 
    $("input[type=checkbox]").on("click", function() { 
     var data = $("form").serialize(); 
     $.ajax({ 
      url: "../../x.php", // URL should be correct! 
      type: "POST", 
      async: true, 
      cache: false, 
      data: {data: data}, 
      dataType: 'json', 
      success: function(response_data){ 
       alert(response_data); 
      } 
     }); 
    }); 
</script>