How to hide an input field from another page through javascript?

Asked

Viewed 269 times

2

Setting

I have two pages .html. On one of the pages I have two options of brand radio both have id, are they XPTO and YPTO e. What I need to do is, when choosing XPTO and then press the button register, he has to disable a field on the other page.

In my example the field is called Surname, for this I was using a condition in the javascript If document.getElementById("xpto").textContent for this element, on the other page the field Surname vanishes.

Is there any way to do that, even though I’m going to another page next?

My codes below:

PAGE 1: test.html

<body>
    <table border="1">
        <tbody>
            <tr>
                <td><input type="radio"></td>
                <td><input type="radio"></td>
            </tr>
            <tr>
                <td id="xpto">XPTO</td>
                <td id="ypto">YPTO</td>
            </tr>
        </tbody>
    </table>        
    <br /><br />
    <button><a href="test2.html" onclick="disableSobrenome()">CADASTRAR</a></button>
</body>

PAGE 2: test2.html

<body>   


    <form>
        Nome:
        <input type="text" id="nome">
        Sobrenome:
        <input type="text" id="sobrenome">
    </form>

    <a href="test.html">VOLTAR</a>
</body>

Script.js:

function disableSobrenome() {

    if (document.getElementById("xpto").textContent)
    {
        document.getElementById("sobrenome").style.display='none';
    }
}
javascript html5
  • 2

    http://answall.com/a/89350/23400 might help...

  • 1

    @gustavox, thank you, using this article you quoted, I was able to mix with the solution presented on the page, +1.

1 answer

2

test.html:

<body>
    <form action="test2.html" method="get"> <!-- FORMULÁRIO SEMPRE UMA BOA OPÇÃO-->
        <table border="1">
            <tbody>
                <tr>
                    <td><input name="opcao" value="xpto" type="radio"></td> <!-- EM RADIO SEMPRE COLOQUE O MESMO NOME E UM VALOR PARA EVITAR MARCAR DOIS -->
                    <td><input name="opcao" value="ypto" type="radio"></td>
                </tr>
                <tr>
                    <td id="xpto">XPTO</td>
                    <td id="ypto">YPTO</td>
                </tr>
            </tbody>
        </table>        
        <br/><br/>
        <button type="submit">CADASTRAR</button> <!-- BOTÃO TENDE A TER AÇÃO PARA FORMULÁRIO -->
    </form>
</body>

test2.html:

<body>   
    <form>
        <p id="nome">Nome:</p> <!-- COLOQUE IDENTIFICADORES EM TUDO -->
        <input type="text" id="nomeInput">
        <p id="sobrenome">Sobrenome:</p>
        <input type="text" id="sobrenomeInput">
    </form>

    <a href="test.html">VOLTAR</a>
</body>

<script>
    var url   = window.location.search.replace("?", ""); //pega url
    var itens = url.split("&"); //separa onde tem o parametro
    var valor = itens[0].slice(6); // 6 pois opcao= tem 6 caracteres
    if(valor == "xpto")
    {
        document.getElementById("sobrenomeInput").style.display='none';
        document.getElementById("sobrenome").style.display='none';
    }
</script>

  • thanks for another exemplary help, your example is perfect, but I can’t use <form> it has to be <a>, but using your example I can try to find some alternative solution, such as using localStorage.

  • 1

    You can use link (a) with form, just put it with type Submit

  • 1

    Boy, one more thing I didn’t know, rs. But even though I can’t use <form>, it has to be without the <form> tag, I can only use <a>.

  • 1

    using your code and more of this http://answall.com/a/89350/23400, I was able to solve my problem, thanks, +1.

Browser other questions tagged javascript html5

You are not signed in. Login or sign up in order to post.