Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Biel.

como deixar input type submit ativo quando o mesmo receber um click.

Por , em Desenvolvimento frontend

Recommended Posts

Biel.    9

Biel.
Postado
Boa noite a todos. Pessoal como deixar input type submit ativo quando o mesmo receber um click.
Tipo: tenho três botões abaixo do tipo submit:
botao1
botao2
botao3
gostaria que quando o botao1 recebesse um click ele ficasse ativo.

Em seguida eu clico no botao2, então o botao1 ficará normal e o botao2 ativo e assim por diante.

 

Se alguém conheçe alguma solução em jquery, ajax qualquer coisa é bem vindo. Estou no sufoco gente.

Já rodei a internet toda e consegui achar nada. Obrigado!

 

<form action="formulario.php" method="post" name="tetete" id="myForm">

        <input type="submit" name="a" id="x" value="botao1" />
        <input type="submit" name="b" id="x" value="botao2" />
        <input type="submit" name="c" id="x" value="botao3" />


</form>

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

Biel.    9

Biel.
Postado

Como assim ativo? Explique melhor o que você quer. Qual a razão dos 3 botões?

Tipo: o botao está normal certo? quando ele recebe um clique, fica com fundo vermelho e letra branca por exemplo. e pemanece assim até você clicar em outro botão. Abaixo fizemos um efeito com os botões, mas não consegui deixar ativo quando o mesmo recebe um clique.

 

gostaria que quando o botao1 recebesse um click ele ficasse ativo.

Em seguida eu clico no botao2, então o botao1 ficará normal e o botao2 ativo e assim por diante. 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Documento sem título</title>
<style type="text/css">

input.tete {
	padding:3px 3px 3px 3px; color:#333; background:#FC9; 
	font-size:14px; font-weight:bold; 
	}

input.tete:visited {
	color:#333; background:#FC9; 
	}

input.tete:hover {
color:#333; background:#FC9;
}

input.tete:active {
color:#FFF; background:#900;
}

input.tete:ativo {
color:#FFF; background:#900;
}

</style>

</head>

<body>

<input type="submit" name="naomecher" id="a" value="botao1" class="tete"  />
<input type="submit" name="naomecher" id="a" value="botao2" class="tete" />
<input type="submit" name="naomecher" id="a" value="botao3" class="tete"/></td>

</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Rafael Rosario    4

Rafael Rosario
Postado

Cara, tem que ter uma classe pra cada botão.

 

class='teste1'

 


class='teste2'

class='teste3'
Obs: ID's são únicos, nunca duplica em elementos diferentes.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Biel.    9

Biel.
Postado

 

Cara, tem que ter uma classe pra cada botão.

 

class='teste1'

 

 

class='teste2'

class='teste3'
Obs: ID's são únicos, nunca duplica em elementos diferentes.

Rafael entendo! Tudo que eu quero é que o botão fique ativo, nada mais!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Rafael Rosario    4

Rafael Rosario
Postado

Veja se é isso:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Documento sem título</title>
<style type="text/css">

input.tete {
	padding:3px 3px 3px 3px; color:#333; background:#FC9; 
	font-size:14px; font-weight:bold; 
	}

input.tete:visited {
	color:#333; background:#FC9; 
	}

input.tete:hover {
color:#333; background:#FC9;
}

.teteAtivo
{
  padding:3px 3px 3px 3px; color:#333; background:#FC9; 
	font-size:14px; font-weight:bold; 
  color:#FFF; background:#900;
}
</style>

<script src="http://code.jquery.com/jquery-latest.js"></script>

</head>

<body>

<input type="submit" name="naomecher" id="teste" value="botao1" class="tete" />

<script type='text/javascript'>

  $("#teste").click(function(){
    $(this).removeClass('tete');
    $(this).addClass('teteAtivo');
});

</script>

</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Biel.    9

Biel.
Postado

 

Veja se é isso:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Documento sem título</title>
<style type="text/css">

input.tete {
	padding:3px 3px 3px 3px; color:#333; background:#FC9; 
	font-size:14px; font-weight:bold; 
	}

input.tete:visited {
	color:#333; background:#FC9; 
	}

input.tete:hover {
color:#333; background:#FC9;
}

.teteAtivo
{
  padding:3px 3px 3px 3px; color:#333; background:#FC9; 
	font-size:14px; font-weight:bold; 
  color:#FFF; background:#900;
}
</style>

<script src="http://code.jquery.com/jquery-latest.js"></script>

</head>

<body>

<input type="submit" name="naomecher" id="teste" value="botao1" class="tete" />

<script type='text/javascript'>

  $("#teste").click(function(){
    $(this).removeClass('tete');
    $(this).addClass('teteAtivo');
});

</script>

</body>
</html>

Rafael obrigado! Tarefa resolvida.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito