Há um bom tempo que não utilizo mais o jQuery. Embora tenha sido uma ferramenta útil, especialmente para simplificar tarefas como o envio de solicitações Ajax do lado do servidor, porém agora não é mais necessário carregar um arquivo JavaScript tão extenso, especialmente para tarefas mais simples. Atualmente, prefiro empregar o XMLHttpRequest
para envio de requisições, apesar das recomendações frequentes para adotar a função fetch
. No entanto, estou confortável com minha abordagem atual. Sem mais delongas, vamos ao que interessa.
HTML:
<form id="formit" method="POST">
<div class="assunto">
<label for="parcerias"><span>Parcerias</span></label>
<input id="parcerias" class="ckb" type="checkbox" name="assunto[]" value="Parcerias" />
<label for="problemas"><span>Estou com problemas</span></label>
<input id="problemas" class="ckb" type="checkbox" name="assunto[]" value="Problemas" />
<label for="registro"><span>Registrar</span></label>
<input id="registro" class="ckb" type="checkbox" name="assunto[]" value="Registro" />
</div>
<label for="nome">Nome:</label>
<input id="nome" class="input_2" type="text" name="nome">
<label for="email">E-mail:</label>
<input id="email" class="input_2" type="text" name="email">
<button type="submit" class="btn" name="send">Enviar</button>
<div id="callback"></div>
</form>
PHP:
$assuntos = "";
foreach($_POST["assunto"] as $assunto) {
$assuntos .= "<li>$assunto</li>";
}
$nome = $_POST["nome"];
$email = $_POST["email"];
echo "<article>
<ul style=\"margin: 5px 0 10px 10px;\">
$assuntos
</ul>
<p style\"margin: 0 0 6px 0;\"><em>Nome: </em>$nome</p>
<p style\"margin: 6px 0;\"><em>Marca: </em>$email</p>
</article>";
JavaScript:
var formit = document.querySelector("#formit");
var callback = document.getElementById("callback");
formit.addEventListener("submit", event => {
event.preventDefault();
var fData = new FormData();
var assuntos = document.querySelectorAll(".ckb");
for(var i = 0; i <= assuntos.length - 1; i++) {
if(assuntos[i].checked) {
fData.append('assunto[]', document.getElementById(assuntos[i].id).value);
}
}
fData.append('nome', document.querySelector("#nome").value);
fData.append('email', document.querySelector("#email").value);
var xhr = new XMLHttpRequest();
xhr.open("POST", "action.php");
xhr.onload = function () {
if (this.status == 200) {
callback.style.color = "green";
callback.innerHTML = this.response;
} else {
callback.style.color = "red";
callback.innerHTML = "Ocorreu algum erro.";
}
};
xhr.send(fData);
});
Comente no