#RequestScoped Bean not working as expected? (JSF) - jsf

Question

I have a JSF page where I can add or delete "planes" in my database (JBDC). To help with that I have two beans (Both #RequestScoped), one "controller" and one "backing bean".
Here is the JSF page:
And with some inputs:
After inputting info and adding a photo, the "airplane" is added to my page, and I reload the page.
Here is how the page looks after submitting:
My issue here is that, the input textfields gets "populated" from the bean with the info, and also the delete plane field gets populated with the airplane id. I want these fields to be empty after refreshing, and thats why I thought using #RequestScoped would be useful. Also, If I try to refresh the page from my web browser, it just tries to resend the form.
How can I avoid the fields being populated with data from the bean?
Also, here is bean code:
#Named
#RequestScoped
public class AddAirplaneCtrl implements Serializable{
#Inject
private FlightModel flightModel;
private ListAirplaneBB listAirplaneBB;
protected AddAirplaneCtrl(){
;
}
#Inject
public void addListAirplaneBB(ListAirplaneBB listAirplaneBB){
this.listAirplaneBB = listAirplaneBB;
}
public String addPlane(){
listAirplaneBB.setError(null);
listAirplaneBB.setMessage(null);
if(failed any of the validation parts){
return /some/site?faces-redirect=false";
}
//add plane
return /some/site?faces-redirect=true";
}
}
And the Backing Bean:
#Named
#RequestScoped
public class ListAirplaneBB implements Serializable{
#Inject
private FlightModel flightModel;
//private variable fields
public List<Airplane> getAllPlanes(){
return flightModel.getAirplaneList().findAll();
}
public int getTotalPlanes(){
return getAllPlanes().size();
}
//GETTERS and SETTERS
}
And finally my jsf page:
<div class="contbox">
<h3>
<h:outputLabel value="Edit Planes" />
</h3>
<c:if test="#{not empty listAirplaneBB.error}">
<div class="alert alert-danger"
id="success-alert">
<span class="glyphicon glyphicon-remove" />
<h:outputText value="#{listAirplaneBB.error}" />
<button type="button"
class="close"
data-dismiss="alert">
<h:outputLabel value="x" />
</button>
</div>
</c:if>
<c:if test="#{not empty listAirplaneBB.message}">
<div class="alert alert-success">
<span class="glyphicon glyphicon-remove" />
<h:outputText value="#{listAirplaneBB.message}" />
<button type="button"
class="close"
data-dismiss="alert">
<h:outputLabel value="x" />
</button>
</div>
</c:if>
<h4>Add A Plane</h4>
<h:form enctype="multipart/form-data">
<table id="addtable"
class="table">
<thead>
<tr>
<th>
<h:outputLabel value="Plane Make" />
</th>
<th colspan="1">
<h:outputLabel value="Plane Model" />
</th>
<th colspan="1">
<h:outputLabel value="Plane Seats" />
</th>
<th colspan="1">
<h:outputLabel value="Plane Photo" />
</th>
</tr>
</thead>
<tr>
<td>
<h:inputText value="#{listAirplaneBB.make}">
</h:inputText>
</td>
<td>
<h:inputText value="#{listAirplaneBB.model}">
</h:inputText>
</td>
<td>
<h:inputText value="#{listAirplaneBB.seats}">
</h:inputText>
</td>
<td>
<h:inputFile value="#{listAirplaneBB.file}" >
</h:inputFile>
</td>
<td>
<h:commandButton value="Add Plane"
class="btn btn-primary"
action="#{addAirplaneCtrl.addPlane()}" >
</h:commandButton>
</td>
</tr>
</table>
</h:form>
<h4>Delete Plane</h4>
<h:form>
<h:panelGrid columns="3" class="table">
<h:outputLabel value="Plane ID" />
<h:inputText value="#{listAirplaneBB.airPlaneId}"/>
<h:commandButton value="Delete"
class="btn btn-primary"
action="#{addAirplaneCtrl.deleteAirplane}" >
</h:commandButton>
</h:panelGrid>
</h:form>
</div>

Answer 1

Your browser cache the inputs.
JSF 2.2 Solution
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:pt="http://xmlns.jcp.org/jsf/passthrough">
...
<f:passThroughAttribute name="autocomplete" value="off"/>
...
jQuery Solution:
<h:form styleClass="form">...</h:form>
<script>
$(function(){
$(".form").attr("autocomplete", "off");
});
</script>
You can find more information here.