h:selectOneMenu javascript onchange problem
[nobr]Hello and happy new year for all this is the first time i post here i have a nasty annoying problem with my application well to explain better
i have 4 <h:selectOneMenu> lists 3 lists depends on the first one via javascript using the onclik or onchange i mean when the value of the first list matches a certain value the other combo lists are disabled
(i took the DOM IDs from the HMTL page generated from the JSF page)
<script language="javascript">
function disableOtherLists()
{
var listIndex = document.getElementById("formCreation:categorieListItems").selectedIndex;
var value1=document.getElementById("formCreation:categorieListItems").options[listIndex].value;
if(value1==3)
{
document.getElementById("formCreation:banqueListItems").disabled ="disabled";
document.getElementById("formCreation:localiteListItems").disabled ="disabled";
document.getElementById("formCreation:numCompte").disabled ="disabled";
}
else
{
document.getElementById("formCreation:banqueListItems").disabled ="";
document.getElementById("formCreation:localiteListItems").disabled ="";
document.getElementById("formCreation:numCompte").disabled ="";
}
//alert(text1);
}
</script>
the jsf code associated
<h:selectOneMenu onchange="disableOtherLists();" id="categorieListItems" value="#{beq.categorie}" >
<f:selectItems value="#{ beq.categorieListe}" />
</h:selectOneMenu>
</td>
<td colspan="2">
</td>
<td width="28%"></td>
</tr>
<tr>
<td width="18%">
<label>
<span class="Texte1">Banque</span>
</label>
</td>
<td width="18%">
<span class=Texte1>
<label>Ville de cialiation </label>
</span>
</td>
<td width="17%">
<label>
<span class="Texte1">Numéro de compte</span>
</label>
</td>
<td width="28%"> </td>
</tr>
<tr>
<td>
<span class=Texte1>
<h:selectOneMenu id="banqueListItems" value="#{beq.banque}" immediate="true">
<f:selectItems value="#{ beq.banqueListe}" />
</h:selectOneMenu>
</span>
</td>
<td>
<span class=Texte1>
<h:selectOneMenu id="localiteListItems" value="#{beq.ville}">
<f:selectItems value="#{ beq.localiteListe}" />
</h:selectOneMenu>
</span>
</td>
<td><h:inputText id="numCompte" value="#{beq.numCompte}" size="24" /></td>
<td> </td>
</tr>
<tr>
when the first list box is set to the value 3 (the other list boxes are disabled as excpected but when i submit the form it seems that the page is refreshed and the other lists are no longer disabled and the form is emptied i wonder where this problem comes from
here is all my code:
<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<script language="javascript">
function grise()
{
var listIndex = document.getElementById("formCreation:categorieListItems").selectedIndex;
var value1=document.getElementById("formCreation:categorieListItems").options[listIndex].value;
if(value1==3)
{
document.getElementById("formCreation:banqueListItems").disabled ="disabled";
document.getElementById("formCreation:localiteListItems").disabled ="disabled";
document.getElementById("formCreation:numCompte").disabled ="disabled";
}
else
{
document.getElementById("formCreation:banqueListItems").disabled ="";
document.getElementById("formCreation:localiteListItems").disabled ="";
document.getElementById("formCreation:numCompte").disabled ="";
}
//alert(text1);
}
</script>
<f:view>
<HEAD>
<TITLE>BEQ - Creation </TITLE>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<META http-equiv="expires" content="Now">
<LINK href="commun/styles.css" type=text/css rel=stylesheet>
<style type="text/css">
<!--
.Style1{font-size: 12px}
-->
</style>
</HEAD>
<BODY>
<h:form id="formCreation">
<table class=datatable width="100%" border=0>
<tbody>
<tr bgcolor=#ffff99>
<td style="COLOR: #ff0000" colspan=6>
<b></b>
</td>
</tr>
<tr class=TrTableau>
<td colspan=4 height=50>
<span class=EnteteForme>Bons d'équipement -
Cr閍tion </span><br>
<span class=EnteteForme><h:outputText value="#{beq.message}"/></span>
</td>
</tr>
<tr>
<td width="18%">
<label>
<span class=Texte1>Numéro</span>
</label>
</td>
<td width="18%">
<span class=Texte1>
<label>Date de souscription</label>
</span>
</td>
<td colspan="2">
<label></label>
</td>
</tr>
<tr>
<td><h:inputText value="#{beq.numero}"/></td>
<td><h:inputText value="#{beq.dateSouscription}"/></td>
<td colspan="2"> </td>
</tr>
<tr>
<td width="18%" height="21">
<label>
<span class="Style1">Perception</span>
</label>
</td>
<td width="18%"> </td>
<td colspan="2"> </td>
</tr>
<tr>
<td>
<span class=Texte1>
<h:selectOneMenu id="perceptionListItems" value="#{beq.perception}">
<f:selectItems value="#{ beq.perceptionListe}" />
</h:selectOneMenu>
</span>
</td>
<td> </td>
<td colspan="2"> </td>
</tr>
<tr>
<td colspan="4">
<span class="Texte1">Nom ou raison sociale </span>
</td>
</tr>
<tr>
<td colspan="4"><h:inputText value="#{beq.nom}" size="30"/></td>
</tr>
<tr>
<td width="18%">
<span class=Texte1>
<label>Cat間orie</label>
</span>
</td>
<td colspan="2">
</td>
<td width="28%">
</td>
</tr>
<tr>
<td width="18%">
<span class=Texte1>
<h:selectOneMenu onchange="grise();" id="categorieListItems" value="#{beq.categorie}" >
<f:selectItems value="#{ beq.categorieListe}" />
</h:selectOneMenu>
</span>
</td>
<td colspan="2">
</td>
<td width="28%"></td>
</tr>
<tr>
<td width="18%">
<label>
<span class="Texte1">Banque</span>
</label>
</td>
<td width="18%">
<span class=Texte1>
<label>Ville de cialiation </label>
</span>
</td>
<td width="17%">
<label>
<span class="Texte1">Numéro de compte</span>
</label>
</td>
<td width="28%"> </td>
</tr>
<tr>
<td>
<span class=Texte1>
<h:selectOneMenu id="banqueListItems" value="#{beq.banque}" immediate="true">
<f:selectItems value="#{ beq.banqueListe}" />
</h:selectOneMenu>
</span>
</td>
<td>
<span class=Texte1>
<h:selectOneMenu id="localiteListItems" value="#{beq.ville}">
<f:selectItems value="#{ beq.localiteListe}" />
</h:selectOneMenu>
</span>
</td>
<td><h:inputText id="numCompte" value="#{beq.numCompte}" size="24" /></td>
<td> </td>
</tr>
<tr>
<td colspan=4>
<label>
<span class=Texte1>Adresse</span>
</label>
</td>
</tr>
<tr>
<td colspan=4>
<h:inputTextarea value="#{beq.adresse}" styleClass="inputTxt" cols="104" rows="3" />
</td>
</tr>
<tr>
<td width="18%"><label>
<span class=Texte1>Siège</span>
</label>
</td>
<td colspan="2"><label>
<span class=Texte1>Montant</span>
</label>
</td>
<td width="28%"></td>
</tr>
<tr>
<td><span class=Texte1>
<h:selectOneMenu id="siegeListItems" value="#{beq.siege}">
<f:selectItems value="#{ beq.siegeListe}" />
</h:selectOneMenu>
</span>
</td>
<td colspan="2"><h:inputText value="#{beq.montant}"/></td>
<td> </td>
</tr>
<tr>
<td colspan=4>
<label>
<span class=Texte1>Motif</span>
</label>
</td>
</tr>
<tr>
<td colspan=4>
<h:inputTextarea value="#{beq.motif}" styleClass="inputTxt" cols="104" rows="1" />
</td>
</tr>
<tr>
<td colspan=4 height=51>
<div align=right>
<h:commandLink action="Accueil.jsf">
<h:graphicImage value="commun/annuler.gif" style="border:0px"/>
</h:commandLink>
<%--
<h:commandLink action="#{beq.createAction}">
<h:graphicImage value="commun/enregistrer.gif" style="border:0px"/>
</h:commandLink>
--%>
<h:commandButton action="#{beq.createAction}" image="commun/enregistrer.gif"/>
</div>
</td>
</tr>
</tbody>
</table>
</h:form>
</BODY>
</f:view>
</HTML>
[/nobr]
