I have a bootstrap 5 modal box to load a from in ajax mode. This is my code:
<div class="modal" data-bs-backdrop="false" id="add_category">
<div class="modal-dialog modal-dialog-scrollable">
<div class="fetch-data"></div>
</div>
</div>
<script>
$(document).ready(function(){
$("#add_category").on("show.bs.modal", function (e) {
$.ajax({type:"post",url:"mysite.com/wizard.php",data:"add_category",success:function(data){$(".fetch-data").html(data);}});
});
});
</script>
and this is wizard.php:
<?php
function wizard_content() {
$wizard_content = '
<div class="modal-content">
<div class="modal-header"><h4 class="modal-title">TITLE</h4><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
<div class="modal-body">
<div class="mb-3">
<form id="category_add" class="category_add" method="post" action="'.htmlspecialchars($_SERVER["PHP_SELF"]).'">
<label for="category_title" class="form-label">Category Title</label>
<input type="text" name="title" id="category_title" class="form-control" value="" placeholder="">
<label for="menu">Menu:</label>
<select name="menu" id="menu" class="form-select form-select-lg mb-3" form="category_add">
<option value="none">No Menu</option>
<option value="Menu1">Menu1</option>
<option value="Menu2">Menu2</option>
</select>
<input class="addsubmit btn btn-success btn-sm" type="submit" value="Create">
</form>
</div>
</div>
</div>
';
return $wizard_content;
}
?>
Everything is ok in my code and form work, all input field are send currect data but select options are null.
What is my mistake? Thank you
I solved the problem by changing this line:
<select name="menu" id="menu" class="form-select form-select-lg mb-3" form="category_add">
to this line:
<select name="menu" id="menu" class="form-select form-select-lg mb-3">
because in ajax mode, my code can't identify the form name. Is this solution ok?