Ir para conteúdo

Arquivado

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

Gilsoney

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

Recommended Posts

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>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

É 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)">

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

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>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

 

 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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

mude de

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

para

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

Compartilhar este post


Link para o post
Compartilhar em outros sites
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.

Compartilhar este post


Link para o post
Compartilhar em outros sites
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.

Compartilhar este post


Link para o post
Compartilhar em outros sites
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.

Compartilhar este post


Link para o post
Compartilhar em outros sites
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!

Compartilhar este post


Link para o post
Compartilhar em outros sites

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. 

Compartilhar este post


Link para o post
Compartilhar em outros sites
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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

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(){

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

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.

Compartilhar este post


Link para o post
Compartilhar em outros sites
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>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

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'

Compartilhar este post


Link para o post
Compartilhar em outros sites
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>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

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.

Compartilhar este post


Link para o post
Compartilhar em outros sites
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. 

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por ILR master
      Pessoal, pergunta bem simples. Abaixo tenho o seguinte código:
       
      <script>
      function alerta()
      {
        if (window.confirm("Você realmente quer sair?")) {
          window.open("sair.html");
      }
      }
      </script>
       
      Funciona perfeitamente, só que está abrindo em outra janela e quero que abra na mesma janela.
       
      Alguém pode me ajudar?
    • Por Jack Oliveira
      Ola pessoal boa tarde
      estou tentando fazer um texto se mover dentro do input porem nao esta dando resultado que preciso
       
      Este é o codigo 
      <script type="text/javascript"> $(document).ready(function () { var frases = [{ 'elemento': $('input[name=search_string]'), 'frases': ["O que você está procurando?", "Buscar por: Academia, Barbearia, Churrascaria, Decoração, Escola, Farmácia, Gráfica, Imobiliaria, Lanchonete, Mecânica, Odontologia, Pizzaria...", "Faça sua busca por segmentos aqui.", "São mais de 3mil empresas para serem exploradas."] }]; animaInput(frases); }); </script>  
    • Por Rengavitp
      Boa noite pessoal!
       
      Estou fazendo um projeto web com spring boot e é a primeira vez que lido com imagens. Minha idéia é salvar imagens em uma pasta e depois recuperar essa imagem e mostrar, mas o problema que estou enfrentando é o seguinte, seu eu envio para o src do projeto na pasta imagens, eu até consigo acessar as imagens, mas preciso atualizar o projeto na IDE (isso vai acontecer em produção?) eu tentei salvar em uma pasta fora do source do projeto mas ai não consigo acessar. como devo fazer? fiz várias pesquisas, mas nenhuma me ajudou.
       
      Desde já agradeço.
    • Por Rengavitp
      Bom dia pessoal!

      Estou com o seguinte problema, tenho uma aplicação que funciona perfeitamente rodando na minha IDE (Spring Tool Suite) mas ao gerar o arquivo war e subir a aplicação no tom cat ele não funciona, mas apenas erro 404, abri o war e todos os arquivo estão lá, já tem seguir tudo quando e tutorial com problemas semelhantes mas nenhum resolveu. Abaixo mais informações,.

      Versão do java na aplicacao 11
      Versão do jva no servidor 11
      Versão do tomcat no servidor 8.5.55
       
      minha classe principal
      package br.com.masterplastfitas; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.boot.builder.SpringApplicationBuilder; import org.springframework.boot.web.servlet.support.SpringBootServletInitializer; @SpringBootApplication public class MasterApplication extends SpringBootServletInitializer { public static void main(String[] args) { SpringApplication.run(MasterApplication.class, args); } @Override protected SpringApplicationBuilder configure(SpringApplicationBuilder builder) { return builder.sources(MasterApplication.class); } } meu pom.xml
      <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>2.7.2</version> <relativePath /> <!-- lookup parent from repository --> </parent> <groupId>masterplast</groupId> <artifactId>Master</artifactId> <version>2.0</version> <packaging>war</packaging> <name>Master</name> <description>Aplicação web </description> <properties> <java.version>11</java.version> </properties> <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-jdbc</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-mail</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-devtools</artifactId> <scope>runtime</scope> <optional>true</optional> </dependency> <dependency> <groupId>com.microsoft.sqlserver</groupId> <artifactId>mssql-jdbc</artifactId> <scope>runtime</scope> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-test</artifactId> <scope>test</scope> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-security</artifactId> </dependency> <dependency> <groupId>org.springframework.security</groupId> <artifactId>spring-security-test</artifactId> <scope>test</scope> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> <dependency> <groupId>org.thymeleaf.extras</groupId> <artifactId>thymeleaf-extras-springsecurity5</artifactId> </dependency> <dependency> <groupId>org.mindrot</groupId> <artifactId>jbcrypt</artifactId> <version>0.4</version> </dependency> <dependency> <groupId>com.itextpdf</groupId> <artifactId>itextpdf</artifactId> <version>5.5.0</version> </dependency> </dependencies> <build> <plugins> <!-- <plugin> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-maven-plugin</artifactId> </plugin> --> </plugins> </build> </project>  
    • Por Stephhany909
      While trying to persist an object with an attribute of type Point, defined as follows:
       
      @Entity @Table(name = "event") public class Event { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) @Column(name = "id") private long id; @Column(columnDefinition = "POINT") private Point coordinate; } I'm getting the error Data truncation: Cannot get geometry object from data you send to the GEOMETRY field.
      The corresponding database table is defined as follows:
       
      create table event ( id bigint not null auto_increment, coordinate POINT, primary key (id) ) engine= InnoDB; What am I missing?
       
×

Informação importante

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