表单标签过早关闭

Question

As far as I know this means the html code is invalid, usually because of incorrect nesting.

This form is generated on a button press by echoing from a php function called with jQuery.ajax():

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

All code behaves as expected but one line:

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

The form is closing itself as soon as it opens. Am I breaking some rule? Can't seem to find the problem. I don't think the issue is on the js but I'll include it

        $('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;
    });

Console logs indicate everything is all right but no data is being sent (empty array), which makes sence considering the form is closing itself prematurely.

EDIT: I think I know what the problem is, the form is being created inside a table, which is invalid html (right?) I'll post an update when I fix that. Should I mark as answered?

Answer 1

You are serializing the button, not the form.

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