How to display data with data received from an InputText using JSF?

Question

I have created a backend system for a travel agency using Spring boot with working tests and know that all repositories work fine. I need to retrieve trips from backend repository based on location inputed by user in a JSF textInput. The output should display each Trip as a button( only temporarly,will eventually switch to cards). I have managed to display top 5 trips to simulate an example.

I dont get any error, but when I press submit button for search it prints out that location variable is null in TripController which means variable has not been declared form inputext. What am I doing wrong?

Here is the full application code.

TripController:

import org.springframework.beans.factory.annotation.Autowired;
import org.studentnr.backend.entities.Trip;
import org.studentnr.backend.service.TripService;

import javax.enterprise.context.RequestScoped;
import javax.inject.Named;
import java.io.Serializable;
import java.util.List;

@Named
@RequestScoped
public class TripController implements Serializable {



@Autowired
private TripService tripService;

private List<Trip> topNTripsList;

private List<Trip> tripsByLocationList;

private String location;

private Integer numberOfTopTrips = 5;


public List<Trip> getTopNTripsList(){
    topNTripsList = tripService.getTop_N_Trips( numberOfTopTrips );
    return topNTripsList;
}

public Integer getNumberOfTopTrips() {
    return numberOfTopTrips;
}

public void setNumberOfTopTrips(Integer numberOfTopTrips) {
    this.numberOfTopTrips = numberOfTopTrips;
}

public void setTopNTripsList( List<Trip> topNTripsList ) {
    this.topNTripsList = topNTripsList;
}

public List<Trip> getTripsByLocationList() {
    System.out.println("getTripsList chosen. location: "+ this.location );
    return this.tripsByLocationList;
}

public void retrieveTripsByLocation() {
    System.out.println(" from retrieveTripByLocation chosen. location: "+ this.location );
     this.tripsByLocationList = tripService.getByTripLocationOrderByCostAscending( 
this.location );
}

public String getLocation() {
    return location;
}

public void setLocation(String location) {
    this.location = location;
}
}

UI:

 <sec:anonymous>
        <h2>Top #{tripController.numberOfTopTrips} Trips</h2>
        <c:forEach var="trip" items="#{tripController.topNTripsList}">
            <h:form prependId="false">
                <a id="linkToTripDetailId" href="tripDetail.xhtml" class="btn">
                    Location: #{trip.location}  Title: #{trip.title}  #{trip.cost}NOK
                </a>
                <br/>
            </h:form>
        </c:forEach>
        <h3>Login to book Trips!</h3>



        <hr/>
        <h2>Search Trips</h2>
        <h:form>
            <h:outputText value="Location: "/>
            <h:inputText id="inputTxtLocationIdAnonymous" value="#{tripController.location}" class="login"/>
            <h:commandButton id="btnSubmitSearchLocationIdAnonymous" value="Search"
                             action="#{tripController.retrieveTripsByLocation}" class="gameBtn"/>
            <hr/>
            <c:forEach var="trip" items="#{tripController.tripsByLocationList}">
                <h:form prependId="false">
                    <h:commandButton
                            value="#{trip.cost}NOK   Departure:#{trip.departureDate} Return:#{trip.returnDate}"
                            class="Btn"
                    />
                </h:form>
            </c:forEach>
        </h:form>
    </sec:anonymous>