Bind HTML form parameters value to JAX-RS resource

In this post, you can see how to bind HTML form parameters value to JAX-RS resource

In order to accomplish this task, you have to follow two steps:

- indicate the JAX-RS resource path in the action attribute of the form

- use @FormParam to obtain the submitted values

Let's suppose that we have a JAX-RS resource that respond to the following path:

http://localhost:8080/JaxrsBindHTMLFormToResource_EE7/resources/user/order

Then the resources/user/order should be indicated in the action attribute as:

<form id="addId" method="post" action="resources/user/order">
 ...
</form>

Let's take the below HTML form:

<form id="addId" method="post" action="resources/user/order">
 <fieldset>
  <legend>Personal details</legend>
   <div>
    <label>First Name
     <input id="name" name="name" type="text" placeholder="First name only" required autofocus>
    </label>
   </div>
   <div>
    <label>Security code
     <input id="security" name="security" type="number" required title="The last three digits on the back of your card.">
    </label>
   </div>
   <div>
    <label>Country
     <input id="country" name="country" list="country-names" type="text" required>
     <datalist id="country-names">
      <option label="England" value="England"></option>
      <option label="Northern Ireland" value="Northern Ireland"></option>
      <option label="Ireland" value="Ireland"></option>
      <option label="Scotland" value="Scotland"></option>
      <option label="Wales" value="Wales"></option>
     </datalist>
    </label>
   </div>
   <fieldset>
    <legend>Card type</legend>
    <div class="card">                    
    <input id="visa" name="card" value="VISA" type="radio">
    <label for="visa">VISA</label>
    <input id="mastercard" name="card" value="Mastercard" type="radio">
    <label for="mastercard">Mastercard</label>
    <input id="amex" name="card" value="AMEX" type="radio">
    <label for="amex">AMEX</label>
   </div>
  </fieldset>
  <fieldset>
   <legend>Subscribe for</legend>
   <div class="order">                    
    <input id="newsletter" name="order" value="Newsletter" type="checkbox">
    <label for="newsletter">Newsletter</label>
    <input id="news" name="order" value="News" type="checkbox">
    <label for="news">News</label>
    <input id="promotions" name="order" value="Promotions" type="checkbox">
    <label for="promotions">Promotions</label>
   </div>
  </fieldset>
 </fieldset>
 <fieldset>
  <div>
   <button type=submit>Place Order</button>
  </div>
 </fieldset>
</form>

The @FormParam obtains the submitted values by indicating the values of each name attibute:

import java.util.Arrays;
import javax.ws.rs.FormParam;
import javax.ws.rs.Produces;
import javax.ws.rs.POST;
import javax.ws.rs.Path;
import javax.ws.rs.core.Response;

@Path("user")
public class OrderResource {

    @POST
    @Path("/order")
    @Produces("text/html") // default: */*
    public Response orderAction(
            @FormParam("name") String name,
            @FormParam("security") int sn,
            @FormParam("country") String country,
            @FormParam("card") String card,
            @FormParam("order") String[] order) {

        return Response.status(200)
           .entity("<h1>Thank you :</h1>" + name
                 + "Your subscription overview: "
                 + "<h2>Security: </h2>" + sn
                 + "<h2>Country: </h2>" + country
                 + "<h2>card: </h2>" + card
                 + "<h2>Order: </h2>" + Arrays.toString(order))
          .build();
    }
}

The response is redirected to the same URL and it looks like figure below:

The complete application is available here. In the next post we will process date/time values.