F�rum Criando um for para checkbox #598464

07/11/2018

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

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

Responder

Gostei + 0