getting checked checkbox values and form input value using jquery ajax submit

Question

i'm implementing an appilication in which one module contains search method, we get the list of people in table, here is the code for it.

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

now if i click submit button, i want only those values to be sent which are selected by checkbox. i want the checkbox values and input:smsmessage to be sent through jquery ajax submit. i have implemented a code but it just uses the checkbox values, i want the input value to be passed through ajax post. here is the what i have implemented

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

            }
        });
    });

Can u please suggest how to send the input:smsmessage also to this post method. here is the 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

I'd look at pushing the value onto the end of the checkValues array, like this:

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

Or you could add another data value in the ajax call:

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