如何在某个条件下隐藏和显示部分表单？答案

【问题标题】：How can I hide and display part of the form on a condition?如何在某个条件下隐藏和显示部分表单？
【发布时间】：2021-05-29 22:52:40
【问题描述】：

我想用同一个表单来执行两个不同的操作，并在一个条件下隐藏和显示部分表单。假设提交按钮的文本是“SAVE”admissionNumber 输入字段不会显示，但如果提交按钮的按钮文本是“更新”admissionNumber 输入字段将显示。下面是代码示例

registerForm.html同用于注册和更新学生信息

    <div layout:fragment="content" class="container mySpace">

        <form method="post" th:object="${student}" th:action="@{/register}">
            <div class="card cardspace">
                <h5 class="card-header" th:text="${chead}"></h5>
                <div class="card card-body">
                    <div class="form-row">
                        <div class="col-9">
                            <div class="row">

如果 btname 已保存，我希望能够隐藏 admissionNumber 字段，如果 btname 更改为更新，则显示它

                                <div class="form-group col" th:if="${btnname} == 'Submit'">
                                    <label for="admissionNumber">Admission Number</label> <input
                                        type="text" class="form-control" id="admissionNumber"
                                        th:field="*{admissionNumber}">
                                    <div class="text text-danger"
                                        th:if="${#fields.hasErrors('admissionNumber')}"
                                        th:errors="*{admissionNumber}"></div>
                                </div>
                                <div class="form-group col" th:unless="${btnname} == 'Update'">
                                    <label for="admissionNumber">Admission Number</label> <input
                                        type="text" class="form-control" id="admissionNumber"
                                        th:field="*{admissionNumber}">
                                    <div class="text text-danger"
                                        th:if="${#fields.hasErrors('admissionNumber')}"
                                        th:errors="*{admissionNumber}"></div>
                                </div>
                                <div class="form-group col">
                                    <label for="firstName">First Name</label> <input type="text"
                                        class="form-control" id="firstName" th:field="*{firstName}">
                                    <div class="text text-danger"
                                        th:if="${#fields.hasErrors('firstName')}"
                                        th:errors="*{firstName}"></div>
                                </div>
                                <div class="form-group col">
                                    <label for="lastName">Last Name</label> <input type="text"
                                        class="form-control" id="lastName" th:field="*{lastName}">
                                    <div class="text text-danger"
                                        th:if="${#fields.hasErrors('lastName')}"
                                        th:errors="*{lastName}"></div>
                                </div>
                            </div>
                 </div>
            </div>
   </div>
 </div>
  <button type="submit" class="btn btn-primary" th:text="${btnname}"></button>
 </form>

学生控制器类

@Controller
public class StudentController {
    
    @Autowired
    private StudentServices studentServices;

显示注册表

    @GetMapping("/register")
    public String showStudentRegistrationForm(Model model ) {
        
        model.addAttribute("student", new Student());
        model.addAttribute("chead", "Student Enrollment");// for card-header title h5 tag
        model.addAttribute("btnname", "Submit"); // for button text
        return "views/studentRegistrationForm";
    }

显示编辑或更新表单

    @GetMapping("/editStudent")
    public String showStudentRegistrationEditForm(Model model ) {
        
        model.addAttribute("student", new Student());
        model.addAttribute("chead", "Edit Student Enrollment");
        model.addAttribute("btnname", "Update");
        return "views/studentRegistrationForm";
    }

}

【问题讨论】：

您能澄清一下您遇到问题的地方吗？您已经在使用 th:if="${...}" 语法。您不能在这里使用它来实现所需的逻辑吗？相关<div> 中的th:if="${btnname} == 'UPDATE'" 之类的东西？
是的，我尝试过类似的方法，但没有成功
您能澄清一下您遇到问题的地方吗？你能（1）展示你尝试了什么，（2）描述在这种情况下“它不起作用”是什么意思吗？例如，应用程序日志或浏览器控制台中是否有任何错误？你看到了什么行为？
我已经编辑了代码以显示我试图实现但没有按预期工作。
在您的问题文本中，您将可能的按钮显示值描述为“SAVE”和“UPDATE”。在您的代码中，您使用的是“提交”和“更新”。这是 4 个不同的值。如果您解释“它没有按预期工作”的意思，这也会有所帮助。实际发生了什么？

标签： spring-boot thymeleaf

【解决方案1】：

你想要的是th:if标签，你几乎是对的，但整个wxpression需要放在括号th:if="${btnname == 'Submit'}"

【讨论】：