I am facing a trouble with a call to JavaScript from Wicket Java code. I have a form with two text fields, one button and one hidden field. I want to concatenate the texts of the text fields and set that concatenated text to the hidden field when that button is clicked, using JavaScript.

Here is my code:

Java:

Form form = new Form("field");
form.setOutputMarkupId(true);


TextField textField1 = new TextField("field1");
textField1.setOutputMarkupId(true);
form.add(textField1);

TextField textField2 = new TextField("field2");
textField2.setOutputMarkupId(true);
form.add(textField2);

HiddenField hiddenField = new HiddenField("hiddenField");
hiddenField.setOutputMarkupId(true);
form.add(hiddenField);

Button concatButton = new Button("concat");
concatButton.add(new SimpleAttributeModifier("onclick", "concat"));
form.add(concatButton);

JavaScript:

<script type="javascript">
    function concat() {
        var val1=document.getElementById("field1").value;
        var val2=document.getElementById("field2").value;
        document.getElementById("hiddenField").value=val1+val2;         
    }
</script>

But it is not working. Any information will be very helpful to me. Thank you.
Note: I have also tried AjaxSubmitButton, but that was giving me an error.

I am facing a trouble with a call to JavaScript from Wicket Java code. I have a form with two text fields, one button and one hidden field. I want to concatenate the texts of the text fields and set that concatenated text to the hidden field when that button is clicked, using JavaScript.

Here is my code:

Java:

Form form = new Form("field");
form.setOutputMarkupId(true);


TextField textField1 = new TextField("field1");
textField1.setOutputMarkupId(true);
form.add(textField1);

TextField textField2 = new TextField("field2");
textField2.setOutputMarkupId(true);
form.add(textField2);

HiddenField hiddenField = new HiddenField("hiddenField");
hiddenField.setOutputMarkupId(true);
form.add(hiddenField);

Button concatButton = new Button("concat");
concatButton.add(new SimpleAttributeModifier("onclick", "concat"));
form.add(concatButton);

JavaScript:

<script type="javascript">
    function concat() {
        var val1=document.getElementById("field1").value;
        var val2=document.getElementById("field2").value;
        document.getElementById("hiddenField").value=val1+val2;         
    }
</script>

But it is not working. Any information will be very helpful to me. Thank you.
Note: I have also tried AjaxSubmitButton, but that was giving me an error.

• java
• javascript
• wicket

Share Improve this question Follow edited Jan 20, 2011 at 15:49 Pops 30.9k3737 gold badges137137 silver badges153153 bronze badges asked Jan 20, 2011 at 14:22 Tapas BoseTapas Bose 29.9k7878 gold badges220220 silver badges338338 bronze badges 5

• 1 1) Please format your code properly 2) Without seeing the source HTML that Wicket is generating this is impossible to answer. – Richard H Commented Jan 20, 2011 at 14:32
• can you show us the generated html? – fmucar Commented Jan 20, 2011 at 14:32
• Why do you need this? What's the actual problem you want to solve? Wicket probably has a much more efficient way of achieving what you want. – biziclop Commented Jan 20, 2011 at 14:35
• This is my HTML code: <form wicket:id="field"> <input wicket:id="field1" /> <input wicket:id="field2" /> <input type="hidden" wicket:id="hiddenField" /> <input type="button" wicket:id="concat" /> </form> In my first post I have tried to show this code, but the html was not displaying. – Tapas Bose Commented Jan 20, 2011 at 16:44
• well your javascript function doesn't work as none of your form elements have ids - what you are passing to the Wicket constructors is a wicket:id. See tetsuo's answer on how to change this behaviour. – Richard H Commented Jan 20, 2011 at 19:02

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

TextField.setOutputMarkupId() will make the ponent to print the id attribute, but the id attribute is not, by default, the same as the ponent id (the first String parameter you always pass in the constructor), but a generated one.

Try this:

textField1.setMarkupId("field1");
textField2.setMarkupId("field2");
hiddenField.setMarkupId("hiddenField");

And, if you don't use the TextFields' values on the server-side (only the hiddenField value), you could also not add them as Wicket ponents at all, and leave them just as static HTML (with fixed ids).

[Edited to improve clarity through an example]

Another option is to generate the script (or the call to a function), using the generated IDs:

HomePage.java

public class HomePage extends WebPage {
    public HomePage() {
        Component field1 = new TextField("field1").setOutputMarkupId(true);
        Component field2 = new TextField("field2").setOutputMarkupId(true);
        Component hidden = new HiddenField("hidden").setOutputMarkupId(true);

        String script = String.format("concatValues('%s','%s','%s');",
                field1.getMarkupId(), field2.getMarkupId(), hidden.getMarkupId());
        Component concat = new Button("concat").add(new SimpleAttributeModifier("onclick", script));

        Component show = new Button("show").add(new SimpleAttributeModifier("onclick",
            String.format("alert(document.getElementById('%s').value);", hidden.getMarkupId())));

        add(new Form("form").add(field1, field2, hidden, concat, show));
    }
}

HomePage.html

<html xmlns:wicket="http://wicket.apache">
<head>
  <script type="text/javascript">
function concatValues(field1Id, field2Id, hiddenId) {
  document.getElementById(hiddenId).value = document.getElementById(field1Id).value + document.getElementById(field2Id).value;
}
  </script>
</head>
<body>
  <form wicket:id="form">
    <input wicket:id="field1">
    <input wicket:id="field2">
    <input wicket:id="hidden" type="hidden">
    <input wicket:id="concat" type="button" value="Concat">
    <input wicket:id="show" type="button" value="Show hidden value">
  </form>
</body>
</html>

Now, an example to do this with Ajax (the concat operation is done on the server, not in javascript):

HomePage.java

public class HomePage extends WebPage {
    String field1;
    String field2;
    String hidden;
    public HomePage() {
        Form form = new Form("form", new CompoundPropertyModel(this));
        form.add(new TextField("field1"));
        form.add(new TextField("field2"));
        form.add(new HiddenField("hidden"));
        form.add(new AjaxButton("concat") {
            @Override
            protected void onSubmit(AjaxRequestTarget target, Form<?> form) {
                hidden = field1 + field2;
                target.addComponent(form);
            }
        });
        form.add(new AjaxButton("show") {
            @Override
            protected void onSubmit(AjaxRequestTarget target, Form<?> form) {
                target.appendJavascript("alert('" + JavascriptUtils.escapeQuotes(hidden) + "')");
            }
        });
        add(form);
    }
}

HomePage.html

<html xmlns:wicket="http://wicket.apache">
<body>
  <form wicket:id="form">
    <input wicket:id="field1">
    <input wicket:id="field2">
    <input wicket:id="hidden" type="hidden">
    <input wicket:id="concat" type="button" value="Concat">
    <input wicket:id="show" type="button" value="Show hidden value">
  </form>
</body>
</html>

new SimpleAttributeModifier("onclick", "concat();")

or

link.add(new AttributeAppender("onclick", new Model("concat();"), ";"));

better to do like below

https://cwiki.apache/WICKET/calling-javascript-function-on-wicket-ponents-onclick.html

I have solved the problem this way as none of the above procedure is working in my case, this is perhaps due to the structure of my page:

                TextField textField1 = new TextField("field1");
                textField1.setOutputMarkupId(true);
                textField1.setMarkupId("field1");

                TextField textField2 = new TextField("field2");
                textField2.setOutputMarkupId(true);
                textField2.setMarkupId("field2");

                HiddenField hiddenField = new HiddenField("hidden");
                hiddenField.setOutputMarkupId(true);
                hiddenField.setMarkupId("hiddenField");


                String function = "document.getElementById('"+ hiddenField.getMarkupId() +"').value = document.getElementById('"+ textField1.getMarkupId() +"').value + ' ' + document.getElementById('"+ textField2.getMarkupId() +"').value;";
                Button concatButton = new Button("concat");
                concatButton.add(new AttributeAppender("onclick", new Model(function), ";"));

And it worked. Thanks for helping me.