submit button does not submit but only triggers InputText's onChange event

I am automatically selecting a value for radio button when the user types something in an input text using ajax. The problem is: when the user types something in the input text and directly submits the form by clicking Get, the form does not submit but only the ajax is called because of the change event and the radio is updated.

A second click on the Get button, submits the form.

I also do not want to use keyup since it migth disturb the user while typing.

I use primefaces 5.1

here is my code:

<h:form id="myForm">
    <p:selectOneRadio
        value="#{myBean.include}" id="IncludeRadio">
        <f:selectItem itemValue="Include" itemLabel="Include" />
        <f:selectItem itemValue="Exclude" itemLabel="Exclude" />
        <p:ajax process="@this" update="@form" />
    </p:selectOneRadio>
    <p:radioButton id="IncludeRadio0" for="IncludeRadio" itemIndex="0"/>
    <p:radioButton id="IncludeRadio1" for="IncludeRadio" itemIndex="1"/>

    <p:inputText
        value="#{myBean.fieldValue}"
        id="FieldValueInputText">
        <p:ajax process="@this" update="@form" />
    </p:inputText> 

    <p:commandButton id="GetButton"
                action="#{myBean.execute}"
                value="Get">
    </p:commandButton>
</h:form>

and the bean:

@ManagedBean
@SessionScoped
public class MyBean {
    public void setFieldValue(final String fieldValue) {
        if (fieldValue != null && !fieldValue.trim().isEmpty()) {
            if (!"Include".equals(getInclude())
                    && !"Exclude".equals(getInclude())) {
                setInclude("include");
            }
        } else {
            setInclude("");
        }
    }

    public void setInclude(String include) {
        this.include = include;
    }

    public String getInclude() {
        return this.include;
    }

    public void execute() {
        // do something
    }
}

Solution

submit button does not submit but only triggers InputText's onChange event

That happened because the blur event of the input field ajax-updates the submit button around the moment you click it. This way the JavaScript/Ajax logic associated with submit button is not guaranteed to work anymore, because the source element is removed from the DOM.

Make sure that you don't cover the submit button in the ajax update.

Instead of updating the entire form,

<p:ajax ... update="@form" />

update only the pieces which really need to be updated, which are only the inputs in your specific case:

<p:ajax ... update="IncludeRadio FieldValueInputText" />

Or if you'd rather like to not keep track of all those IDs when you have many inputs, grab PFS:

<p:ajax ... update="@(#myForm :input)" />