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

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 make the register button, I tried it with input and the submit type, but it goes to the login.php page too, how to make it go to another page?

Answer:

You have two options:

  • change action with JavaScript and submit via JavaScript
  • change action with added formaction 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 also changed id to 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/

In this way the input element itself rewrites the form's action .

note:

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

Scroll to Top