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

我不得不做一些非常相似的事情，除了我的复选框都有唯一的 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;

并且 service 将是您列表中每个 id 的变量。现在您可以将它们作为单独的项目传递到您的 jquery 中（例如 q12_1:q12_1 就是您将它们放入列表的方式）。现在在您的 php 文件中使用 if 语句或任何其他您希望查看哪些具有值的代码并按照您的意愿处理它们。

Answer 2

我确实看到您的 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，因此它只会从选中的复选框中获取值。