Enviar valor de checkbox com Ajax XMLHttpRequest e PHP

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);
});
Categorias: HTML, JavaScript, PHP, Ajax, XMLHttpRequest

Deixe seu comentário

Conecte-se a uma conta do google para comentar.

Nenhum comentário

    Seja o primeiro a comentar