How to fill an inputText based on another inputText?

Question

I’m a beginner in JSF, Primefaces. I have a form and I would like that when a field received a certain value, another field would return information from the Database. Example:

On the field txRecebida, I fill with 1001, automatically in the field txRecebidaNome this account name appears.

Follow my view:

<p:fieldset legend="Lançamento Padrão">
    <h:panelGroup styleClass="painel" layout="block">
        <h:panelGroup styleClass="form-group col-lg-6 col-xl-6"  
         layout="block">
            <p:outputLabel for="txRecebida" value="Taxas Recebidas à Conta" />
            <p:inputText class="form-control col-4" id="txRecebida"
         label="Taxas Recebidas à Conta"
          value="#{EmpresaMb.planoTaxaRecebida}" />
            <p:inputText class="form-control col-8" id="txRecebidaNome"
        label="txRecebidaNome" disabled="true" />
        </h:panelGroup>
</p:fieldset>

Answer 1

I did something similar to what you need, a look:

Enter a code to perform the search for a vehicle that is registered in the Database, in order to return me the speed of the same.

If there is a record, I will update the second field according to my return parameter which in this case is the speed.

If there is no data, no vehicle will be found.

Here’s an excerpt from my page that looks like yours:

 <p:fieldset legend="Velocidade de um veículo" style="width:45%; margin-top:15%; margin-left:22%;">

                    <br />
                    <h:panelGroup styleClass="painel" layout="block">
                        <h:panelGroup styleClass="form-group col-lg-6 col-xl-6"
                            layout="block">
                            <p:outputLabel for="txtCodigo" value="Código:"  style="margin-left:4.5%"/>
                            <p:inputText class="form-control col-4" id="txtCodigo"                                
                                value="#{vehicle.id}" style="margin-left:0.4%">
                                 <p:ajax event="keyup" update="txtSpeedRecebido" listener="#{vehicle.actionCarregarCodigo}"/>
                                </p:inputText>                                    
                            <p:outputLabel for="txtSpeedRecebido" value="Velocidade:" style="margin-left:2%;"/>                             
                            <p:inputText class="form-control col-8" id="txtSpeedRecebido" style="margin-left:0.4%"
                                value="#{vehicle.speed}" disabled="true" />  

                                <br />
                                <p:messages id="messages" showDetail="true"
                                  autoUpdate="true" closable="true" />                                   
                        </h:panelGroup>
                        </h:panelGroup>
                        <br /> 

                        </p:fieldset>


                <p:commandButton value="Reset" id="reset"
                style="margin-left:22%; margin-top:2%;"
                action="#{vehicle.reset}"
                process="@this" update="txtCodigo, txtSpeedRecebido">
                <p:resetInput
                    target="txtCodigo, txtSpeedRecebido" />
                </p:commandButton>

Now the secret revealed:

<p:ajax event="keyup" update="txtSpeedRecebido" listener="#{vehicle.actionCarregarCodigo}"/>

Let’s use the Primefaces Ajax that is related in the first input. Now let’s look how is distributed my Managedbean:

public String getSpeedById() {

        String speed = null;

        try {           

        TesteDAO dao = new TesteDAO();

        int cod = Integer.parseInt(id);

        speed = dao.pesquisa(cod);  

        if(speed == null)   
             FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(FacesMessage.SEVERITY_WARN, "Warning:", " Nenhum veículo encontrado."));

        else  FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, "Info:", " Velocidade encontrada."));


    }catch (Exception e) {
        e.printStackTrace();
    }

        return speed;
    }   

The above method is what I will perform the search in the Database.

public void actionCarregarCodigo(AjaxBehaviorEvent event) throws AbortProcessingException {

        this.speed = this.getSpeedById();           
    }

Above is the method where you will perform the search automatically for me. Note that I am referencing the variable speed to receive the result and display in the second field.

Ajaxbehaviorevent is a class representing the behavior of the Ajax-specific component.

as described in:

Ajaxbehaviorevent

public void reset() {

        speed = null;
        id = null;

    }    

Above is a method just to wipe data from form.

I hope I’ve helped.