使用ajax通过电子邮件发送的相同字段

Question

i want to send this data through email and it is a dynamic field.Please somebody guide me with this.

 <input type='button' value='Add Tier Flavor' id='Add'>
    <input type='button' value='Remove Tier Flavor' id='Remove'>

    <div id='batch'>
        <div id="BatchDiv1">
            <h4>Batch #1 :</h4>
            <label>Flavor<input class="textbox" type='text' id="fl" name="fl[]" value=""/></label></br>
            <label>Filling<input class="textbox" type='text' id="fi" name="fi[]" value="" /></label></br>
            <label>Frosting<input class="textbox" type='text' id="fr" name="fr[]" value=""/></label></br>

        </div>
    </div>

  <label><span>&nbsp;</span>
    <button class="submit_btn" id="submit_btn">Submit</button>
</label>

Javascript

<script type="text/javascript">


    $(document).ready(function(){

        var counter = 2;

        $("#Add").click(function () {

            if(counter>5){
                alert("Only 5 Tiers allow");
                return false;
            }
            var newBatchBoxDiv = $(document.createElement('div')).attr("id", 'BatchDiv' + counter);
            newBatchBoxDiv.html('<h4>Batch #'+ counter + ' : </h4>' +
                '<label> Flavor<input type="text" name="fl[]" id="fl' + counter + '" value=""></label><br>'+
                '<label> Filling<input type="text" name="fi[]" id="fi' + counter + '" value=""></label><br>'+
                '<label> Frosting<input type="text" name="fr[]" id="fr' + counter + '" value=""></label><br>' );

            newBatchBoxDiv.appendTo("#batch");

            counter++;
        });

        $("#Remove").click(function () {
            if(counter==1){
                alert("No more tier to remove");
                return false;
            }
            counter--;

            $("#BatchDiv" + counter).remove();
        });



    });
</script>

i want to send data through ajax i am trying the following:

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("#submit_btn").click(function() {
    //get input field values

            var user_cupfl = [];
            $('input[name="fl[]"]').each(function(){
                user_cupfl.push($(this).val());
            });

            var user_cupfi = [];
            $('input[name="fi[]"]').each(function(){
                user_cupfi.push($(this).val());
            });
            var user_cupfr = [];
            $('input[name="fr[]"]').each(function(){
                user_cupfr.push($(this).val());
            });

        });


</script>

but it is not collecting values and posting it to other page..

  <?php
 if($_POST)

{

//check if its an ajax request, exit if not
if(!isset($_SERVER['HTTP_X_REQUESTED_WITH']) AND strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) != 'xmlhttprequest') {

    //exit script outputting json data
    $output = json_encode(
        array(
            'type'=>'error',
            'text' => 'Request must come from Ajax'
        ));

    die($output);
}

//check $_POST vars are set, exit if any missing
if(!isset( $_POST["userCupfl"])||!isset( $_POST["userCupfr"])||!isset( $_POST["userCupfi"]))
{

}
$user_cupfl=filter_var($_POST["userCupfl"], FILTER_SANITIZE_STRING);

$user_cupfi=filter_var($_POST["userCupfi"], FILTER_SANITIZE_STRING);
$user_cupfr=filter_var($_POST["userCupfr"], FILTER_SANITIZE_STRING);

  $message .= "<tr><td><strong>Cake Flavors(according to batches):</strong> </td><td><pre>" .implode("
", $user_cupfl). "</pre></td></tr>";
        $message .= "<tr><td><strong>Filling type (Inside the cake):</strong> </td><td><pre>" .implode("
", $user_cupfi). "</pre></td></tr>";
        $message .= "<tr><td><strong>Frosting type (top of the cake):</strong> </td><td><pre>" .implode("
", $user_cupfr). "</pre></td></tr>";
        break;

  $headers = "From: " . $user_Email . "
";
$headers .= "Reply-To: ".  $user_Email . "
";
$headers .= "MIME-Version: 1.0
";
$headers .= "Content-Type: text/html; charset=ISO-8859-1
";

$sentMail = @mail($to_Email, $subject,  $message, $headers);

if(!$sentMail)
{
    $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' => 'Hi '.$user_Name .' Thank you for your email'));
    die($output);
}
}
?>

AJAX

   if(proceed)
        {
            //data to be sent to server
            post_data = 
                        {'userCupfl':user_cupfl,'userCupfi':user_cupfi,'userCupfr':user_cupfr};
            //Ajax post data to server
          $.post('mailme.php', post_data, function(response){

                //load json data from server and output message
                if(response.type == 'error')
                {
                    output = '<div class="error">'+response.text+'</div>';
                }else{
                    output = '<div class="success">'+response.text+'</div>';

                    //reset values in all input fields
                    $('#contact_form input').val('');
                    $('#contact_form select').val('');
                    $('#contact_form textarea').val('');
                }

                $("#result").hide().html(output).slideDown();
            }, 'json');

        }
    });

ANY BODY?? please guide me