how to add input value to selectmanylistbox
Hi,
I am new JSF
My requirement is like this
I have an inputText and selectManyListbox
the value entered in input field be added to selectManyListbox
How could I do this using javascript
I am trying something like this
<script language="JavaScript">
function addItem(){
with (document.forms.formtest){
var strText = form["formtest:textitem"].value;
if (strText.length > 0){
var nLength = listitems.options.length;
listitems.options[nLength] =new Option(strText, nLength, false,false);
form["formtest:textitem].value = "";
}
else
alert("Please enter an item.");
}
}
</script>
<h:form id="formtest" />
<h:panelGrid columns="2">
<h:outputText value="Enter the Sales Part number" />
<h:inputText id="textitem" value="textitem" onkeydown="addItem()" />
<h:commandButton value="ADD" style="width: 50px;"/>
<h:selectManyListbox style="width: 300px;">
<f:selectItems id="listitems" value=""/>
</h:selectManyListbox>
</h:panelGrid>
[1868 byte] By [
Ruthera] at [2007-11-26 17:24:32]
# 1
You can't use client-side JS to manipulate values of server-side JSF. This makes JSF strong and secure.
Just move the logic from JS to the backing bean :)
JSF<h:form>
<h:inputText value="#{myBean.inputValue}" />
<h:selectManyListbox value="#{myBean.selectedItems}">
<f:selectItems value="#{myBean.selectItems}" />
</h:selectManyListbox>
<h:commandButton value="add item" action="#{myBean.addItem}" />
</h:form>
MyBeanprivate String inputValue;
private List selectedItems;
private List selectItems;
// + getters + setters
public void addItem() {
selectItems.add(new SelectItem(inputValue));
}
# 2
I changed the logic from JavaScript to backing bean this time getting an error of
javax.faces.FacesException: javax.servlet.ServletException: Conversion Error setting value ''{0}'' for ''{1}''.
please help me where I am going wrong
here is the code
<html>
<f:view>
<body><h:form>
<h:inputText value="#{myBean.inputValue}"/>
<h:selectManyListbox value="#{myBean.selectedItems}">
<f:selectItems value="#{myBean.selectItems}"/>
</h:selectManyListbox>
<h:commandButton value="add item" action="#{myBean.addItem}"/>
</h:form></body>
</f:view>
</html>
here is the backing bean
import java.util.List;
import javax.faces.model.SelectItem;
public class AddElement {
public AddElement() {
}
private String inputValue;
private List selectedItems;
private List selectItems;
// + getters + setters
public void addItem() {
selectItems.add(new SelectItem(inputValue));
}
public void setInputValue(String inputValue) {
this.inputValue = inputValue;
}
public String getInputValue() {
return inputValue;
}
public void setSelectedItems(List selectedItems) {
this.selectedItems = selectedItems;
}
public List getSelectedItems() {
return selectedItems;
}
public void setSelectItems(List selectItems) {
this.selectItems = selectItems;
}
public List getSelectItems() {
return selectItems;
}
}
and the faces-config.xml file
<managed-bean>
<managed-bean-name>myBean</managed-bean-name>
<managed-bean-class>com.AddElement</managed-bean-class>
<managed-bean-scope>session</managed-bean-scope>
</managed-bean>
