使用AJAX和jQuery將復選框值傳遞給PHP

Question

我正在嘗試獲取此聯系表，以使用引導警報（成功），驗證，ajax和php。 我的問題是將復選框值發送到php。 電子郵件不會按原樣提交。 如果我針對復選框將jquery，ajax和php注釋掉，它將提交並收到電子郵件。 請協助使用Ajax和php獲取復選框值。 我已經更新了有關復選框的php和ajax部分。

謝謝

我的表單標記：

<div class="control-group">
    <div class="controls">
        <div class="checkbox">
            <label>
                <input type="checkbox" name="services[]" data-validation-minchecked-minchecked="1" 
      data-validation-minchecked-message="Please choose at least one"id="q12_1" value="Website Design or Redesign"> Website Design or Redesign      
            </label>
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox" name="services[]" id="q12_2" value="eCommerce / Online Store"> eCommerce / Online Store
            </label>
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox"name="services[]" id="q12_3" value="Web Application Development"> Web Application Development                     
            </label>
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox"name="services[]" id="q12_4" value="Website Maintenance / Hosting"> Website Maintenance / Hosting
            </label>
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox"name="services[]" id="q12_5" value="Branding Services / Graphic Design"> Branding Services / Graphic Design                       
            </label>
        </div>
    </div>
</div>

我的jQuery：

    /*
    Jquery Validation using jqBootstrapValidation
example is taken from jqBootstrapValidation docs 
*/
$(function() {

 $("input,textarea").jqBootstrapValidation(
{
 preventSubmit: true,
 submitError: function($form, event, errors) {
  // something to have when submit produces an error ?
  // Not decided if I need it yet
 },
 submitSuccess: function($form, event) {
  event.preventDefault(); // prevent default submit behaviour
   // get values from FORM
   var name = $("input#name").val();  
   var email = $("input#email").val(); 
   var phone = $("input#phone").val(); 
   var services = array();
    $('checkbox :checked').each(function(index,element) {
     services.push($(this).val()); //This contains the value of your checkbox.
    });
   var budget = $("select#budget").val(); 
   var timeframe = $("select#timeframe").val(); 
   var message = $("textarea#message").val();
    var firstName = name; // For Success/Failure Message
       // Check for white space in name for Success/Fail message
    if (firstName.indexOf(' ') >= 0) {
   firstName = name.split(' ').slice(0, -1).join(' ');
     }        
 $.ajax({
            url: "assets/contact_me.php",
            type: "POST",
            data: {name: name, phone: phone, email: email, services: services, budget: budget, timeframe: timeframe, message: message},
            cache: false,
            success: function() {  
            // Success message
               $('#success').html("<div class='alert alert-success'>");
               $('#success > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
                .append( "</button>");
              $('#success > .alert-success')
                .append("<strong>Awesome!  Thanks for your interest in Nova Development.  Will be in touch soon. </strong>");
      $('#success > .alert-success')
        .append('</div>');

      //clear all fields
      $('#contactForm').trigger("reset");
      },
   error: function() {      
    // Fail message
     $('#success').html("<div class='alert alert-danger'>");
            $('#success > .alert-danger').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
             .append( "</button>");
            $('#success > .alert-danger').append("<strong>Sorry "+firstName+" it seems that my mail server is not responding...</strong> Could you please email me directly to <a href='info@novawebdev.com?Subject=Message_Me from Crownco.net'>info@novawebdev.com</a> ? Sorry for the inconvenience!");
        $('#success > .alert-danger').append('</div>');
    //clear all fields
    $('#contactForm').trigger("reset");
    },
       })
     },
     filter: function() {
               return $(this).is(":visible");
     },
   });

  $("a[data-toggle=\"tab\"]").click(function(e) {
                e.preventDefault();
                $(this).tab("show");
    });
});


/*When clicking on Full hide fail/success boxes */ 
$('#name').focus(function() {
 $('#success').html('');
});

我的PHP：

<?php
// check if fields passed are empty
if(empty($_POST['name'])        ||
   empty($_POST['email'])       ||
   empty($_POST['phone'])       ||
   empty($_POST['services[]'])  ||
   empty($_POST['budget'])      ||
   empty($_POST['timeframe'])   ||
   empty($_POST['message']) ||
   !filter_var($_POST['email'],FILTER_VALIDATE_EMAIL))
   {
    echo "No arguments Provided!";
    return false;
   }

$name = $_POST['name'];
$email_address = $_POST['email'];
$phone = $_POST['phone'];
$message = $_POST['message'];
$services = $_POST['services[]'];
$budget = $_POST['budget'];
$timeframe = $_POST['timeframe'];   

// create email body and send it    
$to = 'info@novawebdev.com'; // put your email
$email_subject = "Contact form submitted by:  $name";
$email_body = "You have received a new message. \n\n".
              " Here are the details:\n \nName: $name \nPhone: $phone \nServices: $services \nBudget: $budget \nTimeframe: $timeframe \n".
              "Email: $email_address\nMessage: \n\n$message";
$headers = "From: $email_address\n";
$headers .= "Reply-To: $email_address"; 
mail($to,$email_subject,$email_body,$headers);
return true;            
?>

Answer 1

我確實看到您的jQuery和復選框有問題。

你得到了：

$('checkbox#services')

這會選擇您沒有#services id的復選框。 您必須選擇每個復選框值。 您可以使用它們各自的ID q12_x來執行此操作，也可以對所有值進行迭代。

$('checkbox :checked').each(function(index,element) {
     $(this).val(); //This contains the value of your checkbox.
});

如果需要，可以從那里將其推入數組。

var services = array();
$('checkbox :checked').each(function(index,element) {
    services.push($(this).val()); //This contains the value of your checkbox.
});

編輯

添加了：checked，因此它將僅從選中的復選框中獲取值。

Answer 2

我不得不做一些非常相似的事情，除了我的復選框都有唯一的ID。 基本上，您必須檢查是否已檢查每個值，並將該值（我使用1表示已檢查，使用0表示未檢查）放入變量。 這是我的代碼：

    Guides.prototype.list = ['amOld','folOld','tichOld','bookOld','nebOld','sterOld','byteOld','ingOld'];

Guides.prototype.update = function(){
  for( var i = 0 ; i < this.list.length ; i++ ){
    var guide = this.list[i];
    this[ guide + 'Guide' ] = $("#" + guide ).is(":checked") ? 1 : 0;
  }  
}
var guides = new Guides();

指南可以是您想要的任何東西，服務在您的情況下會很好。 在原型列表中，您將為每個復選框添加ID。 函數的最后一行可能看起來像

this[service] = $("#"+service ).is(":checked") ?1 : 0;

服務將是您列表中每個ID的變量。 現在，您可以將它們作為單個項目傳遞到jquery中（例如，q12_1：q12_1就是將它們放在列表中的方式）。 現在在您的php文件中使用if語句或任何其他代碼，您希望查看哪些具有值，並根據需要對其進行處理。