У меня есть форма с текстовым полем и кнопкой отправки, и я хотел бы отключить кнопку отправки, если текстовое поле пусто, и снова включить ее, как только текстовое поле больше не будет пустым

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

Есть идеи, как это сделать?

1
LDropl 9 Фев 2021 в 11:41

1 ответ

Лучший ответ

Вам нужно добавить 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);
    }
});
4
magicmn 9 Фев 2021 в 10:24