8
respostas

Capturando varios chebox num loop

Tenho o seguinte HTML:

     <form action="{% url 'cadastra_presenca' %}" method="POST" enctype="multipart/form-data"> 
                {% csrf_token %} 
                {% for alunos in curso %}
                        <td class="tbody-column">
                            <label style="display: flex; justify-content: center;">
                                <input type="checkbox"   class="presenca[]"   checked value="P" name="confirma_presenca_aluno">
                                <input class="ausencia" type='hidden' value='F'  name='confirma_presenca_aluno'>

                            </label>
                        </td> 
                {% endfor %}
                <tr style="display: flex; justify-content: center;width: 100%;">
                    <input type="submit" class="botao-cadastro" value="OK">
                </tr>
            </form>  

Tenho o seguinte JS:

presenca.forEach(function(p){

    p.addEventListener('click',function(){
        if(p.checked){
           const hidden= this.parentNode;
           hidden.querySelector('.ausencia').disabled=true;
       }else{
        const hidden= this.parentNode;
        hidden.querySelector('.ausencia').disabled=false;
       }
    })
})

Pego dados de um banco, para gerar minhas linhas de tabela, cada uma com seu checkbox. Por padrão todos os checkbox estão "checked". Caso eu desmarque 1 ele deveria ficar com o valor do input hidden. Entretanto quando capturo o array com os values de cada checkbox, ele me retorna aleatoriamente um 'F' e um 'P', fugido completamente do comportamento desejado.

Quero que os marcados tenham o valor 'P' e os desmarcados tenham o valor 'F'... para que eu possa capturar corretamente os valores desses inputs e jogar no banco. Alguma sugestão?

8 respostas

Resolvi um problema e encontrei outro.

O primeiro problema de cada um checkbox estar com seu valor correto foi resolvido assim:

presenca.forEach(function(p){

    p.addEventListener('click',function(){
        var ausente=p.parentNode.querySelector('.ausencia');
        if(ausente.disabled==true){
            ausente.disabled=false;
        }else if(ausente.disabled==false){
            ausente.disabled=true;
        }

    });

});

Entretanto, em testes, quando eu clicko no botão de voltar do browser e tento resubmeter o formulário, da erro de index. Há alguma maneira de eu evitar que o usuário use esse botão em determinada página do meu site?

Fala ai Raul, tudo bem? Desculpa mas eu não entendi a pergunta:

Há alguma maneira de eu evitar que o usuário use esse botão em determinada página do meu site?

Qual seria esse botão? Consegue me passar mais detalhes por favor.

Fico no aguardo.

Eita, eu quis dizer que quando eu volto para a pagina anterior e tento reenviar o formulário alterando alguma coisa da erro. Mas se eu volto pra pagina anterior e dou um refresh (ctrl+F5), e envio o formulario ele vai normalmente. Teria como impedir a açao de "VOLTA" do chrome/ qualquer navegador? Ou, ao clicar no botão de volta, dar um refresh automático na página?

Fala ai Raul, tudo bem? O ideal seria a aplicação conseguir tratar esses problemas, desabilitar o voltar ou recarregar a página seria um pouco ruim para a experiência do usuário.

Qual erro que a aplicação da? Seria no front ou no back?

Espero ter ajudado.

Aparentemente gera um erro no meu loop do back end. Vou enviar os codigos e o erro. As minha presenças estão cadastrando normal, coloquei até uma condicional para caso o cadastro naquele dia e horário a presença já tenha sido cadastrado ele não faz nada e retorna pra uma outra página... Só que fiz o teste dessa forma: Cadastrei a presença da turma X pro dia 23/10/2020. Cadastrou normal. Cliquei pela 1º no botão de voltar do navegador e mudei um dos checkbox de presença, ele mostra a mensagem e renderiza outra página. Cliquei pela 2º no botão de voltar do navegador e mudei um dos checkbox de presença, ele mostra a mensagem e renderiza outra página. Se eu clico uma terceira ou quarta vez, já aparece o erro. Meu Front-End:

  <form action="{% url 'cadastra_presenca' %}" method="POST" enctype="multipart/form-data"> 
                    {% csrf_token %} 
                {% for alunos in curso %}
                             <tr class="tbody-row">
                        <td class="tbody-column" style="display:none;">
                            <label style="display: flex; justify-content: center;display: none;">
                                <input type="text"  class="input-3" value="{{alunos.id}}"  name="id_matricula_presenca"/>
               </label>
            </td>
       <td class="tbody-column">{{alunos.alunos.nome_aluno}}
    <label style="display: flex; justify-content: center;display: none;">

    <input type="text"  class="input-3" value="{{alunos.alunos.nome_aluno}}" name="nome_aluno_presenca"/>
             </label>
        </td>
         <td class="tbody-column">                            
 <input type="date" class="input-3" value="{{data_presenca}}" readonly  name="data_presenca_aluno">
                                       </td>                 
                        <td class="tbody-column">
                            <label style="display: flex; justify-content: center;">
                                <input type="checkbox"   class="presenca" checked multiple value="P" name="confirma_presenca_aluno">
                                <input class="ausencia" type='hidden' disabled value='F' multiple  name='confirma_presenca_aluno'>
                            </label>
                        </td>                                                                                         
       </tr> 

                {% endfor %}

                <div style="display: flex; justify-content: center;position:relative;">
                    <input type="submit" class="botao-presenca" value="OK">                     
                </div>                                     

                </form>  

Meu Back-End de cadastro está assim:

def cadastra_presenca(request):
    if request.method=='POST':

        id_matricula_presenca=request.POST.getlist('id_matricula_presenca')

        lista_matricula=request.POST.getlist('nome_aluno_presenca')
        lista_presenca=request.POST.getlist('confirma_presenca_aluno')
        lista_data=request.POST.getlist('data_presenca_aluno')
        lista_final=[]

        contador=0

        for i in lista_data:

            if contador<= len(lista_data):
                lista_final.append([id_matricula_presenca[contador],lista_matricula[contador],lista_presenca[contador],lista_data[contador]])

                contador+=1

        con=0

        for j in lista_final:

            matricula=Matricula.objects.get(pk=j[0]) 
            id_aluno=matricula.alunos.id


            attendance=ListaPresenca.objects.filter(identificador_usuario=request.user.id).filter(matricula=matricula)           
            if  attendance.filter(dia_presenca=j[3]).exists():
                messages.error(request,'Presença já cadastrada para esse(s) aluno(s)')
                return redirect('filtro_presenca')

            dar_presenca=ListaPresenca.objects.create(identificador_usuario=request.user.id,matricula=matricula,
            dia_presenca=j[3],presenca=j[2])

            dar_presenca.save()


        #print(lista_presenca)
        messages.success(request,'Presença cadastrada com sucesso')
        return redirect('filtro_presenca')

Quando volto pela quarta vez e tento meio que recadastrar a mesma presença da esse erro:

IndexError at /portal/cadastra_presenca list index out of range Request Method: POST Request URL: http://127.0.0.1:8000/portal/cadastra_presenca Django Version: 3.1.1 Exception Type: IndexError Exception Value:list index out of range

Consegui resolver usando um outro tipo de redirecionamento que tem no Django. Mas não compreendo muito bem o que ele faz. Mesmo assim, segue o código para caso alguém tenha a mesma dúvida.


return HttpResponsePermanentRedirect(reverse('filtro_presenca'))

Fala Raul, fico feliz que tenha resolvido o problema.

Não manjo de Django, mas, olhando a documentação o reverse permite você realizar redirecionamentos via o nome da rota, no caso, o nome da sua rota seria filtro_presenca.

Sempre que precisar não deixe de criar suas dúvidas.

Abraços e bons estudos.

Aparentemente resolvido hahaha testei 5 vezes e não deu o erro. Vamos ver se continua assim. Muito obrigado pela ajuda.