Question

我试图让这个联系表单与bootstrap警报（成功），验证，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.
});

修改

已添加：已选中，因此只会从选中的复选框中获取值。

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语句或任何其他你希望看到哪些代码具有值的代码，并按照你的意愿处理它们。

使用AJAX＆amp; amp将复选框值传递给PHP jQuery的

2 个答案: