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?
