如何獲得單選按鈕，csv中的複選框值使用ajax和php？

Question

我有一個表單域和一個提交鏈接。我通過我的PHP代碼生成csv。代碼工作正常，但主要問題是我無法獲取複選框，csv單選按鈕。我使用ajax和php。

這裏是我的html代碼

<div class="form-style" id="contact_form"> 
     <div id="contact_results"></div> 
     <div id="contact_body"> 

     <input type="radio" id="male" name="gender" required="true" value="Male"> 
     <label for="male"><span></span>M</label> 
     <input type="radio" id="female" name="gender" required="true" value="Female"> 
     <label for="female"><span></span>F</label> 
     <input type="radio" id="<18" name="age" required="true" value="<18"> 
     <label for="<18"><span></span><18</label> 
     <input type="radio" id="18-25" name="age" required="true" value="18-25"> 
     <label for="18-25"><span></span>18-25</label> 

     <input type="checkbox" id="men_fashion" name="Intrest" required="true" value="Men’s Fashion"/> 
     <label for="men_fashion"><span></span>Men’s Fashion</label> 
     <input type="checkbox" id="women_fashion" name="Intrest" required="true" value="Women’s Fashion"/> 
     <label for="women_fashion"><span></span>Women’s Fashion</label> 
     <input type="checkbox" id="home_decor" name="Intrest" required="true" value="Home Decor"/> 
     <label for="home_decor"><span></span>Home Decor</label> 
     <input type="checkbox" id="gaming" name="Intrest" required="true" value="Gaming"/> 
     <label for="gaming"><span></span>Gaming</label> 
     <input type="checkbox" id="toys" name="Intrest" required="true" value="Toys"/> 
     <label for="toys"><span></span>Toys</label> 

     <a class="submit"><i class="fa fa-check-circle"></i></a> 
     </div> 
     </div> 

這裏是jQuery的阿賈克斯

$(document).ready(function() { 
    $(".submit").click(function() {   
     var proceed = true; 
     $("#contact_form input[required=true]").each(function(){ 
      $(this).css('border-color',''); 
      if(!$.trim($(this).val())){ 
       $(this).css('border-color','red'); 
       proceed = false; 
      } 
     }); 

     if(proceed) //everything looks good! proceed... 
     { 
      //get input field values data to be sent to server 
      post_data = { 
       'user_name'  : $('input[name=username]').val(), 
       'Gender' : $('input[name=gender]').val(), 
       'Age' : $('input[name=age]').val(), 
       'Intrest' : $('input[name=Intrest').val(), 
       //'subject'  : $('select[name=subject]').val(), 
       //'msg'   : $('textarea[name=message]').val() 
      }; 

      //Ajax post data to server 
      $.post('post.php', post_data, function(response){ 

      }); 
     } 
    }); 

    //reset previously set border colors and hide all message on .keyup() 
    $("#contact_form input[required=true]").keyup(function() { 
     $(this).css('border-color',''); 
     $("#result").slideUp(); 
    }); 
}); 

這裏是我的PHP代碼

<?php 
$cvsData = ""; //Initialize it as empty 
if(isset($_POST['Intrest'])) { 
    $name = $_POST['Intrest']; 
    foreach ($name as $color){ 
     $cvsData .= $color. " ". " ";  //Append the new color value 
    } 
} 
$user_name = $_POST['user_name']; 
$Gender = $_POST['Gender']; 
$Age = $_POST['Age']; 


if(empty($fn) || empty($ln) || empty($phone)){ 
$message = 'Fill in areas in red!'; 
$aClass = 'errorClass'; 
} 

$cvsData .= ",". $user_name. "," . $Age . "," .$Gender .",". "\n"; //Append the second line here 

//Add header here 
$exists = true; 
if (!is_readable("form.csv")) { 
    $exists = false; 
} 

$fp = fopen("form.csv","a"); 
if($fp){ 
    if (!$exists) { 
     fwrite("This is my awesome header\n"); 
    } 
fwrite($fp,$cvsData); 
fclose($fp); 
} 
?> 

請幫助我。
在此先感謝。

Answer 1

您只需要:checked選擇器。像這樣：

'Gender' : $('input[name=gender]:checked').val(), 

Answer 2

我的確在阿賈克斯的變化

'Gender' : $('input[name=gender]:checked').val(), 
'Intrest':$('input[type="checkbox"]:checked').map(function(){ 
       return this.value 
      }).get(), 

而且代碼的其餘部分是相同的