如何使用 ajax 和 php 在 csv 中获取单选按钮、复选框值？

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 Ajax

$(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

我在 ajax 中做了更改

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

其余的代码都是一样的