Criando um for para checkbox
07/11/2018
0
Olá!
Sou novo no mundo da programação, o que estou querendo é teoricamente simples, é enviar uma ficha de inscrição de uma form HTML.
Dentro dessa form tenho 4 checkbox cada uma com uma "área de interesse", o que estou tentando fazer é um if para testar se ela está em checked e caso esteja ela será enviada em foram de json, porém não quero fazer um if para cada uma das checkbox, estou tendo dificuldade para fazer um for.
a ideia seria essa, porém o form.interesse[i].value; e o checked não funcionam.
Desculpem-me minha inexperiência.
Sou novo no mundo da programação, o que estou querendo é teoricamente simples, é enviar uma ficha de inscrição de uma form HTML.
Dentro dessa form tenho 4 checkbox cada uma com uma "área de interesse", o que estou tentando fazer é um if para testar se ela está em checked e caso esteja ela será enviada em foram de json, porém não quero fazer um if para cada uma das checkbox, estou tendo dificuldade para fazer um for.
<form id=''novo-inscrito''>
<fieldset>
<legend>Faça parte desse time se inscrevendo na próxima edição de bolsas.</legend>
<label for="nome">Nome completo</label>
<input id="nome" type="text" name="nome" required autofocus pattern="[A-Za-z '']{4,}" title="O nome precisa ter pelo menos 4 caracteres">
<label for="email">E-mail</label>
<input id="email" type="email" name="email" required placeholder="seu@email.com">
</fieldset>
<fieldset>
<legend>Maior disponibilidade</legend>
<label>
<input type="radio" required name="assunto" value="manha">
Manhã
</label>
<label>
<input type="radio" name="assunto" value="tarde">
Tarde
</label>
<label>
<input type="radio" name="assunto" value="noite">
Noite
</label>
<label>
<input type="radio" name="assunto" value="personalizar">
Personalizar
</label>
</fieldset>
<fieldset>
<legend>Interesses</legend>
<label>
<input type="checkbox" checked name="interesse1" value="IA">
IA
</label>
<label>
<input type="checkbox" checked name="interesse2" value="Big Data">
Big Data
</label>
<label>
<input type="checkbox" checked name="interesse3" value="Machine Learning">
Machine Learnig
</label>
<label>
<input type="checkbox" name="interesse4" >
Outro
<input class=''outro-interesse''for=''interesse4'' type="text" name="interesse-personalizado" placeholder="Digite outra área de interesse">
</label>
</fieldset>
<label for="mensagem">Porque você quer participar?</label>
<textarea id="mensagem" type=''textarea''name="mensagem" cols="60" rows="10"
required pattern="[A-Za-z0-9]{140,}" title="A mensagem deve ser maior que 140 caracteres"
placeholder="Digite aqui sua mensagem"></textarea>
<button class=''botao enviar-formulario'' type="submit">Enviar Inscrição</button>
</form>
var enviar = document.querySelector(".enviar-formulario");
enviar.addEventListener("click", function(event){
event.preventDefault();
var form = document.querySelector("#novo-inscrito");
var nome = form.nome.value;
var email = form.email.value;
var assunto = form.assunto.value;
var mensagem = form.mensagem.value;
console.log(nome);
console.log(email);
console.log(assunto);
console.log(mensagem);
var interesse = [0,1,2,3]
for(var i=0;i <= interesse.length; i++){
interesse[i] = form.interesse[i].value;
if (form.interesse[i].checked){
console.log(interesse[i]);
}
}
});a ideia seria essa, porém o form.interesse[i].value; e o checked não funcionam.
Desculpem-me minha inexperiência.
Pablo
Curtir tópico
+ 0
Responder
Posts
27/02/2019
Angelo Rubin
Olá,
Você pode fazer algo assim - https://codepen.io/angelorubin/pen/vPOZMO?editors=0011
Você pode fazer algo assim - https://codepen.io/angelorubin/pen/vPOZMO?editors=0011
Responder
Clique aqui para fazer login e interagir na Comunidade :)