使用 jquery ajax submit 获取选中的复选框值和表单输入值

Question

我正在实现一个应用程序，其中一个模块包含搜索方法，我们得到表格中的人员列表，这是它的代码。

<table class="table table-striped table-bordered table-hover" id="sample_3">
  <div class="modal fade" id="sms" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
          <h4 class="modal-title">Compose Sms</h4>
        </div>
        <div class="modal-body">
          <div class="form-group">
            <label>Message</label>
            <textarea class="form-control" rows="3" name="smsmessage"></textarea>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn blue">Send Sms</button>
          <button type="button" class="btn default" data-dismiss="modal">Close</button>
        </div>
      </div>
      <!-- /.modal-content --> 
    </div>
    <!-- /.modal-dialog --> 
  </div>
  <thead>
    <tr>
      <th class="table-checkbox"> <input type="checkbox" class="group-checkable" data-set="#sample_3 .checkboxes"/></th>
      <th>Surname</th>
      <th>Name</th>
      <th>Gender</th>
      <th>Town</th>
      <th>Mobile No</th>
      <th></th>
    </tr>
  </thead>
  <tbody>

<?php 
  if($numrows!= "0") {
    while($result = mysql_fetch_array($query,MYSQL_ASSOC)){
?>

    <tr class="odd gradeX">
      <td><input type="checkbox" class="checkboxes" value="<?php echo $result['mobileNo'];?>" name="numbers"/></td>
      <td><?php echo $result['surname']; ?></td>
      <td><?php echo $result['name']; ?></td>
      <td><?php echo $result['sex']; ?></td>
      <td><?php echo $result['preTown']; ?></td>
      <td><?php echo $result['mobileNo']; ?></td>
      <td><a href="details.php?id=<?php echo $result['id'];?>" class="btn btn-xs green"><i class="fa fa-search"></i> View</a>&nbsp;&nbsp;&nbsp;<a href="editdetails.php?id=<?php echo $result['id'];?>" class="btn btn-xs blue"><i class="fa fa-edit"></i> Edit</a>&nbsp;&nbsp;&nbsp<a class="fancybox-button fancybox.iframe btn btn-xs purple" href="singlesms.php?number=<?php echo $result['mobileNo'];?>"><i class="fa fa-envelope"></i> Send Sms</a></td>
    </tr>

<?php 
    }
  } else { 
?>

    <tr>
      <td>No Records Found</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>

<?php
  }
?>

  </tbody>
</table>

现在，如果我单击提交按钮，我只想发送由复选框选中的那些值。我希望通过 jquery ajax submit 发送复选框值和输入：smsmessage。我已经实现了一个代码，但它只使用复选框值，我希望输入值通过 ajax post 传递。这是我已经实现的

    $('.btnadd').click(function(){
        var checkValues = $('input[name=numbers]:checked').map(function()
        {
            return $(this).val();
        }).get();

        $.ajax({
            url: 'loadmore.php',
            type: 'post',
            data: { ids: checkValues },
            success:function(data){

            }
        });
    });

您能否建议如何将 input:smsmessage 也发送到此 post 方法。 这里是 bulksms.php

          $success="0";
           $message=$_POST['smsmessage'];
         if($message="")
          {
              echo "Please Provide Details Correctly";
           }
           foreach($number as $_POST['numbers'])
               {

$parameters['mobilenumber']=$number;
$parameters['message'] = $message;
            if(api_connect("demo","demo@123",$parameters))
                {
                    $success="1";
                }

               }
         if($success=="1")
                  {
         echo "SMS Sent to all selected people";
           }

Answer 1

我会考虑将值推到 checkValues 数组的末尾，如下所示：

$('.btnadd').click(function(){
    var checkValues = $('input[name=numbers]:checked').map(function(){
        return $(this).val();
    }).get();

    checkValues.push( $('input[name=smsmessage]').val() );

    $.ajax({
        url: 'loadmore.php',
        type: 'post',
        data: { ids: checkValues },
        success:function(data){ }
    });
});

或者您可以在 ajax 调用中添加另一个数据值：

$('.btnadd').click(function(){
    var checkValues = $('input[name=numbers]:checked').map(function(){
        return $(this).val();
    }).get();

    $.ajax({
        url: 'loadmore.php',
        type: 'post',
        data: { ids: checkValues, smsmessage: $('input[name=smsmessage]').val() },
        success:function(data){ }
    });
});

---

  $('.btnadd').click(function(){
        checked = $('input[name=numbers]:checked');
        if( checked.length > 0 ) {
            var checkValues = checked.map(function(){
                return $(this).val();
            }).get();

            $.ajax({
                url: 'loadmore.php',
                type: 'post',
                data: { ids: checkValues },
                success:function(data){ }
            });
        }else{
             alert("You need to pick at least one checkbox!");
        }
    });