Question

Im new in this JavaScript world, but i have this problem i want to solve.
I need to write a generic function in javaScript, so when someone fill the value of an inputText the attribute of the chekbox next to it change to ‘inline’, and if the value is deleted the attribute of the checkbox change to ‘none’.

Im using Primfaces 3, here is my code.

<p:inputText id="inpValRezV" value="#{daniosParcialesBean.daniosParcialesDto.valorRezagoV}"
                    onchange="hideCheckFromInput(this.value, 'chkValRezV');"/>  
<p:selectBooleanCheckbox widgetVar="chkValRezV" id="chkValRezV" 
                    value="#{daniosParcialesBean.daniosParcialesDto.mcaRezagoV}" />

And my javaScript code is:

   function hideCheckFromInput(valueInput, idCheckBox){
     var chkBox = document.getElementById(idCheckBox);
     if(valueInput == ''){
        chkBox.style.display = 'none';
     }else{
        chkBox.style.display = 'inline';
    }
  }

The last fragment of code doesn’t works because getElementById is returning null!, however the next fragment works fine!

    function hideCheckFromInput(valueInput, idCheckBox){
     var chkBox = document.getElementById('principalDaniosTotales:documentacion:frmNegociacion:chkValRezV')
     if(valueInput == ''){
        chkBox.style.display = 'none';
     }else{
        chkBox.style.display = 'inline';
    }
  }

The problem is that i don’t want to hardcode the full route of the checkbox, i’m trying to write a generic function to save lines of codes and reduce de javascript code.

Thanks in advance!

Answer 1

You could take advantage of the fact that the both elements have the same client ID prefix.

<p:inputText id="inpValRezV" onchange="hideCheckFromInput(this, 'chkValRezV')" />
<p:selectBooleanCheckbox id="chkValRezV" />

with

function hideCheckFromInput(input, checkboxId) {
    var checkbox = document.getElementById(input.id.substring(0, input.id.lastIndexOf(":") + 1) + checkboxId);
    checkbox.style.display = (input.value) ? "inline" : "none";
}

You could alternatively also just take advantage of JSF2/PrimeFaces ajax powers so that you don’t need any line of JS code:

<p:inputText value="#{daniosParcialesBean.daniosParcialesDto.valorRezagoV}">
    <p:ajax update="checkboxWrapper" />
</p:inputText>
<h:panelGroup id="checkboxWrapper">
    <p:selectBooleanCheckbox rendered="#{not empty daniosParcialesBean.daniosParcialesDto.valorRezagoV}" />
</h:panelGroup>