0

我正在尝试完成以下操作：我有一个用户将填写的表格，在表格之外（例如学生和老师）。

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

For example, when Student is selected, the user would have to fill out the fields first name, last name and course name. 选择教师时，用户必须填写名字，姓氏和经验年份。

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

我计划使用同一个 bean 来管理 2 种“类型”的用户（学生和教师）。我只会在我的数据库中有一个“类型”列来产生影响。

我不知道的是，我的控制器是否与此有关，或者我应该使用 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;
    }
}
4

1 回答 1

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();                 
        }
     });   
   }
}

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

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

于 2013-01-02T19:09:54.833 回答