(Resolvido) Cada botão clicado habilitar um campo de texto correspondente

Alex Fernandes · Julho 28, 2017

Fala galera.

Em uma pagina são carregados registros de um bd. Para cada registro há 1 botão 'abrir' 2 'campos de textos' e um botão 'atualizar'.

O botão abrir é o único habilitado, os demais componentes estão desabilitados (impedindo que o usuário os manipulem).

O que eu quero é: que ao clicar no botão abrir, os campos de textos e o botão atualizar fiiquem habilitados, agora o usuário poderá fazer a atualização dos dados

contidos nos campos de textos, e o bd é atualizado ao clicar no botão atualizar. NÃO estou conseguindo fazer que ao clicar por exemplo no 3° botão abrir, abra somente

o 3° campo e o 3° bt atualizar. Consigo fazer com php, todavia a pagina vai dar um refresh apenas para isso, então quero fazer em JS ou JQuery, como faço?

Desde já obrigado.

lowys · Julho 28, 2017

Olá!

Depende de como está a sua estrutura html
Mas provavelmente vais precisar usar closest: https://api.jquery.com/closest/

Alex Fernandes · Julho 28, 2017

Amigo, muito obrigado!

Seguinte, vendo o exemplo que você passou, fiz um teste e o melhor que cheguei foi o resultado que estou postando.

O que deu certo: ao clicar em cada botão abrir é desencadeado um evento em uma tag correspondente, isso que eu precisava, todavia como já deu pra perceber sou noob em JQuery e até mesmo em html, eu preciso que meu exemplo ao invés de manipular a tag manipule os imputs textos para receber um disabled (claro que o codigo não vai ser assim, mas conseguindo isto dou meu jeito aqui). Segue o que eu fiz, e se possivel dei-me uma luz de como deixar co jeito que preciso, desde já obrigado por compartilhar conhecimento.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>closest demo</title>
  <style>
  li {
    margin: 3px;
    padding: 3px;
    background: #EEEEEE;
  }
  li.highlight {
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<div>
  <?php  componentes();?>
</div>

<script>
$( 'a').on( "click", function( event ) {
  $( event.target ).closest( "li" ).toggleClass( "highlight" );
});
</script>

<?php
  function componentes() {
		// apenas exemplo, virá do bd (isso já fiz)
		for ($i = 0; $i < 5; $i++) {
		
		echo "
		<form name='formulario' method='post' >
		
		<li>
		<a><input type='button' id='botao' name='id_bt_abrir' value='Abrir'></a>
		<input type='text' name='valorNome' size = 36 value='nome' disabled>
		<input type='text' name='valorCnpj' size = 16 value='cnpj' disabled></li>
		";
	}
  }
?>
 
</body>
</html>

Alex Fernandes · Julho 28, 2017

CONSEGUI.

Fuçando deu certo agora apenas vou adaptar a minha necessidade, segue como fiz o JQuery,para quem precisar.

Obrigado lowys seu link me deu opções

<script>
$("a").on("click", function () {

	var botaoAbrir = $(this).closest("a").find("input[name='id_bt_abrir']");
	var campoNome = $(this).closest("li").find("input[name='valorNome']");
	var campoCnpj = $(this).closest("li").find("input[name='valorCnpj']");
    
	if (botaoAbrir.val() == 'Abrir') {
		
		botaoAbrir.val('Fechar');
		campoNome.removeAttr("disabled");
		campoCnpj.removeAttr("disabled");
	}else {
		botaoAbrir.val('Abrir');
		campoNome.attr("disabled", "");
		campoCnpj.attr("disabled", "");
	}
});
</script>

lowys · Julho 28, 2017

😱😱👏🏽👏🏽👏🏽👍🏽👍🏽👍🏽 Parabéns!

Entrar

(Resolvido) Cada botão clicado habilitar um campo de texto correspondente

Pergunta

Alex Fernandes

Link para o comentário

Compartilhar em outros sites

4 respostass a esta questão

Posts Recomendados

lowys

Link para o comentário

Compartilhar em outros sites

Alex Fernandes

Link para o comentário

Compartilhar em outros sites

Alex Fernandes

Link para o comentário

Compartilhar em outros sites

lowys

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades