Tenho um formulário que é passado para o php via POST.
Como todo formulário, quando é acionado o submit ele dá um refresh na página, porém meu formulário está dentro de uma modal, usei javascript para reabrir a modal quando a página atualiza mas mesmo assim gostaria de submeter o dado sem ter que dar refresh na página.
Estou tentando fazer isso via ajax porém o (formData) que deveria estar retornando os dados está retornando uma array vazia.
HTML
<form method="post" action="/home.php" id="form1" class="d-flex flex-row margem-bot-2x">
<fieldset class="border p-2" id="field">
<select id="formselect" class="form-select" aria-label="Default select example">
<option selected>Categoria</option>
<?php
$options = "";
foreach ($data[0] as $value) {
$options .= "<option value={$value['codigo']}> {$value['nome']}</option> \n";
}
print_r($options);
?>
</select>
<input name="datalist" list="dados" id="formcontrol" class="form-control me-2" placeholder="Digite alguma informação..." aria-label="Search" >
<datalist id="dados">
<option><?php if(isset($pessoa)){ print_r($pessoa->nome); }else{ echo "-"; } ?></option>
</datalist>
</fieldset>
<button type="submit" class="btn btn-success" onclick="carregarosdadosaqui()">Pesquisar</button>
</form>
JavaScript
function carregarosdadosaqui(){
var form = document.querySelector('#form1');
form.addEventListener('submit', function(e) {
e.preventDefault(); // <--- isto pára o envio da form
var url = this.action; // <--- o url que processa a form
var formData = new FormData(this); // <--- os dados da form
var ajax = new XMLHttpRequest();
console.log(formData);
console.log(form);
ajax.open("POST", url, true);
ajax.onload = function() {
if (ajax.status == 200) {
var res = JSON.parse(ajax.responseText); // a resposta do servidor
//fazer algo com a resposta do servidor
alert(res);
} else {
alert('Algo falhou...');
}
};
ajax.send(formData);
});
}
console.log(formData)
altere paraconsole.log(formData.entries())
e veja qual o resultado.