Ajax調用成功，但是無法從$ _POST獲取單選值

Question

我的網站是完全異步的，大多數HTML都是在按鈕按下時創建和銷毀的，並且每一個都阻止導航。

在這一部分，我生成一個帶有“比率1到10”單選框數組的表單，使用jQuery.ajax（）發布該表單，然后將其發送到回顯（暫時）或回顯“未選擇任何內容”的過程。

這是表格

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

這是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;
    });

這是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);
?>

單擊提交帶有選定單選框的控制台后，這是控制台：

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

這意味着提交成功，但是表單數據為空。 自昨天以來，我一直在嘗試查找問題，我很確定自己傳遞的數據有誤，但是在Google中找不到我沒有嘗試過的任何內容。

編輯：添加了大多數建議，問題仍然存在。 也許html結構是錯誤的？ 表單和提交似乎沒有連接。

編輯2：我發現很奇怪，在最終代碼上似乎有一個額外的結束標記，像這樣

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

我不知道那是哪里來的，但絕對是問題所在。

Answer 1

這里有很多筆記

1-您將對form id='surveyForm'和button class='surveyForm'感到困惑，因此最好將其更改為button class ='surveyForm_btn'

2-我認為您應該序列化表格而不是按鈕

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

3- ID必須是唯一的

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

最后檢查所有評論

而且更好用

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

編輯答案：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>

在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;
    });

在PHP中

<?php
echo 'Connected successfully';
?>

此代碼將在控制台中成功輸出Connected ..如果此工作添加了您的for循環並再次進行檢查

Answer 2

嘗試這樣寫你的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>