I’m trying to display or hide some div depending on what will be the text filled in the input.
so actualy I have done this function:
<script type="text/javascript">
function checkdiv()
{
var position1= document.getElementById("position1").value;
if(position1==1)
{
document.getElementById("a1").style.visibility = "hidden"
}
else
{
document.getElementById("a1").style.visibility= "visible"
}
if(position1=="2")
{
document.getElementById("a2").style.visibility = "hidden"
}
if(position1!="2")
{
document.getElementById("a2").style.visibility= "visible"
}
if(position1=="3")
{
document.getElementById("a3").style.visibility = "hidden"
}
if(position1!="3")
{
document.getElementById("a3").style.visibility= "visible"
}
if(position1=="4")
{
document.getElementById("a4").style.visibility = "hidden"
}
if(position1!="4")
{
document.getElementById("a4").style.visibility= "visible"
}
if(position1=="5")
{
document.getElementById("a5").style.visibility = "hidden"
}
if(position1!="5")
{
document.getElementById("a5").style.visibility= "visible"
}
if(position1=="6")
{
document.getElementById("a6").style.visibility = "hidden"
}
if(position1!="6")
{
document.getElementById("a6").style.visibility= "visible"
}
if(position1=="7")
{
document.getElementById("a7").style.visibility = "hidden"
}
if(position1!="7")
{
document.getElementById("a7").style.visibility= "visible"
}
if(position1=="8")
{
document.getElementById("a8").style.visibility = "hidden"
}
if(position1!="8")
{
document.getElementById("a8").style.visibility= "visible"
}
if(position1=="9")
{
document.getElementById("a9").style.visibility = "hidden"
}
if(position1!="9")
{
document.getElementById("a9").style.visibility= "visible"
}
if(position1=="10")
{
document.getElementById("a10").style.visibility = "hidden"
}
if(position1!="10")
{
document.getElementById("a10").style.visibility= "visible"
}
if(position1=="11")
{
document.getElementById("a11").style.visibility = "hidden"
}
if(position1!="11")
{
document.getElementById("a11").style.visibility= "visible"
}
if(position1=="12")
{
document.getElementById("a12").style.visibility = "hidden"
}
if(position1!="12")
{
document.getElementById("a12").style.visibility= "visible"
}
}
checkdiv();
</script>
And all of this past with the column Ordre of the following table:
<form action="#" method="post">
<table width='100%' id='boxa' align='center' ><thead><tr><th scope='col' width='3%'><strong>CODE CLIENT</strong></th><th scope='col' width='10%'><strong>TITRE</strong></th><th scope='col' width='15%'><strong>POSTE</strong></th><th scope='col' width='3%'><strong>ORDRE</strong></th><th scope='col' width='25%'><strong>DESCRIPTION</strong></th><th scope='col' width='10%'><strong>VU CLIENT</strong></th><th scope='col' width='10%'><strong>VU TIERS</strong></th></tr></thead><tbody> <tr>
<td>
<input name="data[1][code_client]" type="text" id="code_client1" size="5" onkeyup="clientventilation()" /></td>
<td><input name="data[1][libelle]" type="text" size="10" id="libelle1" onkeyup="titreventilation()" /></td>
<td><input name="data[1][poste]" type="text" value="Principal" size="30" /></td>
<td><input name="data[1][ordre]" id="position1" type="text" size="2" onblur="checkdiv()" /></td>
<td><input name="data[1][description]" type="text" value="Montant de la dette" size="40" /></td><td><select name="data[1][vu_client]" ><option value="oui">oui</option><option value="non">non</option></select></td><td><select name="data[1][vu_tiers]" ><option value="oui">oui</option><option value="non">non</option></select></td>
</tr>
<tr>
<td><input name="data[2][code_client]" type="text" size="5" id="code_client2" /></td>
<td><input name="data[2][libelle]" type="text" size="10" id="libelle2" /></td>
<td><input name="data[2][poste]" type="text" value="Intérêts" size="30" /></td>
<td><input name="data[2][ordre]" type="text" size="2" id="position2" onblur="checkdiv()" /></td>
<td><input name="data[2][description]" type="text" value="Intérêts (sur soldes des factures dûes)" size="40" /></td><td><select name="data[2][vu_client]" ><option value="oui">oui</option><option value="non">non</option></select></td><td><select name="data[2][vu_tiers]" ><option value="oui">oui</option><option value="non">non</option></select></td>
</tr>
<tr>
<td><input name="data[3][code_client]" type="text" size="5" id="code_client3" /></td>
<td><input name="data[3][libelle]" type="text" size="10" id="libelle3" /></td>
<td><input name="data[3][poste]" type="text" value="Clause pénale" size="30" /></td>
<td><input name="data[3][ordre]" type="text" size="2" id="position3" onblur="checkdiv()" /></td>
<td><input name="data[3][description]" type="text" value="Clause pénale contractuelle" size="40" /></td><td><select name="data[3][vu_client]" ><option value="oui">oui</option><option value="non">non</option></select></td><td><select name="data[3][vu_tiers]" ><option value="oui">oui</option><option value="non">non</option></select></td>
</tr>
<tr>
<td><input name="data[4][code_client]" type="text" size="5" id="code_client4" /></td>
<td><input name="data[4][libelle]" type="text" size="10" id="libelle4" /></td>
<td><input name="data[4][poste]" type="text" value="Dommages et Intérêts" size="30" /></td>
<td><input name="data[4][ordre]" type="text" size="2" id="position4" onblur="checkdiv()" /></td>
<td><input name="data[4][description]" type="text" value="Montant des Dommages et Intérêts" size="40" /></td><td><select name="data[4][vu_client]" ><option value="oui">oui</option><option value="non">non</option></select></td><td><select name="data[4][vu_tiers]" ><option value="oui">oui</option><option value="non">non</option></select></td>
</tr>
<tr>
<td><input name="data[5][code_client]" type="text" size="5" id="code_client5" /></td>
<td><input name="data[5][libelle]" type="text" size="10" id="libelle5" /></td>
<td><input name="data[5][poste]" type="text" value="Article 700 du CPC" size="30" /></td>
<td><input name="data[5][ordre]" type="text" size="2" id="position5" onblur="checkdiv()" /></td>
<td><input name="data[5][description]" type="text" value="Montant correspondant à la condamnation" size="40" /></td><td><select name="data[5][vu_client]" ><option value="oui">oui</option><option value="non">non</option></select></td><td><select name="data[5][vu_tiers]" ><option value="oui">oui</option><option value="non">non</option></select></td>
</tr>
<tr>
<td><input name="data[6][code_client]" type="text" size="5" id="code_client6" /></td>
<td><input name="data[6][libelle]" type="text" size="10" id="libelle6" /></td>
<td><input name="data[6][poste]" type="text" value="Frais AR" size="30" /></td>
<td><input name="data[6][ordre]" type="text" size="2" id="position6" onblur="checkdiv()" /></td>
<td><input name="data[6][description]" type="text" value="Montant des frais d'accusés réception et de courriers" size="40" /></td><td><select name="data[6][vu_client]" ><option value="oui">oui</option><option value="non">non</option></select></td><td><select name="data[6][vu_tiers]" ><option value="oui">oui</option><option value="non">non</option></select></td>
</tr>
<tr>
<td><input name="data[7][code_client]" type="text" size="5" id="code_client7" /></td>
<td><input name="data[7][libelle]" type="text" size="10" id="libelle7" /></td>
<td><input name="data[7][poste]" type="text" value="Art. 441-6 CC" size="30" /></td>
<td><input name="data[7][ordre]" type="text" size="2" id="position7" onblur="checkdiv()" /></td>
<td><input name="data[7][description]" type="text" value="Article 441-6 du code du commerce" size="40" /></td><td><select name="data[7][vu_client]" ><option value="oui">oui</option><option value="non">non</option></select></td><td><select name="data[7][vu_tiers]" ><option value="oui">oui</option><option value="non">non</option></select></td>
</tr>
<tr>
<td><input name="data[8][code_client]" type="text" size="5" id="code_client8" /></td>
<td><input name="data[8][libelle]" type="text" size="10" id="libelle8" /></td>
<td><input name="data[8][poste]" type="text" value="Frais et Agios" size="30" /></td>
<td><input name="data[8][ordre]" type="text" size="2" id="position8" onblur="checkdiv()" /></td>
<td><input name="data[8][description]" type="text" value="Montant des frais & agios bancaires" size="40" /></td><td><select name="data[8][vu_client]" ><option value="oui">oui</option><option value="non">non</option></select></td><td><select name="data[8][vu_tiers]" ><option value="oui">oui</option><option value="non">non</option></select></td>
</tr>
<tr>
<td><input name="data[9][code_client]" type="text" size="5" id="code_client9" /></td>
<td><input name="data[9][libelle]" type="text" size="10" id="libelle9" /></td>
<td><input name="data[9][poste]" type="text" value="Dépens" size="30" /></td>
<td><input name="data[9][ordre]" type="text" size="2" id="position9" onblur="checkdiv()" /></td>
<td><input name="data[9][description]" type="text" value="Total calculé" size="40" /></td><td><select name="data[9][vu_client]" ><option value="oui">oui</option><option value="non">non</option></select></td><td><select name="data[9][vu_tiers]" ><option value="oui">oui</option><option value="non">non</option></select></td>
</tr>
<tr>
<td><input name="data[10][code_client]" type="text" size="5" id="code_client10" /></td>
<td><input name="data[10][libelle]" type="text" size="10" id="libelle10" /></td>
<td><input name="data[10][poste]" type="text" value="Article 475-1-CPP" size="30" /></td>
<td><input name="data[10][ordre]" type="text" size="2" id="position10" onblur="checkdiv()" /></td>
<td><input name="data[10][description]" type="text" value="Article 475-1 Du code de Procédure pénale" size="40" /></td><td><select name="data[10][vu_client]" ><option value="oui">oui</option><option value="non">non</option></select></td><td><select name="data[10][vu_tiers]" ><option value="oui">oui</option><option value="non">non</option></select></td>
</tr>
<tr>
<td><input name="data[11][code_client]" type="text" size="5" id="code_client11" /></td>
<td><input name="data[11][libelle]" type="text" size="10" id="libelle11" /></td>
<td><input name="data[11][poste]" type="text" value="Frais d'exécution" size="30" /></td>
<td><input name="data[11][ordre]" type="text" size="2" id="position11" onblur="checkdiv()" /></td>
<td><input name="data[11][description]" type="text" value="Montant des frais d'exécution" size="40" /></td><td><select name="data[11][vu_client]" ><option value="oui">oui</option><option value="non">non</option></select></td><td><select name="data[11][vu_tiers]" ><option value="oui">oui</option><option value="non">non</option></select></td>
</tr>
<tr>
<td><input name="data[12][code_client]" type="text" size="5" id="code_client12" /></td>
<td><input name="data[12][libelle]" type="text" size="10" id="libelle12" /></td>
<td><input name="data[12][poste]" type="text" value="Contribution à l'aide juridiqu" size="30" /></td>
<td><input name="data[12][ordre]" type="text" size="2" id="position12" onblur="checkdiv()" /></td>
<td><input name="data[12][description]" type="text" value="Contribution à l'aide juridique" size="40" /></td><td><select name="data[12][vu_client]" ><option value="oui">oui</option><option value="non">non</option></select></td><td><select name="data[12][vu_tiers]" ><option value="oui">oui</option><option value="non">non</option></select></td>
</tr>
<tr>
<td><input name="data[13][code_client]" type="text" size="5" id="code_client13" /></td>
<td><input name="data[13][libelle]" type="text" size="10" id="libelle13" /></td>
<td><input name="data[13][poste]" type="text" value="Frais de greffe" size="30" /></td>
<td><input name="data[13][ordre]" type="text" size="2" id="position13" onblur="checkdiv()" /></td>
<td><input name="data[13][description]" type="text" value="Montant des frais de greffe" size="40" /></td><td><select name="data[13][vu_client]" ><option value="oui">oui</option><option value="non">non</option></select></td><td><select name="data[13][vu_tiers]" ><option value="oui">oui</option><option value="non">non</option></select></td>
</tr>
</tbody>
</table>
But when I try to make the function work it says to me can not read the property style of null. I would like just to hide the orange box with the number if the number is put into the input of the column “ordre”. And if somebody write twice the same number as it exist in an other box just to display an alert. I really lost because this beggining does not work.
Any advice or help will be much appreciated
Here is the jsfiddle. http://jsfiddle.net/uXcQh/
If you are including you JavaScript in your head tags, that might be the cause because the DOM is not fully loaded when the function is called.
My suggestion is to do this instead.
This is the code that works for me