Позвоните в Ajax или отправьте кнопку, когда флажок установлен

Question

У меня следующий цикл PHP while, который показывает данные в виде флажка.Флажок может быть несколько или один.

<?php
$supplier = new Admin;
$supplier->rowQuery("SELECT * FROM supplier");

echo '<form id="formId">';
    while ( $data = $supplier->result->fetch_assoc()) {        

        $sid          =  (int) $data['sid'];
        $supplierName = output($data['supplierName']);

        echo '<label class="checkbox-inline">';
            echo "<input type='checkbox' name='sid[]' data-sid='$sid' value='$sid' class='supplierClass'> $supplierName";
        echo '</label>';
    }
echo '<input type="hidden" name="submit" value="supplier" class="clickBtn">';
echo '</form>';
?>

Теперь я хочу вызывать Ajax, когда установлен хотя бы один или несколько флажков.Для этого у меня есть следующий Javascrpt:

$('.supplierClass').click(function() {
var sid = $(this).data('sid');
if(this.checked){
   // $("input[type=submit]").trigger(".clickBtn");
   $('.clickBtn').trigger();
   $('#formId').submit(function() {
      $.ajax({
        url         :   'process/get-vehicle.php',
        type        :   'POST',
        dataType    :   'html',
        data        :   {
          sid   :  sid,
        },
        beforeSend  :   function () {
            $('.allVehicle').html('Please wait...');
        },
        success     :   function ( result ) {
            $('.allVehicle').html(result);
        }
    });
  });
}
});

, но он не называется Ajax: (

Общая цель

Вы можете видеть, чтоЯ установил имя флажка array sid []. Поскольку мне нужно получить все проверенные флажками данные в виде массива в файле PHP.

Итак, как я могу вызвать Ajax, когда установлены один или несколько флажков? Обратите внимание: в файле PHP я хочу получить все флажки или одно значение флажка.

Моя мысль:

Я думаю, что должно бытькнопка отправки скрыта. Когда я нажимаю на любой флажок, он должен нажать скрытую кнопку jQuery, чтобы вызвать Ajax.

Answer 1

Для отправки запроса ajax нет необходимости в кнопке отправки.Я изменил твой код.Надеюсь, что это соответствует вашему требованию.

$('.supplierClass').change(function () {
   var sid = $(this).data('sid');
   if ($(this).is(":checked")) {
      $.ajax({
         url: 'process/get-vehicle.php',
         type: 'POST',
         dataType: 'html',
         data: {
            sid: sid,
         },
         beforeSend: function () {
            $('.allVehicle').html('Please wait...');
         },
         success: function (result) {
             $('.allVehicle').html(result);
         }
      });
  }
 });

Я вызвал ajax-вызов в событии смены флажка и только в том случае, когда его отметили.

Answer 2

$(document).on("click", '.supplierClass:checked', function() {
  var sid = $(this).val() // gets the sid 
  alert('clicked checkbox => ' + sid); // checking if this code gets called
  $.ajax({
    url: 'process/get-vehicle.php',
    type: 'POST',
    dataType: 'html',
    data: {
      sid: sid,
    },
    beforeSend: function() {
      //Code Goes here
    },
    success: function(result) {
      //code goes here
    },
    error: function(err) {
      //code goes here
    }
  });
})

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="banner-message">
  <p>Check Box</p>

  <input type='checkbox' name='sid[]' data-sid='$sid' value='1' class='supplierClass'>
  <br>
  <input type='checkbox' name='sid[]' data-sid='$sid' value='2' class='supplierClass'>
  <br>
  <input type='checkbox' name='sid[]' data-sid='$sid' value='3' class='supplierClass'>
  <br>
</div>

Этот код запускается только тогда, когда флажок установлен и отправляет одно значение флажка на сервер PHP, вам не нужна скрытая кнопка отправки, чтобы сделатьэто

Answer 3

Удалить событие отправки, использовать событие изменения, получить все проверенные sids

$('.supplierClass').change(function() {

if( $('.supplierClass:checked').length){
 var sids = [];
 $('.supplierClass:checked').each(function(i,v) {//get all the sids of the elements checked
     sids.push($(v).val());
  });
      $.ajax({
        url         :   'process/get-vehicle.php',
        type        :   'POST',
        dataType    :   'html',
        data        :   {
          sid   :  sids,
        },
        beforeSend  :   function () {
            $('.allVehicle').html('Please wait...');
        },
        success     :   function ( result ) {
            $('.allVehicle').html(result);
        }
    });
}
});