Master1114 Master1114 - 16 days ago 4
HTML Question

Java/html input type radio - Parameters missmatch

I am completely new to html and that stuff.

I try to create a webpage (using Java/Spring Boot) where the user views a "Pizza", selects an amount and size and submits the order.

The specific part of the html document:

<div class="input-group">
<span class="input-group-addon">Bestellmenge:</span>
<input type="number" name="amount" class="form-control" placeholder="1"/>
</div>
<form>
<input type="radio" name="pizzaSize" value="1"> Klein</input>
<input type="radio" name="pizzaSize" value="2"> Mittel</input>
<input type="radio" name="pizzaSize" value="3"> Gross</input>
</form>
<div>
<form th:action="@{/saveOrderAndReload(name=${pizza.name}, amount=${amount}, size=${pizzaSize})}" method="post">
<div class="form-group">
<div class="form-group">
<input type="submit" class="btn btn-primary btn-success" value="zur Bestellung hinzufuegen"/>
</div>
</div>
</form>
</div>


So when the user presses the button, the following method gets called:

@RequestMapping("saveOrderAndReload")
public String saveOrderAndReload(@RequestParam String name, @RequestParam int size, @RequestParam int amount, Model model) {
//Do whateher
return "another html page";
}


From my understanding, the method needs String, int, int as parameters. The webpage delivers String (the pizza name), int (from the input field) and int from the radio input (is that right?)

However, when trying to execute, the method gets called like this:

http://localhost:8080/saveOrderAndReload?name=SalamiPizza&amount=&size=


Missing the 2 parameters, getting me the following error:

Failed to convert value of type [java.lang.String] to required type [int]; nested exception is java.lang.NumberFormatException: For input string: ""

Answer

Your understanding of Thymeleaf and how the web works is flawed.

First all of your elements need to be inside the same <form> to be submitted (unless you hack around with JavaScript but that is a different beast). From HTML (nor Thymeleaf) you will call a method you submit data to a URL (which eventually in your case will execute the controller).

Now with that knowledge first fix your form.

<div>
    <form th:action="@{/saveOrderAndReload(name=${pizza.name}, amount=${amount}, size=${pizzaSize})}" method="post">
        <div class="input-group">
            <span class="input-group-addon">Bestellmenge:</span>
            <input type="number" name="amount" class="form-control" placeholder="1"/>
        </div>
        <div class="input-group>
            <input type="radio" name="pizzaSize" value="1"> Klein</input>
            <input type="radio" name="pizzaSize" value="2"> Mittel</input>
            <input type="radio" name="pizzaSize" value="3"> Gross</input>
        </div>
        <div class="form-group">
            <div class="form-group">
                <input type="submit" class="btn btn-primary btn-success" value="zur Bestellung hinzufuegen"/>
            </div>
        </div>
    </form>
</div>

Next your th:action doesn't need to include any values (unless you want to still pass the name). So change it to th:action="@{/saveOrderAndReload(name=${pizza.name}) all the other properties will be included in the form.

You have named your radio button pizzaSize and not size, either change the name of the parameter in your controller to pizzaSize or change the name of the radio buttons to size either way will work.

Assuming you change your radio button names your form should look like this.

<div>
    <form th:action="@{/saveOrderAndReload(name=${pizza.name})}" method="post">
        <div class="input-group">
            <span class="input-group-addon">Bestellmenge:</span>
            <input type="number" name="amount" class="form-control" placeholder="1"/>
        </div>
        <div class="input-group>
            <input type="radio" name="size" value="1"> Klein</input>
            <input type="radio" name="size" value="2"> Mittel</input>
            <input type="radio" name="size" value="3"> Gross</input>
        </div>
        <div class="form-group">
            <div class="form-group">
                <input type="submit" class="btn btn-primary btn-success" value="zur Bestellung hinzufuegen"/>
            </div>
        </div>
    </form>
</div>
Comments