Use the id of two different pages in Jquery

Navigation
0

I have 2 HTML pages and each one has buttons, on the second page there are several text boxes and I would like that when the user clicks on the first HTML page he will go to the second page and hide the button;

Then when all fields in the text box are filled, the button reappears. 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: I want to use Jquery to hide the button with id="concluir" that is in the 2nd page, when I press the button with id="criar" that is in the 1st page and that the button with id="concluir" only appears when all the inputs of the second page are completed.

    
asked by anonymous 24.11.2016 / 21:26

1 answer

1

You can use window.location with hash location ;

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

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

If so, add an event-listener for changes to the input all of the page. If the number of inputs equals the number of inputs that contains a value then all are filled.

Here's 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>
    
24.11.2016 / 22:55
Disable line break when pressing enter with javascript jquery validate not valid within modal bootstrap