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

Question

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
    }
}

If you use TAB key after input text you dont see this issue also if you click and hold for few sec and release you dont see the error. Known issue; on first click the previous ajax is being proceed hence actual submit not happen — vels4j, Feb 03 '16 at 13:46
Check this answer http://stackoverflow.com/questions/11408130/hcommandbutton-hcommandlink-does-not-work-on-first-click-works-only-on-second/11412138#11412138 — vels4j, Feb 03 '16 at 13:47
You're updating the **entire** form during input change, including the submit button (so it gets changed around the moment you click it, potentially causing trouble you observed). Is updating the entire form absolutely necessary? Update only the parts which really need to be updated and see if that solves the problem. — BalusC, Feb 03 '16 at 14:03
BalusC gave a general solution. Maybe you implemented it wrongly... — Kukeltje, Feb 03 '16 at 17:07
@BalusC your solution works. I put the button in a separat panel and all the other elements in another Panel which is to be updated. please add your comment as an answer so that I accept it — adranale, Feb 09 '16 at 10:27

score 2 · Accepted Answer · edited May 23 '17 at 11:50

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)" />

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

1 Answers1