JQuery + PHPのお問い合わせフォーム複数のチェックボックス

Question

私の連絡フォームに少し問題があります。私は複数のチェックボックスを追加しましたが、一度進んだら、すべてをチェックすると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> 

jQueryの

$(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.'' . "\r\n"; 
$headers .= 'Reply-To: '.$user_email.'' . "\r\n"; 
$headers .= 'X-Mailer: PHP/' . phpversion(); 
$headers .= "MIME-Version: 1.0\r\n"; 
$headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n"; 
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."\r\n\r\nPrénom : ".$user_prenom."\r\n\r\nEmail : ".$user_email."\r\n\r\nMessage : ".$user_message."\r\n\r\nVille : ".$user_ville."\r\n\r\nTheme : ".$user_theme."\r\n\r\nAnnee : ".$user_annee ; 

//proceed with PHP email. 
$headers = 'From: '.$user_email.'' . "\r\n" . 
'Reply-To: '.$user_email.'' . "\r\n" . 
'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); 
} 
} 
?> 

Answer 1

のjQueryのチェックボックスの値を取得するための名前で.val()と[]を使用する必要はありません

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