JQuery + PHP 联系表单多个复选框

我的联系表格有点问题。我添加了多个复选框，但一旦继续，当我检查所有复选框时，电子邮件仅显示 1。我可能错过了一些东西。如果有人可以帮助我，这是我的代码。谢谢

.HTML

<div id="contact_form">
<div style="color:#000;" id="contact_results"></div>
<div id="contact_body">
<div class="form-group">
<input type="text" class="form-control" name="nom" id="nom" placeholder="Nom">
 </div>
 <div class="form-group">
 <input type="text" class="form-control" name="prenom" id="prenom" placeholder="Prenom">
</div>
<div class="form-group">
<input type="text" class="form-control" name="annee" id="annee" placeholder="Année de naissance">
 </div>
<div class="form-group">
<label><input type="checkbox" name="id[]" id="id1" value="Habille">Habillé</label>
<label><input type="checkbox" name="id[]" id="id2" value="Sexy">Sexy (+18)</label>
    <label><input type="checkbox" name="id[]" id="id3" value="Lingerie - Maillot de bain">Lingerie/Maillot de bain (+18)</label>
    <label><input type="checkbox" name="id[]" id="id4" value="Nue cache">Nue caché (+18)</label>
    <label><input type="checkbox" name="id[]" id="id5" value="Nue non cache">Nue non caché (+18)</label>
 </div>
 <div class="form-group">
 <input type="text" class="form-control" name="ville" id="ville" placeholder="ville">
 </div>
 <div class="form-group">
  <input type="email" class="form-control" name="email" id="email" placeholder="Email">
 </div>
 <div class="form-group">
 <textarea class="form-control" rows="3" name="message" id="message" placeholder="Votre message"></textarea>
 </div>
<button type="submit" id="submit_btn" class="btn btn-primary btn-xl page-scroll">Envoyer</button>
 </div>
 </div>

杰奎里

    $(document).ready(function() {
$("#submit_btn").click(function() {     
var proceed = true;
$("#contact_form input[required=true], #contact_form textarea[required=true]").each(function(){
$(this).css('border-color',''); 
if(!$.trim($(this).val())){ //if this field is empty 
$(this).css('border-color','red'); //change border color to red   
proceed = false; //set do not proceed flag
}
var email_reg = /^([w-.]+@([w-]+.)+[w-]{2,4})?$/; 
if($(this).attr("type")=="email" && !email_reg.test($.trim($(this).val()))){
$(this).css('border-color','red'); //change border color to red   
proceed = false; //set do not proceed flag              
}   
});
if(proceed) //everything looks good! proceed...
{
post_data = {
'user_nom'      : $('input[name=nom]').val(),
'user_prenom'   : $('input[name=prenom').val(),
'user_message'      : $('textarea[name=message]').val(),
'user_ville'    : $('input[name=ville]').val(),
'user_email'    : $('input[name=email]').val(),
'user_theme' : $("input[name='id[]']:checked").val(),
'user_annee'    : $('input[name=annee]').val(),
        };
$.post('modelc.php', post_data, function(response){  
if(response.type == 'error'){ //load json data from server and output message     
output = '<div class="error">'+response.text+'</div>';
}else{
output = '<div class="success">'+response.text+'</div>';
//reset values in all input fields
$("#contact_form  input[required=true], #contact_form textarea[required=true]").val(''); 
$("#contact_form #contact_body").slideUp(); //hide form after success
}
$("#contact_form #contact_results").hide().html(output).slideDown();
}, 'json');
}
});
$("#contact_form  input[required=true], #contact_form textarea[required=true]").keyup(function() { 
$(this).css('border-color',''); 
$("#result").slideUp();
});
});

.PHP

    <?php
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: POST, GET, OPTIONS');
$headers = 'From: '.$user_email.'' . "rn";
$headers .= 'Reply-To: '.$user_email.'' . "rn";
$headers .= 'X-Mailer: PHP/' . phpversion();
$headers .= "MIME-Version: 1.0rn";
$headers .= "Content-Type: text/html; charset=ISO-8859-1rn";
if($_POST)
{
$to_email       = "hello@originsphotography.eu"; //Recipient email, Replace with own email here
//check if its an ajax request, exit if not
if(!isset($_SERVER['HTTP_X_REQUESTED_WITH']) AND strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) != 'xmlhttprequest') {
    $output = json_encode(array( //create JSON data
        'type'=>'Erreur', 
        'text' => 'Sorry Request must be Ajax POST'
    ));
    die($output); //exit script outputting json data
} 
//Sanitize input data using PHP filter_var().
$user_nom       = filter_var($_POST["user_nom"], FILTER_SANITIZE_STRING);
$user_prenom    = filter_var($_POST["user_prenom"], FILTER_SANITIZE_STRING);
$user_message      = filter_var($_POST["user_message"], FILTER_SANITIZE_STRING);
$user_ville      = filter_var($_POST["user_ville"], FILTER_SANITIZE_STRING);
$user_email     = filter_var($_POST["user_email"], FILTER_SANITIZE_EMAIL);
$user_annee    = filter_var($_POST["user_annee"], FILTER_SANITIZE_EMAIL);
$user_theme    = $_POST["user_theme"];
$subject        = "Contact site internet";
$from           = "www.originsphotography.eu";
//additional php validation
if(strlen($user_nom)<4){ // If length is less than 4 it will output JSON error.
    $output = json_encode(array('type'=>'error', 'text' => 'Le champ est trop court ou vide'));
    die($output);
}
if(!filter_var($user_email, FILTER_VALIDATE_EMAIL)){ //email validation
    $output = json_encode(array('type'=>'error', 'text' => 'Veuillez entrer une adresse email valide'));
    die($output);
}
//email body
$message_body = "Nom : ".$user_nom."rnrnPrénom : ".$user_prenom."rnrnEmail : ".$user_email."rnrnMessage : ".$user_message."rnrnVille : ".$user_ville."rnrnTheme : ".$user_theme."rnrnAnnee : ".$user_annee ;
//proceed with PHP email.
$headers = 'From: '.$user_email.'' . "rn" .
'Reply-To: '.$user_email.'' . "rn" .
'X-Mailer: PHP/' . phpversion();
$send_mail = mail($to_email, $subject, $message_body, $headers);
if(!$send_mail)
{
    //If mail couldn't be sent output error. Check your PHP email configuration (if it ever happens)
    $output = json_encode(array('type'=>'error', 'text' => 'Could not send mail! Please check your PHP mail configuration.'));
    die($output);
}else{
    $output = json_encode(array('type'=>'message', 'text' => 'Merci, '.$user_prenom .' pour votre message. Je vous réponds très vite !'));
    die($output);
}
}
?>

无需在名称中使用.val()和[]来获取jquery中复选框的值

$("input[name='id']:checked");

要获取选定的值，您可以序列化它们

console.log($('input[name='id']:checked').serialize());

或者您可以使用每个循环

$('input[name='id']:checked').each(function() { console.log(this.value); });

或者如果您想通过ajax来Paas他们

只需将其添加到变量中即可，例如

var checked = $('input[name='id']:checked').serialize();

或者如果你想在数组中推送它的值

var checkboxValues = []; $('input[name=id]:checked').map(function() { checkboxValues.push($(this).val()); });

相关内容

最新更新

热门标签：