根据单选按钮的选择显示不同的表单字段

Question

我正在尝试完成以下任务：我有一个用户可以填写的表格，除了表格之外（例如，假设学生和老师）。

根据希望选择哪个单选框，我希望表单包含不同的字段。

例如，当选择“学生”时，用户将不得不填写名字，姓氏和课程名称字段。 选择“教师”后，用户将必须填写名字，姓氏和工作经验。

如您所见，某些字段是相同的。

我打算使用相同的bean来管理用户（学生和教师）的两种“类型”。 我将在数据库中只有一列“类型”以有所作为。

我不知道的是，我的控制器是否与此有关，还是应该使用JQuery处理JSP中的所有内容？ 我不知道如何执行该操作以及最佳实践。

另外，根据选择了组合框的哪个值，我将需要像前面所说的那样在数据库中插入一个不同的“类型”值，但是如何从JSP到控制器获取组合框的值呢？

现在是我的AddUserFormController：

@Controller
@RequestMapping("/register.htm")
public class AddUserFormController {

    @Autowired
    private UserDetailsService userDetailsService;

    @Autowired
    private UserEntityService userEntityService;

    public void setUserDetailsService(UserDetailsService userDetailsService) {
        this.userDetailsService = userDetailsService;
    }

    @RequestMapping(method = RequestMethod.POST)
    public String onSubmit(@ModelAttribute("userEntity") UserEntity user, BindingResult result)
            throws ServletException {
            ((UserEntityService) userEntityService).addUser(user);
            return "/home";
    }

    @RequestMapping(method = RequestMethod.GET)
    public String showAddForm(ModelMap model) {
        UserEntity user = new UserEntity();
        model.addAttribute(user);
        return "/register";
    }

    protected Object formBackingObject(HttpServletRequest request) throws ServletException {
        AddUser addUser = new AddUser();
        return addUser;
    }

    public UserDetailsServiceImpl getUserDetailsService() {
        return (UserDetailsServiceImpl) userDetailsService;
    }
}

这是我的JSP（我简化了它，这里没有用户名和密码字段，以便于发布）。 现在有3个字段，名字，姓氏和课程名称（如果选择的组合框为“学生”，我想显示的字段）。 我不知道在这里添加什么内容以及如何处理它，因此根据选择的组合框显示不同的字段：

<!DOCTYPE HTML>
<%@ include file="/WEB-INF/pages/include.jsp"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>

<html>
<head>
<title>Test</title>
</head>

<head>
<title>Register</title>

</head>
<body>
    <%@ include file="/WEB-INF/pages/menu.jsp"%>
    <div class="container">
        <form:form method="post" modelAttribute="userEntity">

            <label class="radio"> <input type="radio"
                name="optionsRadios" id="optionsRadios1" value="option1" checked>
                I am a Teacher
            </label>

            <label class="radio"> <input type="radio"
                name="optionsRadios" id="optionsRadios2" value="option2"> I
                am a Student
            </label>

            <table width="95%" bgcolor="f8f8ff" border="0" cellspacing="0"
                cellpadding="5">
                <tr>
                    <td align="right" width="20%">First Name</td>
                    <td width="20%"><form:input path="firstName" /></td>
                    <td width="60%"><form:errors path="firstName" cssClass="error" /></td>
                </tr>
                <tr>
                    <td align="right" width="20%">Last Name</td>
                    <td width="20%"><form:input path="lastName" /></td>
                    <td width="60%"><form:errors path="lastName" cssClass="error" /></td>
                </tr>
                <tr>
                    <td align="right" width="20%">Course Name</td>
                    <td width="20%"><form:input path="courseName" /></td>
                    <td width="60%"><form:errors path="courseName"
                            cssClass="error" /></td>
                </tr>
                <button type="submit" class="btn btn-success">Register</button>
        </form:form>
    </div>
</body>
</html>

这是我的Bean，它也得到了简化（我没有在此处放置用户名和密码属性来简化帖子）：

@Entity
@Table(name = "user", catalog = "test", schema = "")
public class UserEntity implements Serializable {

    private static final long serialVersionUID = 1L;

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    @Basic(optional = false)
    @Column(name = "id")
    private Integer id;

    @Column(name = "first_name")
    private String firstName;

    @Column(name = "family_name")
    private String familyName;

    @Column(name = "course_name")
    private String course_name;

    @Column(name = "experience")
    private String experience;

    public UserEntity() {

    }

    public UserEntity(Integer id) {
        this.id = id;
    }

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getFirstName() {
        return firstName;
    }

    public void setFirstName(String firstName) {
        this.firstName = firstName;
    }

    public String getCourseName() {
        return course_name;
    }

    public void setCourseName(String course_name) {
        this.course_name = course_name;
    }

    public String getExperience() {
        return experience;
    }

    public void setExperience(String experience) {
        this.experience = experience;
    }
}

Answer 1

解决方案是使用Jquery根据选定的单选按钮显示或隐藏必填字段。

这是显示此实现的JSFIDDLE 。 处理这个的jQuery函数是

function showSpecificFields(obj){
   if($(obj).is(":checked")){
     var radioVal = $(obj).val();
     $(".fieldsSpecific").each(function(){
        if($(this).attr('id') == radioVal){
           $(this).show();
        } else{
           $(this).hide();                 
        }
     });   
   }
}

基本上，它使用包含要显示的字段的html标记的id来检查所选单选按钮的值。

我已经使用简单的html展示了这一点，但是使用表格来对齐表单元素并不是最好的主意。 但是即使对于不同的html标签，Jquery逻辑也可以派上用场。