如果文本字段为空，则禁用 AjaxSubmitButton

如何解决如果文本字段为空，则禁用 AjaxSubmitButton

我有一个带有文本字段和提交按钮的表单，如果文本字段为空，我想禁用提交按钮，并在文本字段不再为空时再次启用它

<form wicket:id="form">
    <div class="row">
    <textarea wicket:id="textMessage" rows="4" cols="70" maxlength="300"></textarea>
    </div>
    <div>
        <button wicket:id="submitButton" class="btn btn-sm btn-primary">
            Save
        </button>
    </div>
</form>

Form<Void> form = new Form<>("form");
TextArea<String> textMessageField = new TextArea<>("textMessage",textMessageModel);
Button submitBtn = new Button("submitButton");
submitBtn.add(new AjaxFormSubmitBehavior(form,"click") {
    @Override
    protected void onError(AjaxRequestTarget target) {
        target.add(getForm());
    }

    @Override
    protected void onSubmit(AjaxRequestTarget target) {
       //.....some code
    }

    @Override
    protected void updateAjaxAttributes(AjaxRequestAttributes attributes) {
        super.updateAjaxAttributes(attributes);
        attributes.setPreventDefault(true);
        }
    });
form.add(textMessageField);
form.add(submitBtn);

有什么想法怎么做吗？

解决方法

您需要在文本字段中添加 AjaxFormComponentUpdatingBehavior 或 OnChangeAjaxBehavior。

TextArea<String> textMessageField = new TextArea<>("textMessage",textMessageModel);
Button submitBtn = new Button("submitButton") {
    @Override
    protected void onConfigure() {
        super.onConfigure();
        String obj = textMessageField.getModelObject();
        setEnabled(obj != null && !obj.isEmpty());
    }
};
submitBtn.setOutputMarkupId(true);
textMessageField.add(new OnChangeAjaxBehavior() {
    @Override
    protected void onUpdate(AjaxRequestTraget target) {
        target.add(submitBtn);
    }
});