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.

 <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

Pablo

Responder

Posts

27/02/2019

Angelo Rubin

Olá,

Você pode fazer algo assim - https://codepen.io/angelorubin/pen/vPOZMO?editors=0011
Responder

Que tal ter acesso a um e-book gratuito que vai te ajudar muito nesse momento decisivo?

Ver ebook

Recomendado pra quem ainda não iniciou o estudos.

Eu quero
Ver ebook

Recomendado para quem está passando por dificuldades nessa etapa inicial

Eu quero

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar