java - Apache Wicket : Onclick of a form button, I need to call a small javascript function - Stack Overflow

admin管理员组

文章数量:1405170

Onclick of a form button, I need to call a small javascript function. This javascript function should validate some fields in the same form and then call the onSubmit() of the form which is in java.

Main Idea is that let validate happen in client side and not in java.

Complete idea :

I have help.html file as shown below :

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

In help.java, I created a WebMarkupContainer and added this form with this submit button :

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

On click of the button in html, it calls onSubmit() and here we can do a validation on the text box values. But I need to do all the validations in the HTML page itself.

OnClick of the Button Save, it should call a javascript funciton as shown below :

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

Can this be done?

Onclick of a form button, I need to call a small javascript function. This javascript function should validate some fields in the same form and then call the onSubmit() of the form which is in java.

Main Idea is that let validate happen in client side and not in java.

Complete idea :

I have help.html file as shown below :

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

In help.java, I created a WebMarkupContainer and added this form with this submit button :

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

On click of the button in html, it calls onSubmit() and here we can do a validation on the text box values. But I need to do all the validations in the HTML page itself.

OnClick of the Button Save, it should call a javascript funciton as shown below :

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

Can this be done?

• java
• javascript
• wicket

Share Improve this question Follow edited Jul 2, 2013 at 10:09 AJITH SIMHA T.N. asked Jun 28, 2013 at 11:25 AJITH SIMHA T.N.AJITH SIMHA T.N. 3311 silver badge55 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

You need an AjaxSubmitLink or something like this. The you need to create a new IAjaxCallListener

public class MyAjaxCallListener implements IAjaxCallListener{

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

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

// ...     not needed overrides can return null

}

Then in your AjaxSubmitLink you can add this AjaxCallListener

   @Override
   protected void updateAjaxAttributes(AjaxRequestAttributes attributes) {
      super.updateAjaxAttributes(attributes);
      attributes.getAjaxCallListeners().add(new MyAjaxCallListener());
   }

Here you have an example Try if yourself

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

本文标签：