How to reuse the 2 text fields from one form block to another in HTML and Spring boot?

I am new to HTML and Spring boot.

I have this html form index.html
I am trying to build a simple calculator with add/subtract and multiply functions.

I have 3 form blocks which points to 3 endpoints in Java spring boot.
I want to reuse the 2 text fields num1 and num2 in form block for multiply in the add and subtract blocks.
How to do that in spring ?
Currently with my code the multiply works well however for the add & subtract the num1 and num2 values are passed as null and throws error.
"java.lang.NullPointerException: Cannot invoke "java.lang.Integer.intValue()" because "num1" is null"

Index.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Calculator</title>
</head>
<body>
    <h1>Simple Calculator</h1>

    <!-- Add form -->
    <form action="/add" method="post">
        <br>
        <button type="submit">Add</button>
    </form>

    <!-- Subtract form -->
    <form action="/subtract" method="post">

        <br>
        <button type="submit">Subtract</button>
    </form>

    <!-- Multiply form -->
    <form action="/multiply" method="post">
        <label for="num1">Number 1:</label> <input type="text" id="num1"
            name="num1" th:value="${num1 != null ? num1 : ''}"> <label
            for="num2">Number 2:</label> <input type="text" id="num2" name="num2"
            th:value="${num2 != null ? num2 : ''}"> <br>
        <button type="submit">Multiply</button>

        <br> <br> <label for="result">Result:</label> <input
            type="text" id="result" th:value="${result}" readonly>
    </form>

</body>
</html>

–Java controller package
package com.example.demo;

import org.springframework.stereotype.Controller;

import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;

@Controller
public class HelloWorldController {

    @PostMapping("/add")
    public String add(@RequestParam(value = "num1", required = false) Integer num1, @RequestParam(value = "num2", required = false) Integer num2, Model model) {
        int result = num1 + num2;
        model.addAttribute("result", result);
        model.addAttribute("num1", num1);
        model.addAttribute("num2", num2);
        return "index"; // Return to the same page with updated data
    }

    @PostMapping("/subtract")
    public String subtract(@RequestParam(value = "num1", required = false) Integer num1, @RequestParam(value = "num2", required = false) Integer num2, Model model) {
        int result = num1 - num2;
        model.addAttribute("result", result);
        model.addAttribute("num1", num1);
        model.addAttribute("num2", num2);
        return "index";
    }

    @PostMapping("/multiply")
    public String multiply(@RequestParam(value = "num1", required = false) Integer num1, @RequestParam(value = "num2", required = false) Integer num2, Model model) {
        int result = num1 * num2;
        model.addAttribute("result", result);
        model.addAttribute("num1", num1);
        model.addAttribute("num2", num2);
        return "index";
    }
}

You need to sign in to view this answers

Related Post