Binding Dynamic Text Fields Created By Javascript To Bean

i have the following code, this creates the number of textfields that i enter inside the textField.

Solution 1:

You can better approach this with a backing bean than using Javascript. Using ajax you wouldn't need any page refreshes. Something along the lines of this:

HTML

<h:form><p><h:inputTextvalue="#{bean.noOfFields}" /><h:commandButtonvalue="Create fields"><f:ajaxexecute="@form"render="@form" /></h:commandButton></p><hr /><p><c:forEachitems=#{bean.values}varStatus="counter">
            Field no. #{counter.index} <h:inputTextvalue="#{bean.values[counter.index}" /><br /></c:forEach><h:commandButtonaction="#{bean.submit}"value="Save" /></p></h:form>

Bean.java

@ManagedBean@ViewScopedpublicclassBean {
    privateString noOfFields = 1;
    privateString[] values = newString[1];

    publicvoidsubmit() {
        // save values in database
    }

    publicStringgetNoOfFields() {
        return noOfFields;
    }

    publicvoidsetNoOfFields(String noOfFields) {
        try {
            values = newString[Integer.valueOf(noOfFields)];
            this.noOfFields = noOfFields;
        catch(NumberFormatException ex) {
            values = newString[1];
            noOfFields = "1";
        }
    }

    publicString[] getValues() {
        return values;
    }
}

Note

In case you want to stick to a keyup event, you can easily bind this to <h:inputText value="#{bean.noOfFields}" /> too. Though I'd recommend not doing this, since every keystroke will invoke another ajax call.

Share