[Resolvido] Campos com mesmo nome em um formulário javascript

Gilsoney · Dezembro 21, 2017

Calma, parece loucura, mas o que eu quero tem uma lógica.

Gostaria de saber se tem como eu tratar vários campos de maneiras diferentes em um mesmo formulário com todos os campos com o mesmo nome.

Eu tenho um código que muda a cor de fundo do formulário de acordo com o que o usuário digita: Se ele digitar "OK" fica verde, se digitar "ATRASO" fica vermelho. Porém, eu quero que esse formulário tenha vários campos com o mesmo nome, mas mude a cor de cada um de acordo com o conteúdo. Segue o código do meu formulário funcionando para apenas 1 campo, FUNCIONANDO.

<html>
<head>
<script type="text/javascript"> 
function verifica() {
var campo = document.nomeform; 
if(campo.sta.value == "OK"){ 
document.getElementById("sta").style.background = "green"; 
document.getElementById("sta").style.color = "white";   
}
if(campo.sta.value == "ATRASO"){ 
document.getElementById("sta").style.background = "red"; 
document.getElementById("sta").style.color = "white";  
}
}
</script> 
</head>
<body>
<table border="1">
<form name="nomeform" id="for" action="#.html">
<tr>
<td>
<center>Status
</td>
</tr>
<tr>
<td>
<input type="text" name="sta" value=""  id="sta" style="font-weight: bold; text-align:center " onkeyup="verifica()">
</td>
</tr>
</table>
<input type="submit" value="Confirma">
</form>
</body>
</html>

Eu quero adicionar vários campos com o mesmo nome, mas que a cor mude em cada um de acordo com o preenchimento. Como seria:

<html>
<head>
<script type="text/javascript"> 
function verifica() {
var campo = document.nomeform; 
if(campo.sta.value == "OK"){ 
document.getElementById("sta").style.background = "green"; 
document.getElementById("sta").style.color = "white";   
}
if(campo.sta.value == "ATRASO"){ 

document.getElementById("sta").style.background = "red"; 
document.getElementById("sta").style.color = "white";  
}
}
</script> 
</head>
<body>

<table border="1">
<form name="nomeform" id="for" action="#.html">
<tr>
<td>
<center>Status
</td>
<td>
<center>Status 1
</td>
<td>
<center>Status 2
</td>
</tr>
<tr>
<td>
<input type="text" name="sta" value=""  id="sta" style="font-weight: bold; text-align:center " onkeyup="verifica()">
</td>
<td>
<input type="text" name="sta" value=""  id="sta" style="font-weight: bold; text-align:center " onkeyup="verifica()">
</td>
<td>
<input type="text" name="sta" value=""  id="sta" style="font-weight: bold; text-align:center " onkeyup="verifica()">
</td>
</tr>
</table>
<input type="submit" value="Confirma">
</form>
</body>
</html>

gRoOvE · Dezembro 23, 2017

É incorreto ter mais de um elemento com o mesmo ID no documento, não faça isso pois pode ter problemas graves.

Sugiro que você passe o elemento pela function, dentro da function você obtem ele e trabalha em cima.

Utilize onchange no lugar do onkeyup, pois se utilizar o último a cada caractere digitado será acionado a function, acredito que não seja isso que deseja.

Algo assim:

function verifica(elemento) {
	if(elemento.value == "OK"){ 
	document.getElementById("sta").style.background = "green"; 
	document.getElementById("sta").style.color = "white";   
}

<input type="text" name="sta" value=""  id="sta" style="font-weight: bold; text-align:center " onchange="verifica(this)">

Gilsoney · Dezembro 26, 2017

Perdão, eu expliquei errado. Será o mesmo form repetido várias vezes na mesma página, por exemplo, eu vou listar todos os registros que estiverem em uma tabela e vou exibi-los através de um form que se repetirá várias vezes na página, de acordo com a quantidade de clientes. Se o cliente estiver com status "OK" quero que o campo do formulário receba a formatação a cima. Com apenas um registro no banco ele aplica a formatação, para vários, não.

Eziquiel · Dezembro 26, 2017

Olá...

Aconselho fazer uso do CSS para estilizar seus elementos e jQuery para manipulá-los.

Fiz um exemplo funcional para você ver como funciona e estudar.

Em vez de id="sta" eu utilizo class="sta".

<html>
  <head>
    
    <style>
      .sta{
        font-weight: bold; 
        text-align:center;
        text-transform: uppercase;
      }
      .sta.ok{
        background: green;
        color: white;
      }
      .sta.atraso{
        background: red;
        color: white;
      }
    </style>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript"> 
      $(document).ready(function(){
        $('.sta').change(function(){
          $(this).toggleClass('ok',     $(this).val().toUpperCase() == "OK"    );
          $(this).toggleClass('atraso', $(this).val().toUpperCase() == "ATRASO");
        });
      });
    </script> 
    
  </head>
<body>

<table border="1">
<form name="nomeform" id="for" action="#.html">
<tr>
<td>
<center>Status
</td>
<td>
<center>Status 1
</td>
<td>
<center>Status 2
</td>
</tr>
<tr>
<td>
<input type="text" name="sta" value="" class="sta"/>
</td>
<td>
<input type="text" name="sta" value="" class="sta"/>
</td>
<td>
<input type="text" name="sta" value="" class="sta"/>
</td>
</tr>
</table>
<input type="submit" value="Confirma"/>
</form>
</body>
</html>

Gilsoney · Dezembro 26, 2017

Mano, está funcionando em parte, obrigado. Mas como eu faço para mudar de cor após digitar o texto, ele está mudando de cor apenas quando sai do input. Eu quero que após o texto ser digitado igual ao da função, ele mude de cor, tipo um onkeyup.

William Bruno · Dezembro 26, 2017

mude de

 $('.sta').change(function(){

para

 $('.sta').on('keyup', function(){

Gilsoney · Dezembro 26, 2017

39 minutos atrás, William Bruno disse:
mude de
 $('.sta').change(function(){
para
 $('.sta').on('keyup', function(){

Fiz isso, mas só está mudando a cor quando aperta TAB ou muda de campo com o mouse.

gRoOvE · Dezembro 26, 2017

3 horas atrás, Gilsoney disse:

Fiz isso, mas só está mudando a cor quando aperta TAB ou muda de campo com o mouse.

Testei aqui da forma qu e o William mostrou e funcionou blz, verifica se não digitou algo errado ai, ve no console também.

Gilsoney · Dezembro 27, 2017

12 horas atrás, gRoOvE disse:

Testei aqui da forma qu e o William mostrou e funcionou blz, verifica se não digitou algo errado ai, ve no console também.

Ok, vou tentar.

Gilsoney · Dezembro 27, 2017

15 horas atrás, Gilsoney disse:

Fiz isso, mas só está mudando a cor quando aperta TAB ou muda de campo com o mouse.

Realmente, eu estava digitando algo errado. Obrigado, tudo certo!

Gilsoney · Dezembro 27, 2017

Pessoal, obrigado pelas respostas de vocês, me ajudou muito. Porém, pensei que esta solução iria se adaptar ao meu problema mas pelo visto fiz a pergunta errada. Não sei se devo reabrir o tópico ou deixar como resolvido e perguntar aqui mas lá vai. No meu sistema, eu busco vários registros de uma tabela e esses registros aparecem para mim em um formulário o retorno da consulta é um form, como o citado a cima, mas com apenas um campo chamado status. Como eu faria para esse campo mudar de cor de acordo com o preenchimento em cada formulário. Por exemplo: eu tenho 3 registros na minha tabela (ou seja, o resultado será 3 forms com o mesmo nome e os mesmos campos, já que ele vai repetir os forms do resultado e mudar apenas o preenchimento do input, que pode variar de "OK" ou "ATRASO"). Quando a busca trazer os 3 registros: Ex: Registro 1: campo "status" = "OK", Registro 2: campo "status" = "ATRASO", Registro 3: campo "status" = "OK". Eu gostaria que o campo mudasse de cor para cada formulário, de acordo com o preenchimento dos inputs de cada um.

Gilsoney · Dezembro 27, 2017

7 horas atrás, Gilsoney disse:

Pessoal, obrigado pelas respostas de vocês, me ajudou muito. Porém, pensei que esta solução iria se adaptar ao meu problema mas pelo visto fiz a pergunta errada. Não sei se devo reabrir o tópico ou deixar como resolvido e perguntar aqui mas lá vai. No meu sistema, eu busco vários registros de uma tabela e esses registros aparecem para mim em um formulário o retorno da consulta é um form, como o citado a cima, mas com apenas um campo chamado status. Como eu faria para esse campo mudar de cor de acordo com o preenchimento em cada formulário. Por exemplo: eu tenho 3 registros na minha tabela (ou seja, o resultado será 3 forms com o mesmo nome e os mesmos campos, já que ele vai repetir os forms do resultado e mudar apenas o preenchimento do input, que pode variar de "OK" ou "ATRASO"). Quando a busca trazer os 3 registros: Ex: Registro 1: campo "status" = "OK", Registro 2: campo "status" = "ATRASO", Registro 3: campo "status" = "OK". Eu gostaria que o campo mudasse de cor para cada formulário, de acordo com o preenchimento dos inputs de cada um.

Na verdade, testei o código e vi que funciona para vários forms na mesma página, porém no meu sistema que não está funcionando, então é algo que estou deixando passar. Obrigado a todos que me ajudaram.

Eziquiel · Dezembro 27, 2017

Fiquei na dúvida se estes inputs serão preenchidos automaticamente durante o retorno da busca. Se for isso, então o procedimento é outro. Caso você ainda queira manter o procedimento de alterar a cor do <input> conforme o usuário for digitando, e se estes inputs forem criados em tempo de execução (o que parece ser), então substitua esta linha:

 $('.sta').on('keyup', function(){

por esta:

$(document).on("keyup",".sta",function(){

Eziquiel · Dezembro 27, 2017

Caso os inputs criados após o retorno da busca já venham preenchidos com "OK" ou "ATRASO", então você pode fazer com que o cada input receba no seu atributo class o seu respectivo status. O que quero dizer é que o retorno da sua busca já retorne cada input com sua classe definida. Por exemplo:

Se o status for "OK", faça com que a busca já retorne o input com a classe "ok" atribuída a ele:

<input type="text" name="sta" value="" class="sta ok"/>

Se o status for "ATRASO", faça com que a busca já retorne o input com a classe "atraso" atribuída a ele:

<input type="text" name="sta" value="" class="sta atraso"/>

Entendeu? Nesse caso você precisa criar uma condição no seu script que retorna esta busca.

Gilsoney · Dezembro 28, 2017

14 horas atrás, Eziquiel disse:
Caso os inputs criados após o retorno da busca já venham preenchidos com "OK" ou "ATRASO", então você pode fazer com que o cada input receba no seu atributo class o seu respectivo status. O que quero dizer é que o retorno da sua busca já retorne cada input com sua classe definida. Por exemplo:

Se o status for "OK", faça com que a busca já retorne o input com a classe "ok" atribuída a ele:
<input type="text" name="sta" value="" class="sta ok"/>
Se o status for "ATRASO", faça com que a busca já retorne o input com a classe "atraso" atribuída a ele:
<input type="text" name="sta" value="" class="sta atraso"/>
Entendeu? Nesse caso você precisa criar uma condição no seu script que retorna esta busca.

É exatamente isso, os inputs virão preenchidos. Você tem alguma dica de como eu faria essa condição para a class? Veja minha consulta. O campo "status_pagamento" é o campo "status" que usei neste tópico. (Por favor, perdoe a falta de identação).

<html xmlns="http://www.w3.org/1999/xhtml">
<head>  
 <title>Status</title> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript"> 
      $(document).ready(function(){
        $('.status_pagamento').on('keyup', function(){
          $(this).toggleClass('ok',     $(this).val().toUpperCase() == "OK"    );
          $(this).toggleClass('atraso', $(this).val().toUpperCase() == "ATRASO");
        });
      });
    </script>
	  <style>
      .status_pagamento{
        font-weight: bold; 
        text-align:center;
        text-transform: uppercase;
      }
      .status_pagamento.ok{
        background: green;
        color: white;
      }
      .status_pagamento.atraso{
        background: red;
        color: white;
      }
    </style>
 </head> 
 <body>
<?php
try {
	$pdo = new PDO( 'mysql:host=localhost;dbname=bd' , 'user' , 'senha' );
	$pdo->setAttribute( PDO::ATTR_ERRMODE , PDO::ERRMODE_EXCEPTION );	
	$stm = $pdo->prepare( "SELECT * FROM `cliente` ORDER BY nome" );
	$stm->bindParam( ':apelido' , $usuario , PDO::PARAM_STR );
	if ( $stm->execute() ) {		
		foreach ( $stm->fetchAll( PDO::FETCH_OBJ ) as $usuario ) {
          //A PARTIR DE AQUI, O CÓDIGO QUE VAI EXIBIR OS RESULTADOS EM UM FORM
		echo "<table width='auto'  cellspacing='1' cellpadding='0' bgcolor='white' layout='fixed' border='1'>
  <tr>
	 <td width='auto' ><font color='blue' size='2'><center><b>STATUS</td>	  
  </tr>  
  <t
  <form name='cli'  action='confirmar.php' method='post'>  		//STATUS EXIBIDO AQUI, PODE SER: OK OU ATRASO
    <td><center><input type='text' class='status_pagamento'  name='status_pagamento'  value='$usuario->status_pagamento'></td> 
	</form>
  </tr>  
</table>
</fieldset>";	
		} 
	}		
} catch ( PDOException $e ) {
	var_dump( $e->getMessage() );	
} 
?>	
</body>
</html>

Eziquiel · Janeiro 1, 2018

Olá. Segue uma das maneiras.

Antes do echo "<table... defina uma variavel conforme abaixo:

$classe_status = strtolower($usuario->status_pagamento);

Aqui convertemos a descrição "OK" ou "ATRASO" para minúsculo, que será exatamente as classes que utilizamos. Essa variável será atualuzada a cada registro lido, antes de criar (retornar) o elemento input.

Agora, inclua o conteúdo dessa variavél na parte onde a classe do elemento é definida. Exemplo.

class='status_pagamento $classe_status'

Gilsoney · Janeiro 2, 2018

Em 01/01/2018 at 07:54, Eziquiel disse:
Olá. Segue uma das maneiras.

Antes do echo "<table... defina uma variavel conforme abaixo:

$classe_status = strtolower($usuario->status_pagamento);

Aqui convertemos a descrição "OK" ou "ATRASO" para minúsculo, que será exatamente as classes que utilizamos. Essa variável será atualuzada a cada registro lido, antes de criar (retornar) o elemento input.

Agora, inclua o conteúdo dessa variavél na parte onde a classe do elemento é definida. Exemplo.
class='status_pagamento $classe_status'

Eu fiz, ficou assim, porém não alterou nada :(

<html xmlns="http://www.w3.org/1999/xhtml">
<head>  
 <title>Status</title> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript"> 
      $(document).ready(function(){
        $('.status_pagamento').on('keyup', function(){
          $(this).toggleClass('ok',     $(this).val().toUpperCase() == "OK"    );
          $(this).toggleClass('atraso', $(this).val().toUpperCase() == "ATRASO");
        });
      });
    </script>
	  <style>
      .status_pagamento{
        font-weight: bold; 
        text-align:center;
        text-transform: uppercase;
      }
      .status_pagamento.ok{
        background: green;
        color: white;
      }
      .status_pagamento.atraso{
        background: red;
        color: white;
      }
    </style>
 </head> 
 <body>
<?php
try {
	$pdo = new PDO( 'mysql:host=localhost;dbname=bd' , 'user' , 'senha' );
	$pdo->setAttribute( PDO::ATTR_ERRMODE , PDO::ERRMODE_EXCEPTION );	
	$stm = $pdo->prepare( "SELECT * FROM `cliente` ORDER BY nome" );
	$stm->bindParam( ':apelido' , $usuario , PDO::PARAM_STR );
	if ( $stm->execute() ) {		
		foreach ( $stm->fetchAll( PDO::FETCH_OBJ ) as $usuario ) {
          $classe_status = strtolower($usuario->status_pagamento);
          //A PARTIR DE AQUI, O CÓDIGO QUE VAI EXIBIR OS RESULTADOS EM UM FORM
          
		echo "<table width='auto'  cellspacing='1' cellpadding='0' bgcolor='white' layout='fixed' border='1'>
  <tr>
	 <td width='auto' ><font color='blue' size='2'><center><b>STATUS</td>	  
  </tr>  
  <t
  <form name='cli'  action='confirmar.php' method='post'>  		//STATUS EXIBIDO AQUI, PODE SER: OK OU ATRASO
    <td><center><input type='text' class='status_pagamento $classe_status'  name='status_pagamento'  value='$usuario->status_pagamento'></td> 
	</form>
  </tr>  
</table>
</fieldset>";	
		} 
	}		
} catch ( PDOException $e ) {
	var_dump( $e->getMessage() );	
} 
?>	
</body>
</html>

Gilsoney · Janeiro 9, 2018

Seria assim mesmo? Alguém pode me responder?

Eziquiel · Janeiro 9, 2018

Olá....

Execute o código que lhe passei, e depois entre no navegador (modo inspecionar) e verifique se foi adicionado a classe "ok" ou "atraso" ao seu input. Depois me diga.

Gilsoney · Janeiro 10, 2018

23 horas atrás, Eziquiel disse:

Olá....

Execute o código que lhe passei, e depois entre no navegador (modo inspecionar) e verifique se foi adicionado a classe "ok" ou "atraso" ao seu input. Depois me diga.

Ok.

Arquivado

[Resolvido] Campos com mesmo nome em um formulário javascript

Recommended Posts

Gilsoney 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

gRoOvE 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Gilsoney 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Eziquiel 96

Compartilhar este post

Link para o post

Compartilhar em outros sites

Gilsoney 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Gilsoney 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

gRoOvE 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Gilsoney 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Gilsoney 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Gilsoney 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Gilsoney 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Eziquiel 96

Compartilhar este post

Link para o post

Compartilhar em outros sites

Eziquiel 96

Compartilhar este post

Link para o post

Compartilhar em outros sites

Gilsoney 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Eziquiel 96

Compartilhar este post

Link para o post

Compartilhar em outros sites

Gilsoney 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Gilsoney 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Eziquiel 96

Compartilhar este post

Link para o post

Compartilhar em outros sites

Gilsoney 1