Div fields not getting displayed due to page refresh in jsp
Hi ,
I have a drop down which display different div tags based onchange(showfields). When i click on the form field in the div tag, it refreshes the page and the fields disappear without showing the form validation. The fields div has a display of none, hence when i click on login without any values,page refreshes and does not show the errors messages. Stuck with this issue from long, please help!!
function showfields()
{
var value= $("#dbform\\:databasedd").val();
alert(value);
$("#fields").replaceWith($("div#"+value));
}
</script>
<h:form>
<h:selectOneMenu id="databasedd" onchange="showfields()">
<f:selectItem itemLabel="Select" />
<f:selectItem itemValue="oracle" itemLabel="Oracle" />
<f:selectItem itemValue="sqlserver" itemLabel="SQL" />
</h:selectOneMenu>
<div id="fields" class="fieldclass" style="display: none;" >
<div id="sqlserver" class="sqlserver">
<h:panelGrid id="grid2"
columns="2" >
<h:outputLabel value="Host" styleClass="outputLabel" id="label5"></h:outputLabel>
<h:inputText id="host" value="#{userBean.host}" required="true" requiredMessage="Host Name is Mandatory"></h:inputText>
<h:outputText value="User ID"></h:outputText>
<h:inputText id="useid" value="#{userBean.userId}" required="true" requiredMessage="User Name is Mandatory"></h:inputText>
<h:outputText value="Password"></h:outputText>
<h:inputSecret id="pwd" value="#{userBean.password}" required="true" requiredMessage="Password is Mandatory" ></h:inputSecret>
<h:commandButton value="Login" action="#{userBean.validateLogin}" id="login3" onclick="keepfields()"></h:commandButton>
<h:commandButton type="reset" value="Reset" action="#{userBean.logout}" onclick="clearFields()"></h:commandButton>
</h:panelGrid>
<h:panelGrid>
<h:message for="databasedd" style="font-weight: bold; color :red; " ></h:message>
<h:message for="host" style="font-weight: bold; color :red; "></h:message>
<h:message for="useid" style="font-weight: bold; color :red; "></h:message>
<h:message for="pwd" style="font-weight: bold; color :red; "></h:message>
<h:message for="dbname" style="font-weight: bold; color :red; "></h:message>
</h:panelGrid>
</div>
<div id="oracle" class="oracle" >
<h:panelGrid id="grid3"
columns="2" >
<h:outputLabel value="Host" styleClass="outputLabel" id="label6"></h:outputLabel>
<h:inputText id="host1" value="#{userBean.host}" required="true" requiredMessage="Host Name is Mandatory"></h:inputText>
<h:outputText value="User ID"></h:outputText>
<h:inputText id="useid1" value="#{userBean.userId}" required="true" requiredMessage="User Name is Mandatory"></h:inputText>
<h:outputText value="Password"></h:outputText>
<h:inputSecret id="pwd1" value="#{userBean.password}" required="true" requiredMessage="Password is Mandatory" ></h:inputSecret>
<h:commandButton value="Login" action="#{userBean.validateLogin}" id="login4" onclick="keepfields()" >
</h:commandButton>
<h:commandButton type="reset" value="Reset" action="#{userBean.logout}" onclick="clearFields()"></h:commandButton>
</h:panelGrid>
<h:panelGrid>
<h:message for="host1" style="font-weight: bold; color :red; "></h:message>
<h:message for="useid1" style="font-weight: bold; color :red; "></h:message>
<h:message for="pwd1" style="font-weight: bold; color :red; "></h:message>
</h:panelGrid>
</div>
</div>
</h:form>