Ir para conteúdo

POWERED BY:

Arquivado

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

Dizzy_joe

Atribuir onCLick para varios radiobuttons

Por , em Javascript

Recommended Posts

Dizzy_joe    0

Dizzy_joe
Postado

galera.. eu precisava de uma ajuda...

tenho que preencher o onClick de uns 90 radiobuttons.. e pra nao repetir o código to atribuindo via js.. só que.. quando eu

 

atribuo a função que eu preciso rodar ela não é executada no clique.. e o pior a solução que eu já vi de tirar os parenteses

 

não funciona pq eu tenho que passar parametros...

olhem o código:

 

<input type="radio" value="1" name="S1">Discordo Totalmente<br><input type="radio" value="2" name="S1">Discordo Parcialmente<br><input type="radio" value="3" name="S1">Concordo Parcialmente<br><input type="radio" value="4" name="S1">Concordo Totalmente

for(i=0; i<3; i++){ document.formulario.S1[i].onclick="radio_verifica(document.formulario.S1,document.formulario.I1,document.formulario.txt1)";}

Compartilhar este post

Link para o post
Compartilhar em outros sites

guinuranti    0

guinuranti
Postado

ele quer atribuir eventos dinamicamente.

o pior é que hoje eu to empacado nessa também...

 

eu tentei fazer algo assim:

function faz(){	alert(this.value);}function acoes(){   for(var x = 1; x < 5; x++){	var el = document.getElementById("r" + x);	el.addEventListener("click", faz, false);   }}

eu coloco essa função acoes no onload do body, mas não deu muito certo não, olha os rádio como eram:

<input type="radio" id="r1" value="a" name="r" />A<br /><input type="radio" id="r2" value="b" name="r" />B<br /><input type="radio" id="r3" value="c" name="r" />C<br /><input type="radio" id="r4" value="d" name="r" />D<br />

nem ie nem ff funciona, ele diz que o objeto (o rádio button) não tem suporte ao método, putz, mas eu já tinha lido isso uma vez e era pra funcionar (http://www.sitepoint.com/article/dhtml-utopia-modern-web-design/3)...

 

eu faço esse addeventlistener numa textarea por exemplo e funciona, agora, em outros componentes UI eu não to conseguindo também, por exemplo, botões, ia inclusive abrir um tópico sobre isso, mas vamo tentar resolver aqui mesmo.

 

se alguém souber de alguma dica ai, por favor, compartilhe-a!

se eu descobrir vai estar aqui com certeza.

 

flws!!

 

ah, ia esquecendo, é só na m&r#@ do IE que o código não funciona, se voce testar num navegador de gente tipo o ff, verá que funciona maravilhosamente bem, a cada clique do mouse, ele mostra o value do radio button.

se você quer passar parametros para sua função, sugiro usar xhtml.

Compartilhar este post

Link para o post
Compartilhar em outros sites

guinuranti    0

guinuranti
Postado

adriano, é por ai mesmo o caminho.só que ainda tem problemas.1) no IE ele não reconhece o this da função faz, então, como é mandada a função mostrar o value de quem chama ela, tá retornando undefined...2) eu tento usar o método getAttribute() mas o IE me diz que o objeto não dá suporte ao método...(aí já acaba ca paciência....)...no caso do item 2 é pra quando eu for criar algum atributo que o objeto não tenha, como no caso no radio colocar o atributo val="1" por exemplo, só através do this.val não funciona, mesmo no ff, ai eu tenho que sar essa chamada, que para desespero geral da nação, não funciona no ie...se você tiver uma dica ai pra ajudar nesse caso agradeceria!flws!!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Fleury    3

Fleury
Postado

Esse problema é um pouco mais complexo do que parece, já estou desenvolvendo a solução.Aguardem.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Alex Hiroshi    7

Alex Hiroshi
Postado

Chame a função assim..

document.getElementById("r"+x).onclick=function(){

função();

}

 

<script>function faz(){	alert("k");}window.onload=function(){   for(var x = 1; x < 5; x++){	document.getElementById("r"+x).onclick=function(){faz();}   }}</script><input type="radio" id="r1" value="a" name="r" />A<br /><input type="radio" id="r2" value="b" name="r" />B<br /><input type="radio" id="r3" value="c" name="r" />C<br /><input type="radio" id="r4" value="d" name="r" />D<br />

Compartilhar este post

Link para o post
Compartilhar em outros sites

Fleury    3

Fleury
Postado

A pedido do grande AAlves, quebrei a cabeça mas encontrei a solução.

Vamos por partes.

 

1- Source

<html><head><title>Function Engine</title><script>function loadFunctions (formName) {  var totalElem = 0;  var numForm = null;  //Pega o numero do form caso ele exista  for (var i = 0; i < document.forms.length; i++) {	if (document.forms[i].name == formName) numForm = i;  }    //Se o form existir, continua  if (numForm != null) {		//pega o total de radios e insere evento e cria a função	for (var i = 0; i < document.forms[numForm].elements.length; i++) {	  if (document.forms[numForm].elements[i].type == "radio") {		totalElem++;		  eval('document.forms['+numForm+'].elements['+i+'].onclick = function(){ fcnOnClick'+ totalElem +'() }');					eval("function fcnOnClick"+ totalElem +"() { radio_verifica(document.forms[numForm].S"+ totalElem +",document.forms[numForm].I"+ totalElem +",document.forms[numForm].txt"+ totalElem +") }");	  }	}  } else alert('Não foi encontrado nenhum form com este nome.');}function radio_verifica (a,b,c) {  var numForm = null;  var formName = "formDyn"; //Insira o nome do form aqui  //Pega o numero do form caso ele exista  for (var i = 0; i < document.forms.length; i++) {	if (document.forms[i].name == "formDyn") numForm = i;  }    if (numForm != null) {  	for (var i = 0; i < document.forms[numForm].elements.length; i++) {	  if (document.forms[numForm].elements[i].type == "text") document.forms[numForm].elements[i].value = "";	}  	c.value = "Radio selecionado";	b.value = ";D";	  } else alert('Não foi encontrado nenhum form com este nome.');}</script></head><body onLoad="loadFunctions('formDyn');"><form name="formDyn">  <input type="radio" value="1" name="r1"> Radio 1 <input type="text" value="" name="txt1"> - <input type="text" value="" name="I1"><br>  <input type="radio" value="2" name="r1"> Radio 2 <input type="text" value="" name="txt2"> - <input type="text" value="" name="I2"><br>  <input type="radio" value="3" name="r1"> Radio 3 <input type="text" value="" name="txt3"> - <input type="text" value="" name="I3"><br>  <input type="radio" value="4" name="r1"> Radio 4 <input type="text" value="" name="txt4"> - <input type="text" value="" name="I4"></form></body></html>
Como podem notar, na tag <body>, temos o onLoad chamando a função loadFunctions. Isso será básico. Outra coisa esse código foi feito para funcionar com quantos radios você quiser de um mesmo form.

 

2 - Configurando

A primeira coisa que você informar o nome do form onde está os radios na váriavel:

<body onLoad="loadFunctions('formDyn');">

Essa rotina localiza todos os radios do form e insere no evento onClick, a função fcnOnClick que chama a função radio_verifica em sequencia.

A função radio_verifica você irá personaliza-la da forma que deseja. Eu fiz isso só para teste. Então modifique o código dela livremente.

 

3 - Conclusão

Essa rotina vai gerar funções e eventos baseado no número de radio buttons do form indicado.

Este exemplo com 4 radios, será criado pela rotina o seguinte:

 

document.forms[0].elements[0].onclick = function(){ fcnOnClick1() }document.forms[0].elements[1].onclick = function(){ fcnOnClick2() }document.forms[0].elements[2].onclick = function(){ fcnOnClick3() }document.forms[0].elements[3].onclick = function(){ fcnOnClick4() }function fcnOnClick1() { radio_verifica(document.forms[0].S1,document.forms[0].I1,document.forms[0].txt1) }function fcnOnClick2() { radio_verifica(document.forms[0].S2,document.forms[0].I2,document.forms[0].txt2) }function fcnOnClick3() { radio_verifica(document.forms[0].S3,document.forms[0].I3,document.forms[0].txt3) }function fcnOnClick4() { radio_verifica(document.forms[0].S4,document.forms[0].I4,document.forms[0].txt4) }
Bom, é isso aí!

Qualquer dúvida, é só postar.

Abraços, T+

Compartilhar este post

Link para o post
Compartilhar em outros sites

Alex Hiroshi    7

Alex Hiroshi
Postado

uhm.. eu acho que fica mais fácil e menor, se você dar referência aos campos usando getElementById(), como eu postei no post anterior.

Pegando os campos por id, você não precisa procurar pelos formulários que podem existir na página. Com isso, já daria para tirar uma boa parte do script, deixando o mesmo mais leve e limpo.. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif isso tudo sabendo que o valor do id é único...

 

Assim bastaria usar o que eu postei anteriormente..

window.onload=function(){   for(var x = 1; x < 5; x++){	document.getElementById("r"+x).onclick=function(){faz();}
. . e assim você tbm pode controlar tudo sem precisar inserir nada na parte do HTML da página, pois o evento onload já fica na própria função http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif se bem que no seu script tbm da para deixar tudo no script (window.onload=funcao;)

 

Mas fica ae as duas sugestões. .

Compartilhar este post

Link para o post
Compartilhar em outros sites

Fleury    3

Fleury
Postado

Isso aí =)Pode escolher. No meu você informa o nome de form e ele roda. No do Lex você tem colocar no nome dos radios em sequencia r1, r2, r3... rNObs.: Lex é mais morcego que eu. rs

Este post foi editado por Lex: Hoje, 02:21 AM

Compartilhar este post

Link para o post
Compartilhar em outros sites

Fleury    3

Fleury
Postado

Hehehe, poxa, nem pra me ajudar? Assim eu fico sendo o único morcego da estória =o~

Compartilhar este post

Link para o post
Compartilhar em outros sites

Dizzy_joe    0

Dizzy_joe
Postado

cara.. tu saca muito... to lendo o codigo pela terceira vez pra entender o que tu fez.. caraca... valeu mesmo cara... po.. e tenho certeza que esse codigo sera util pra muita gente.. pq ô coisa dificil é lidar com internet explorer!!! coisa linda esse código!!! valeu!

Compartilhar este post

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

Informação importante

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

  Aceito