当前位置: 代码迷 >> JavaScript >> 表单标签过早关闭
  详细解决方案

表单标签过早关闭

热度:87   发布时间:2023-06-05 11:45:12.0

据我所知,这意味着html代码无效,通常是因为嵌套错误。

通过从jQuery.ajax()调用的php函数进行回显,可以在按下按钮时生成此表单:

<?php

echo '
<div class="row survey-container text-center">
    <form id="surveyForm" action="processSurvey.php" method="post">

        <h3>Alimentos</h3>
        <h4>Sabor</h4>
        <div class="form-group">';
            for ($i = 0; $i <= 10; $i++) {  // Imprime lista de sabor
                echo '
                    <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>
</div>
';
?>

所有代码的行为均符合预期,但只有一行:

[...] 
        <form id="surveyForm" action="processSurvey.php" method="post"></form>
[...]

表单在打开后即自动关闭。 我有违反规定吗? 似乎找不到问题。 我认为问题不在js上,但我将其包括在内

        $('body').on('submit', '#surveyForm', function(e){
        console.log("Clicked on #surveyForm ");
        var data = $(this).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;
    });

控制台日志表明一切正常,但没有数据被发送(空数组),因此考虑到表单过早关闭本身,因此具有意义。

编辑:我想我知道问题是什么,表格是在表中创建的,这是无效的html(对吗?),我将在修复该问题时发布更新。 我应该标记为已回答吗?

您正在序列化按钮,而不是表格。

var data = $(this).closest("form").serialize();

您的数据变量var'this'是您的按钮,处于作用域事件中。

您应该使用.closest('form')使.serialize()正常工作。

  相关解决方案