1

Onclick 一个表单按钮，我需要调用一个小的 javascript 函数。这个javascript函数应该验证相同表单中的一些字段，然后调用java中表单的onSubmit()。

主要思想是让验证发生在客户端而不是java中。

完整的想法：

我有 help.html 文件，如下所示：

<form wicket:id="form">
      <input type="text" wicket:id="one"/>
      <input type="text" wicket:id="two"/>
      <input type="submit" wicket:id="save"/>
</form>

在 help.java 中，我创建了一个 WebMarkupContainer 并使用这个提交按钮添加了这个表单：

    container.add(new Button("save") {
        @Override
        public void onSubmit() {
             //saved
        }
    });

单击 html 中的按钮时，它会调用onSubmit()，在这里我们可以对文本框的值进行验证。但我需要在 HTML 页面本身中进行所有验证。

保存按钮的OnClick，它应该调用一个javascript函数，如下所示：

    <form wicket:id="form">
          <input type="text" wicket:id="one"/>
          <input type="text" wicket:id="two"/>
          <input type="submit" wicket:id="save" onclick="validateRange()"/>
    </form>

JavaScript：

    function validateRange(){
          //logic
          //Submit the form
    }

这可以做到吗？

4

2 回答 2

5

你需要一个AjaxSubmitLink或类似的东西。你需要创建一个新的IAjaxCallListener

public class MyAjaxCallListener implements IAjaxCallListener{

@Override
public CharSequence getBeforeHandler(Component component) {
    return YOUR_JAVA_SCRIPT;
}

@Override
public CharSequence getBeforeSendHandler(Component component) {
    return YOUR_JAVA_SCRIPT;
}

// ...     not needed overrides can return null

}

然后在你的 AjaxSubmitLink 中你可以添加这个 AjaxCallListener

   @Override
   protected void updateAjaxAttributes(AjaxRequestAttributes attributes) {
      super.updateAjaxAttributes(attributes);
      attributes.getAjaxCallListeners().add(new MyAjaxCallListener());
   }
于 2013-06-28T11:36:15.373 回答
0

Here你有一个例子如果你自己试试

HTML：

<form id="form" action="#">
    <input id="text" type="text"/>
    <input type="button" onclick="validate()" value="TEST"/>
</form>

JS：

function validate() {
    var value = document.getElementById("text").value;
    if (value == "") {
        alert("you have to write something");
        return false;
    }
    else
        document.getElementById("form").submit();
}
于 2013-06-28T11:33:04.517 回答