reset inputtext on change of selectOneMenu - jsf-2

Question

I want to clear the inputText when user select "select country admin" in selecOneMenu, I am able to do this by changing itemValue=" " but it fails for rquired="true" condition on submit
<h:selectOneMenu id="eidx" value="#{countryBean.selectedEid}" required="#{!countryBean.isEditMode}"
requiredMessage="#{msg['country.label.validation.select.countryadmin']}" >
<f:selectItem itemLabel="Select Country Admin" itemValue="#{null}"/>
<f:selectItem itemLabel="Add New User" itemValue="1"/>
<f:selectItems value="#{countryBean.allUserDetails}" var="user" itemLabel="#{user.lastName}, #{user.firstName} | (#{user.eid})" itemValue="#{user.eid}"/>
<p:ajax listener="#{countryBean.getUserDetail}" process="#this" update="userDetailPanel" onstart="statusDialog.show();" oncomplete="statusDialog.hide();"/>
</h:selectOneMenu>
</div>
<h:panelGroup id="userDetailPanel">
<div class="clear"> </div>
<div class="form-label">
<label title="EID" for="EID">#{msg['country.label.EID']}</label>
</div>
<div class="form-field" >
<h:inputText id="eidPX" value="#{countryBean.usersDetailsDTO.eid}" disabled="#{not(countryBean.selectedEid eq '1')}" resetValues="true">
<f:validator validatorId="regexVal"/>
</h:inputText>
</div>
<div class="clear"> </div>
<div class="form-label">
<label title="EID" for="EID">#{msg['country.label.FirstName']}</label>
</div>
<div class="form-field" >
<h:inputText validatorMessage="#{msg['country.label.validation.select.first.name']}" required="#{(countryBean.selectedEid eq '1')}" requiredMessage="Enter first Name" value="#{countryBean.usersDetailsDTO.firstName}" id="empFName" disabled="#{not(countryBean.selectedEid eq '1')}">
<f:validator validatorId="nameValidation" />
</h:inputText>
</div>
<div class="clear"> </div>
<div class="form-label">
<label title="EID" for="EID">#{msg['country.label.lastname']}</label>
</div>

Answer 1

I have done this by using javascript
document.getElementById("eidx").value="";