How to include an action in the HTML5 sign-up button?

Question

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 don’t know how to do the sign-up button, I tried with input and kind submit, but it goes to the page login.php also, how to make it go to another page?

Answer 1

You have two options:

• change the action with Javascript and make Submit via Javascript
• change the action with the 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 I’ve changed too id for class because 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: http://jsfiddle.net/4zveq0y4/

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: http://jsfiddle.net/4zveq0y4/2/

This way the input element itself re-writes the action form.

Note:

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

Answer 2

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 an event onclick to give him a personalized action. Taking advantage of his own code would be something like this:

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

I put in the Github for future reference.

Maybe you want to do it another way but I’ve given you a simplified example.