Event onClick working not properly

[Nic]

Hi, friends, this is my first time here (sorry for my english). I have rpoblem in my code and I've tryed hard to solve it unsucessfully! I hope someone can help me...The problem: The form runs almost perfectly, except for the javascript function "mostrarCampo()". It should show an "imput field" each time I check the checkbox beside it. It happens that it shows only the first input. Here is the code:

[background='light grey']//-----------------function Javasscript (in a file .js)------------------//function mostrarCampo(){    var nameForm = document.forms[0].name;        switch (nameForm) {        case "f_Ins_Suprimento":            document.f_Ins_Suprimento.sClaNome.style.visibility="visible";            document.f_Ins_Suprimento.tfSupNome.style.visibility="visible";            document.f_Ins_Suprimento.tfSupEstoque.style.visibility="visible";       break;                .                .                .       case "f_Solicitacao_2":           est = document.getElementsByName("tfEst[]");           for(var i = 0;  i<est.length; i++){               document.f_Solicitacao_2.tfEst[i].style.visibility="visible";           }        break;        default:        break;        }}[/background]

[background='light grey']//------------------THE FORM--------------------------------------------------//<!-- FORMULARIO DINÂMICO COM TRECHOS EM PHP QUE TRAZEM DADOS PARA SEREM MANIPULADOS --><form name="f_Solicitacao_2" action="index.php" method="post"><div align="center"><table id="tabRel"> <tr>   <th colspan="4">SOLICITAÇÃO DE ALOCAÇÃO DE RECURSOS</th> </tr> <tr><td colspan='2'>Equipamentos</td><td>Estoque</td><td></td></tr><?php/*RESCUING A VRIABLE */ $proId = $_REQUEST['id'];/* CAPTURANDO E TRATANDO UMA EXCEPTION*/    try {/*GETTING DATA*/$lista = Equipamento::listarEquipamento();/*FOR EACH DATA IN ARRAY LIST, GET...*/foreach($lista as $value){$equ_Id = $value['equ_Id'];$equ_Nome = $value['equ_Nome'];$equ_Est = $value['equ_Estoque'];/*WRITTING IN SCREEN A TABLE WITH FOLLOWING ROWS* IN THE FIRST ROW, THE FUNCTION 'mostrarCampo() RUNS WHEN* THE CHECKBOX IS CHECKED AND SHOULD TURN "VISIBLE" THE "INPUT"* ON NEXT ROW */echo " <tr><td colspan='2'><input type='checkbox' id='chEquName' name='chEquName[]' onclick='mostrarCampo();' value="".$equ_Id.""  />".$equ_Nome."</td>  <td>Estoque :<input name='tfEst[]' id='tfEst[]' type='text' size='4' style='visibility:hidden;' value="".$equ_Est."" /></td>  <td><input type='hidden' name='hProId' value="".$proId."" /></td></tr>";}/* CASO A EXCEÇÃO TENHA SIDO CAPTURADA, EXEBE MENSAGEM*/} catch (N_ListaVazia $exc) {echo $exc->getMessage();}?></table>   <input type='hidden' name='hLabel' value='tela_Solicitacao_2' /> <p align="center"><input type="submit" name="bSubmit" value="confirmar"/></p><p align="center"><a href="?acao=tela_Servicos">VOLTAR</a></p><p align="center"><a href="?acao=logout">SAIR</a></p></div></form>[/background]

 

[dsonesuk]

Problems1) using outdated '.' Notation to reference elements instead of getElementById().2) using square brackets in id attributes value is not allowed, in name attributes yes, NOT id.3) id attribute values must be unique within a page, and not duplicated in anyway.

[Nic]

O got nothing.. even changing the code. Please just let me know that it's possible to do what I need, so I will spend the rest of my days trying find the way.

It doesn't run!!!

[justsomeguy]

Doing something like "document.f_Solicitacao_2" is old-fashioned and may not work in all browsers. It would be better to give that element a unique ID, and then use document.getElementById to get a reference to it (e.g. document.getElementById('form_id')).Doing this:id='tfEst[]'is not allowed. "[" and "]" are not valid characters in an ID.This loop:

foreach($lista as $value){$equ_Id = $value['equ_Id'];$equ_Nome = $value['equ_Nome'];$equ_Est = $value['equ_Estoque'];/*WRITTING IN SCREEN A TABLE WITH FOLLOWING ROWS* IN THE FIRST ROW, THE FUNCTION 'mostrarCampo() RUNS WHEN* THE CHECKBOX IS CHECKED AND SHOULD TURN "VISIBLE" THE "INPUT"* ON NEXT ROW */echo " <tr><td colspan='2'><input type='checkbox' id='chEquName' name='chEquName[]' onclick='mostrarCampo();' value="".$equ_Id.""  />".$equ_Nome."</td>  <td>Estoque :<input name='tfEst[]' id='tfEst[]' type='text' size='4' style='visibility:hidden;' value="".$equ_Est."" /></td>  <td><input type='hidden' name='hProId' value="".$proId."" /></td></tr>";}

is printing 3 form elements. 2 of them have IDs. That's a problem inside a loop, because if that loop runs 10 times then you have 10 elements with the ID "chEquName", and 10 elements with the id "tfEst[]" (which is already an invalid ID). You can't have more than 1 element with the same ID on the same page.

[dsonesuk]

I don't know exactly what you want but this is a suggestion

 

Use a incrementing variable

                echo "<tr><td colspan='2'><input type='checkbox' id='chEquName" . $id_count . "' name='chEquName[]' onclick='mostrarCampo(this);' value="" . $equ_Id . ""  />" . $equ_Nome . "</td>  <td>Estoque :<input name='tfEst[]' id='tfEst" . $id_count . "' type='text' size='4' style='visibility:hidden;' value="" . $equ_Est . "" /></td>  <td><input type='hidden' name='hProId' value="" . $proId . "" /></td></tr>";                $id_count++;            }

Also add 'this' to onclick='mostrarCampo(this);' the id ref will be for trigger inputs 'chEquName1', 'chEquName2', 'chEquName3' and so on, the target input elements will 'tfEst1', tfEst2', 'tfEst3'.

all you have to do is identify id ref and replace all but number value with that of the target input

            function  mostrarCampo(this_elem)            {                var trigger_element_id = this_elem.id;// example will equal 'chEquName2'                var target_element_id = trigger_element_id.replace('chEquName', 'tfEst'); // replace 'chEquName' with 'tfEst' so you end up with 'tfEst2' the id ref of element you wish to target                document.getElementById(target_element_id).style.visibility = "visible"; //change visibility of input with id ref 'tfEst2'            }

[Nic]

done! yessssssssss .. I got it! thank you both so much, any way. ...and no ID needed. It is runing perfectly. Now... just refining. Look at this:

...foreach($lista as $value){$equ_Id = $value['equ_Id'];$equ_Nome = $value['equ_Nome'];$equ_Est = $value['equ_Estoque'];echo "<tr><td><input type='checkbox' name='chEquName[]' onclick='mostrarCampo();' value="".$equ_Id.""  />".$equ_Id." - ".$equ_Nome."</td>  <td>Estoque :<input type='text' name='tfEst[]' size='4' value="".$equ_Est."" /></td>  <td>Solicitada :<input type='text' name='tfQtSol[]' size='4' style='visibility:hidden;' maxlength='4' /></td>  <td><input type='hidden' name='hProId' value="".$proId."" /></td></tr>";}=======================================================and the function...=======================================================case "f_Solicitacao_2":var ch = document.getElementsByName("chEquName[]");var tot = ch.length;for(var i = 0; i<tot; i++){if(ch[i].checked){var sol = document.getElementsByName("tfQtSol[]");sol[i].style.visibility="visible";}else{var sol = document.getElementsByName("tfQtSol[]");sol[i].value="";sol[i].style.visibility="hidden";}}break;