0

Eu tenho 2 paginas HTML e cada uma tem botões, na segunda pagina tem varias caixas de texto e pretendia que quando o user carrega no botão da primeira pagina HTML ele direcione para a segunda pagina e esconda o botão;

depois quando todos os campos da caixa de texto estiverem preenchidos o botão volta a aparecer. Para já tenho isto.

Pagina 1:

<a href="Pagina2.html">
    <button type="button" id="criar">Criar plano de estudo</button>
</a>

Pagina 2 :

 <input type="text" name="nome" id="antecedencia" placeholder="Dias de antecedencia">
 <input type="date" id="datadometodo" ><br><p></p>
 <div id="disciplina"> </div> 

 <input type="text" name="nome" id="duracaopordia" placeholder="Duração em horas"/><br><p></p>

<input type="text" name="nome" id="metododeavaliaçao" placeholder="Nome do método"/><br><p></p>

<a href="Pagina1.html"> 
    <button type="button" id="concluir">Concluir</button>
</a>

Ou seja: pretendo usar Jquery para esconder o botão com id="concluir" que está na 2º pagina, quando carrego no botão com id="criar" que está na 1º pagina e que o botão com id="concluir" só apareça quando todos os inputs da segunda pagina estiverem preenchidos.

1 Resposta 1

1

Podes usar a window.location com hash location;

Quando o user clica no butão criar ele muda o href para ter uma hashtag "criar".

Na segunda página, fazes um onDomReady com o jQuery ($(function(){}) e dentro dessa função vais ver se a window.location.hash contém a palavra que queres.

Se sim, adiciona um event-listener aprocura de mudanças nos input todos da página. Se o numero de inputs for igual ao numero de inputs que contém um value então todos estão preenchidos.

Segue um exemplo

(pagina 1)

<button id="criar">criar plano</button>
...
<script>
$('#criar').on('click', function() { window.location.href = "/#/criar" });
</script>

(pagina 2)

...o teu html...
<script>
$(function() {
    if (window.location.hash.indexOf('criar') > 0) {
        var endFormButton = $('#concluir');
        var allInputs = $('input');
        endFormButton.hide()
        $('input').on('change', function() {
            var numberOfInputs = allInputs.length;
            var numberOfEmptyInputs = numberOfInputs;
            allInputs.each(function(i, ele) {
                if (ele.value) numberOfEmptyInputs--;
            })
            if (numberOfEmptyInputs <= 0) endFormButton.show()
        })
    }
})
</script>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .