douyong1908
2018-05-24 05:20
浏览 396

选中复选框时,调用Ajax或提交按钮

I have following PHP while loop which is showing data as the checkbox. The checkbox can be multiple or one.

<?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>';
?>

Now I want to call Ajax when at least one checkbox or multiple checkbox is checked. So to do that I have following 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);
        }
    });
  });
}
});

but it's not called the Ajax :(

Overall Goal

You can see that I have set the checkbox name as array sid[]. Becuase I need to get all checkbox checked data as array in a PHP file.

So how can I call Ajax when one or multiple checkboxes are checked? Please note that: In PHP file I want to get all checkbox or one checkbox value.

My Thought:

I think there should be a submit button as hidden. When I click on any checkbox It's should press the hidden button by jQuery to call the Ajax.

  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

3条回答 默认 最新

  • dourong6054 2018-05-24 05:31
    已采纳

    Remove the submit event, use a change event, get all the checked 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);
            }
        });
    }
    });
    
    已采纳该答案
    打赏 评论
  • dsw1608 2018-05-24 05:32

    There is no need for submit button in order to do ajax request. I have altered your code. Hope this one suits your requirement.

    $('.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);
             }
          });
      }
     });
    

    I have triggered ajax call on the check box change event and only on the when its checked.

    打赏 评论
  • duanli5662 2018-05-24 05:42

    $(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>

    This code runs only when the checkbox gets checked and sends one checkbox value to PHP server , you don't need a hidden submit button to do this

    </div>
    
    打赏 评论

相关推荐 更多相似问题