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.