Use the id of two different pages in Jquery

Question

I have 2 HTML pages and each one has buttons, in the second page has several text boxes and intended that when the user presses the button of the first HTML page he directs to the second page and hides the button;

then when all fields in the text box are filled in the button will appear again. I already have this.

Page 1:

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

Page 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>

That is to say: intend to use Jquery to hide the button with id="concluir" which is on the second page when I press the button with id="criar" that is on the first page and that the button with id="concluir" appears only when all inputs of the second page are completed.

Answer 1

You can use the window.location with hash Location;

When the user clicks on the button criar he changes the href to have a hashtag "create".

On the second page, you make a onDomReady with jQuery ($(function(){}) and within that function you will see if the window.location.hash contains the word you want.

If yes, add an Event-Listener input page. If the number of inputs is equal to the number of inputs containing a value then all are filled.

Follow an example

(page 1)

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

(page 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>