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

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

我的网站是完全异步的,大多数html都是在按下按钮时创建和销毁的,并且每个html都会阻止导航。

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.".

在这一部分,我生成一个带有“速率1到10”阵列的无线电控制器的表格,使用jQuery.ajax()发布它并将其发送到处理它回显(现在)或回声“没有选择任何东西”。

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:

这是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的过程:

<?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:

这是使用选定的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.

编辑:添加大多数sugestions,问题仍然存在。也许html结构错了?表单和提交似乎没有关联。

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

编辑2:我发现一些非常奇怪的东西,在最终的代码上似乎有一个额外的结束标记,就像这样

<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.

我不知道它来自哪里,但是肯定是问题所在。

2 个解决方案

#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'

1-你会对形式id ='surveyForm'和button class ='surveyForm'感到困惑,所以最好把它改成按钮class ='surveyForm_btn'

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

2-我认为你应该序列化表单而不是按钮

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

3- IDs must be unique

3- ID必须是唯一的

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

4- $(“#surveyForm”)。clearForm(); //不是.surveyForm

finally check all comments

最后查看所有评论

and Its better to use

并且它更好用

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

Edited answer: 1- please check everything after each step

编辑答案:1-请在每一步后检查所有内容

<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

此代码将在控制台中成功输出已连接..如果此工作添加您的for循环并再次进行检查

#2

Try to write your htm like that :

试着写你的htm:

    <h3>Alimentos</h3>

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

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

</form>

#1