How to include an action in the button to register with HTML5?

4

I have the following code:

<form action="paginas/login.php">
    <p id="log">Usuário: </p> <input id="cmpG" type="text" name="usuario"/>
    <p id="log">Senha: </p> <input id="cmpG" type="password" name="senha" size=8 maxlength=8/>
    <p id="log">A senha deve conter 08 caracteres (alfanumerico)</p>
    <!-- Barra de botões -->
    <div id="barra">
        <input id="bnt" type="submit" value="Login"/>
        <input id="bnt" type="reset" value="Limpar"/>
        <BUTTON >Cadastrar</BUTTON>
    </div>
</form>

Well, I do not know how to do the register button, I tried with input and type submit , but it goes to login.php page too, how do I make it go to another page? >     

asked by anonymous 06.09.2015 / 02:41

2 answers

5

You have two options:

  • change action with JavaScript and make submit via JavaScript
  • change action with formaction added in HTML5 (IE9 +)

Either way you can have two submit buttons:

<div id="barra">
    <input class="bnt" name="" type="submit" value="login"/>
    <input class="bnt" type="submit" value="cadastrar"/>
    <input class="bnt" type="reset" value="Limpar"/>
</div>

Notice that I've also changed id to class since IDs have to be unique.

using JavaScript:

var form = document.querySelector('form');
var inputDiv = document.getElementById('barra');
var urls = {
    cadastrar: 'paginas/cadastro.php',
    login: 'paginas/login.php'
};
function verificarDestino(e){
    e.preventDefault();
    console.log(e.target);
    var tipo = e.target.value;
    var url = urls[tipo];
    form.action = url;
    alert(url); // só para verificar
    form.submit();
}
inputDiv.addEventListener('click', verificarDestino);

jsFiddle: link

using HTML5

<div id="barra">
    <input class="bnt" type="submit" value ="Login" formaction="paginas/login.php"/>
    <input class="bnt" type="submit" value ="Cadastrar" formaction="paginas/cadastro.php"/>
    <input class="bnt" type="reset" value="Limpar"/>
</div>

jsFiddle: link

In this way the input element itself re-writes the action of the form.

Note:

In my answer I use input but if you want to use button the logic is the same and formaction is used in the same way too.

    
06.09.2015 / 09:04
3

Or you have to do:

<form action="paginas/login.php">
    <p id="log">Usuário: </p> <input id="cmpG" type="text" name="usuario"/>
    <p id="log">Senha: </p> <input id="cmpG" type="password" name="senha" size=8 maxlength=8/>
    <p id="log">A senha deve conter 08 caracteres (alfanumerico)</p>
    <!-- Barra de botões -->
    <div id="barra">
        <input id="bnt" type="submit" value="Login"/></a>
        <input id="bnt" type="reset" value="Limpar"/>
    </div>
</form>
<form action="paginas/cadastrar.php">
    <BUTTON >Cadastrar</BUTTON>
</form>

Or use a onclick event to give a custom action on it. Taking advantage of your own code would look something like this:

<BUTTON onclick="window.location.href='paginas/cadastrar.php'">Cadastrar</BUTTON>

Maybe you want to do it differently but I gave you an example in a simplified way.

    
06.09.2015 / 03:00