Passar id de campo text para função do JQuery

Front-end
#1

Boa tarde amigos,

Tenho a função abaixo no JQuery que pega o id do campo text e passa para uma outra função do JQuery…

<script type="text/javascript">
	$(function() {
		$("#datepicker").datepicker();
	});
</script>

Tenho o calendario.htm com o campo text datepicker, o problema que não consigo chamar essa mesma função para um segundo campo text. Queria saber se é possível passar o id dos campos para a função, idependente da quandidade, como posso fazer isso amigos?

<!doctype html>

<head>
	<link type="text/css" href="css/calendario/ui.all.css" rel="stylesheet" />
	<link type="text/css" href="css/calendario/demos.css" rel="stylesheet" />
	<script type="text/javascript" src="js/calendario/jquery-1.3.2.js"></script>
	<script type="text/javascript" src="js/calendario/ui.core.js"></script>
	<script type="text/javascript" src="js/calendario/ui.datepicker.js"></script>

	<script type="text/javascript">
	$(function() {
		$("#datepicker").datepicker();
	});
	</script>
	
</head>
<body>
<input type="text" id="datepicker">
<input type="text" id="datepicker2">
<input type="text" id="datepicker3">
</body>
</html>

Vlw!

#2

Tente utilizar o código abaixo.
Neste exemplo o seletor do JQuery obtera todos os inputs que tenham id que comecem com datepicker.
Ou seja este seletor irá retornar três objetos, se aplicado no código do seu post.

	<script type="text/javascript">
	$(function() {
		$("input[id^='datepicker']").datepicker();
	});
	</script>
#3

Amigo bombbr funfou certinho… mas agora estou tentando pegar os ids dos campos text criados dinamicamente atraves do script abaixo, mas não consigo, ele so pega o id de campos não dinamicos… roda esse script abaixo que vc vai constatar o problema… ela so pega o id do primeiro campo (nao dinamico) e quando vc clica no botao ele adicona campos text e ai nao consigo pegar esses ids… como posso fazer isso amigo??? vlw…

<html>
<head>
<script type="text/javascript" src="js/calendario/jquery-1.3.2.js"></script>
<script>
// Cria as linhas com campos inputs na div camposTexto. 
$(document).ready(function(){ 
 
        var i=0; 
 
        $("#add_input").click(function(){ 
 
                $("#camposTexto").append("<div id='linha"+i+"'><input type='text' name='numItem' id='numItem"+i+"' size='3' value='' class='text'></div>"); 
 
                $("#linha"+i).hide().fadeIn("slow"); i++; 
 
                return false; 
         }); 
 }); 
 
 // Tento pegar os ids dos campos criados dinamicamente... com campos que nao sao criados de forma dinamica funfa... 
$(document).ready(function() {
 	   $("input:text[id^='numItem']")
			.click(function(){             
                alert('Ola Mundo!'); 
        }); 
});

</script>
</head>
<body>
<form>
<input type="button" value=" + " name="add_input" id="add_input" onClick="addInput();"/>
</form>
<div id="camposTexto">
<input type="text" id="numItem">
</div>
<body>
</html>
#4

Amigo,

Debugando com o Firebug do Firefox, quando clico no btn para criar os campos texts, esse campo fica dentro de uma div display:block, conforme codigo abaixo. Como faço para pegar o id desse campo que está dendro dessa div block?

<body>
<form>
<input id="add_input" type="button" onclick="addInput();" name="add_input" value=" + "/>
</form>
<div id="camposTexto">
<input id="numItem" type="text"/>
<div id="linha0" style="display: block;">
<input id="numItem0" type="text" size="3" name="numItem"/>
</div>
<div id="linha1" style="display: block;">
<input id="numItem1" type="text" size="3" name="numItem"/>
</div>
</div>
</body>

Vlw amigos…

#5

Todo novo objeto adicionado na tela, você tem que incluir o evento também.
Veja abaixo, o seu código que eu alterei.

 <html>  
 <head>  
 <script type="text/javascript" src="jquery-1.3.2.min.js"></script>  
 <script>  

 
  var functionOlaMundo = function() {
	alert('Ola Mundo!'); 
  };

 $(document).ready(function(){  

         var i=0;   
   
         $("#add_input").click(function(){   
   
                 $("#camposTexto").append("<div id='linha"+i+"'><input type='text' name='numItem' id='numItem"+i+"' size='3' value='' class='text'></div>");   
   
                 $("#linha"+i).hide().fadeIn("slow"); 
				 
				 //PARA CADA NOVO input CRIADO É NECESSÁRIO "PLUGAR" O EVENTO.	
				 var idNovoInput = 'numItem' + i;
				 $('#' + idNovoInput).click( functionOlaMundo );   

				 i++; 
   
                 return false;   
          });   
 });   
  
  
 $(document).ready(function() {
		// Esta função só será executado uma ÚNICA vez quando a página for carragada ($(document).ready),
		//então só irá "plugar" o evento click no inputs que já existirem.
        $("input:text[id^='numItem']")  
             .click(
					functionOlaMundo
         );   
 });  
   
 </script>  
 </head>  
 <body>  
 <form>  
 <input type="button" value=" + " name="add_input" id="add_input" onClick="addInput();"/>  
 </form>  
 <div id="camposTexto">  
 <input type="text" id="numItem">  
 </div>  
 <body>  
 </html>
#6

[quote=Igor Franco]Amigo,
Debugando com o Firebug do Firefox, quando clico no btn para criar os campos texts, esse campo fica dentro de uma div display:block, conforme codigo abaixo. Como faço para pegar o id desse campo que está dendro dessa div block?
[/quote]

Igor, veja a documentação do JQuery, entenda bem como funciona os seletores do JQuery, isto irá te ajudar nos problemas que esta tendo. Todos os tipo de seletores tem exemplos de como funcionam.

http://docs.jquery.com/Selectors

#7

Amigo bombbr, estava pensando exatamente nisso… funcionou certinho… mas estou tentando chamar a função datepicker que está em JQuery numa função que cria campos text com javascript normal, mas nao estou conseguindo… a ideia é a mesma… e so está funcionando para os elementos text já existentes…


if (iCamposParcelaBoleto <= iCamposTotalParcelaBoleto) {
			
			
var txtValorDocumento = document.forms["pedidoForm"].elements["valorDocumento"];
			
var texto = "<div id='linha"+iCount+"'<input type='text' name='dataVencimentoDocBoleto' id='dataVencimentoDocBoleto"+iCount+"' size='19' value='' maxlength='10' class='text' onClick='datepicker('dataVencimentoDocBoleto"+iCount+"');'></div>";      
		  				
//Capturando a div principal, na qual os novos divs serão inseridos:
var camposTextoBoleto = document.getElementById('camposTextoBoleto');   
camposTextoBoleto.innerHTML = camposTextoBoleto.innerHTML+texto;
		    	    
	 
iCountParcelaBoleto++;
iCamposParcelaBoleto++;

}

Tentei chamar desta desta forma, mas não funfa… como posso chamar a função datepicker nos elementos text criados dinamicamente?

onClick='datepicker('dataVencimentoDocBoleto"+iCount+"'

Vlw…

#8

Experimente criar tag personalizadas:

Dentro de web-inf crie uma pasta chamada tags, crie um arquivo chamado campoData.tag e dentro dele:

<%@attribute name=“nome” required=“true”%>
<%@attribute name=“valor” required=“false”%>

No inicio seu jsp faça referencia a ele:
<%@taglibtagdir="/WEB-INF/tags" prefix=“minhatag”%>

E na hora de usar:
<minhatag:campoData nome=“data_nascimento” valor="" />

#9