Ajax调用成功，但无法从$ _POST获取无线电值

Question

My site is fully asynchronus, most of the html gets created and destroyed on button presses and every one of them prevents navigation.

At this part I produce a form with a "rate 1 to 10" array of radioboxes, post it using jQuery.ajax() and send it to process where it's either echoed back (for now) or echo "nothing was selected.".

This is the form,

<?php
<form id="surveyForm" action="processSurvey.php" method="post">

    <h3>Alimentos</h3>

    <h4>Sabor</h4>
    <div class="form-group">';
        for ($i = 0; $i <= 10; $i++) {
            echo '
                <span class="lead form-options">' .'</span>
                <label class="radio-inline">
                    <input type="radio" name="sabor" id="saborRadio'. $i .'" value="'. $i .'">'. $i.'
                </label>';

        }
        echo '
    </div>

    <div class="form-group">
        <button class="btn btn-default surveyForm-btn" type="submit">Enviar</button>
    </div>

</form>
?>

This is the javascript:

$('body').on('click', '.surveyForm', function(){
        console.log("Clicked on .surveyForm-btn");
        var data = $('#surveyForm').serialize();
        console.log( data );
        $.ajax({
            method: "POST",
            url: "processSurvey.php", 
            data: data, 
            success: function(result){
                console.log("Ajax call to processSurvey success");
                $("#surveyForm").clearForm();
                console.log(result);
                console.log( data );

            } 
        });
        return false;
    });

And this is the process php:

<?php
if (isset($_POST['sabor']))   // if ANY of the options was checked
  echo $_POST['sabor'];    // echo the choice
else
  echo "nothing was selected.";
print_r($_POST);
?>

This is the console after clicking submit WITH a selected radiobox:

Clicked on #surveyForm
[EMPTY LINE]
Ajax call to processSurvey success
nothing was selected.
[EMPTY LINE]

This means the submit is successful, but the form data is empty. I've been trying to find the problem since yesterday, I'm pretty sure I'm passing the data wrong but can't find anything in google that I haven't tried.

EDIT: Added most sugestions, problem persists. Maybe the html structure is wrong? The form and the submit don't seem to be connected.

EDIT 2: I found something very strange, on the final code there seems to be an extra closing tag, like this

<form id="surveyForm" action="processSurvey.php" method="post"></form>
    <h3>Alimentos</h3>
    <h4>Sabor</h4>

I have no idea where is that coming from, but is defenitely the problem.

Answer 1

there are a lot of notes here

1- you will get confused with form id='surveyForm' and button class='surveyForm' so its better to change it a little bit to button class='surveyForm_btn'

2- I think you should serialize the form not the button

var data = $('#surveyForm').serialize(); // not .surveyForm

3- IDs must be unique

4- $("#surveyForm").clearForm(); // not .surveyForm

finally check all comments

and Its better to use

$('body').on('submit', '#surveyForm', function(){});

Edited answer: 1- please check everything after each step

<form id="surveyForm" action="processSurvey.php" method="post">
   <h3>Alimentos</h3>
   <h4>Sabor</h4>
   <div class="form-group">
    <button class="btn btn-default surveyForm-btn" type="submit">Enviar</button>
   </div>
</form>

in js

$('body').on('submit', '#surveyForm', function(){
        var data = $(this).serialize();
        $.ajax({
            method: "POST",
            url: "processSurvey.php", 
            data: data, 
            success: function(result){
                console.log(result);
            } 
        });
        return false;
    });

in php

<?php
echo 'Connected successfully';
?>

this code will output Connected successfully in console .. if this work add your for loop and make a check again