提交按钮不提交只触发InputText的onChange事件答案

【问题标题】：submit button does not submit but only triggers InputText's onChange event提交按钮不提交只触发InputText的onChange事件
【发布时间】：2016-05-12 16:28:50
【问题描述】：

当用户使用 ajax 在输入文本中键入内容时，我会自动为单选按钮选择一个值。问题是：当用户在输入文本中输入内容，直接点击Get提交表单时，由于change事件，导致表单不提交，只调用ajax，radio更新。

再次点击Get 按钮，提交表单。

我也不想使用keyup，因为它可能会在输入时打扰用户。

我使用 primefaces 5.1

这是我的代码：

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

还有豆子：

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

【问题讨论】：

第二次点击是否有效？
是的，它适用于第二次点击。我更新了问题。
如果您在输入文本后使用 TAB 键，您也不会看到此问题，如果您单击并按住几秒钟并松开，您也不会看到错误。已知问题；在第一次点击之前的 ajax 正在继续，因此实际提交不会发生
查看这个答案stackoverflow.com/questions/11408130/…
您在输入更改期间更新了整个表单，包括提交按钮（因此它会在您单击它的那一刻发生更改，可能会导致您观察到的问题）。更新整个表格是绝对必要的吗？只更新真正需要更新的部分，看看是否能解决问题。

标签： jsf primefaces onchange ajax-update

【解决方案1】：

提交按钮不提交只会触发InputText的onChange事件

发生这种情况是因为输入字段 ajax 的 blur 事件会在您单击提交按钮时更新它。这样，与提交按钮相关联的 JavaScript/Ajax 逻辑就不能再保证工作了，因为源元素已从 DOM 中删除。

确保您没有覆盖 ajax 更新中的提交按钮。

而不是更新整个表单，

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

只更新真正需要更新的部分，这只是您特定情况下的输入：

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

或者，如果您不想在有很多输入时跟踪所有这些 ID，请使用 PFS：

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

【讨论】：