Referencing other fields

An example of how you can send along different data with a method call to the backend.

Referencing other fields with a submit

You use the :{} notation to run a css selector at the moment of action. :{form} is specific for an m:submit call and references your own wrapping form.

This example includes an action taking a text value from a paragraph, a value from a text field and a form data.

This is a paragraph

Client

<section class="example">
<p class="sample-paragraph">This is a paragraph</p>

<input id="my_input" type="text" value="Hello world" />

<form m:submit="display(:{form}, :{#my_input}, :{.example .sample-paragraph})">
    <label for="firstName">First name: </label> <input type="text" id="firstName" name="firstName" value="도윤" />
    <label for="lastName">Last name: </label> <input type="text" id="lastName" name="lastName" value="김" />
    <input id="btn_displayName" type="submit" value="Submit">
</form>

<div class="example-result" th:text="${result}"></div>
</section>

Server

import io.getmedusa.medusa.core.annotation.UIEventPage;
import io.getmedusa.medusa.core.attributes.Attribute;

import java.util.List;

import static io.getmedusa.medusa.core.attributes.Attribute.$$;

@UIEventPage(path = "/detail/submit-for-reference", file = "/pages/submit-for-reference.html")
public class SubmitWithReferenceController {

    public List<Attribute> setupAttributes(){
        return $$("result", "");
    }

    public List<Attribute> display(SampleForm form, String myInput, String myParagraph){
        return $$("result",
                form.firstName() + " " + form.lastName()
                + " || " + myInput + " || " + myParagraph);
    }

    public record SampleForm(String firstName, String lastName) { }

}