复选框 jquery 使用 ajax 发送数据并保存在 php 不插入

Question

我尝试序列化而不是推送元素值，但我仍然通过在数据库中插入每个值 9 次来获得数组。请任何人帮我弄清楚我的问题这就是我正在尝试的

HTML:

    <form name="chkl" id="chkl" method="post">  
                
<input type="checkbox" class="get_value" name="chk1[ ]" value="<?php echo $rows['ID'];?>">&nbsp<?php echo $rows['DESCRIPTION'];?></input><br>

<input type="submit" name="Submit" id="chk1" value="Submit">

JS:

<script>
 $('#chk1').click(function(){  
$('input[type=checkbox]').each( function() {
          $.post('fee_checked_save.php', $( ".get_value" ).serialize(), function(data){
          if(data == 1){
             $('#result').html(data);  
          }
      });
});
});
</script>

PHP:

<?php  
    
  $checkbox1 = $_POST['chk1'];
    if(isset($_POST['chk1']))  
    {  
    for ($i=0; $i<count ($checkbox1);$i++) {  
    $query = "INSERT INTO fee_checked(FEE_ID) VALUES ('".$checkbox1[$i]. "')";  
   $result = mysqli_query($conn, $query);
    }  
    echo "Record is inserted";  
    }  
    ?>

如有任何帮助，我们将不胜感激。提前致谢！

Answer 1

您正在发送所有复选框值，但是，我认为您只需要发送 checked 的复选框，所以使用 :checked 然后您使用 $( ".get_value" ).serialize() 这是针对所有 class 这就是为什么您看到多个插入而不是将其更改为 $(this).serialize() 的原因。我还添加了其他方式，而不是一个一个地发送复选框，您可以使用 $(this).closest("form").serialize() 一次发送整个表单数据。

演示代码 :

$('#chk1').click(function(e) {
  e.preventDefault()

  //send only input which is checked
  $('input[type=checkbox]:checked').each(function() {
    console.log($(this).serialize())
    //use `this` here,,
    $.post('fee_checked_save.php', $(this).serialize(), function(data) {
      if (data == 1) {
        $('#result').html(data);
      }
    });
  });
});

//prefer way : 
$('#chk1').click(function(e) {
  e.preventDefault()
  console.log("from second way.." + $(this).closest("form").serialize())
  $.post('fee_checked_save.php', $(this).closest("form").serialize(), function(data) {
    //some codes
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="chkl" id="chkl" method="post">

  <input type="checkbox" class="get_value" name="chk1[]" value="1">&nbsp; Soemthings..
  <input type="checkbox" class="get_value" name="chk1[]" value="2">&nbsp; Soemthings..


  <input type="submit" name="Submit" id="chk1" value="Submit">
</form>

复选框 jquery 使用 ajax 发送数据并保存在 php 不插入

checkbox jquery using ajax to send data and save in php not inserting

javascript

php

ajax

checkbox

mysqli