Question

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

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

例如，当选择学生时，用户必须填写字段的名字，姓氏和课程名称。选择教师后，用户必须填写名字，姓氏和年份。

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

我打算使用相同的bean来管理2个“类型”的用户（学生和教师）。我的数据库中只有一个“类型”列来改变它。

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

另外，根据选择的组合框的值，我需要在DB中插入一个不同的“type”值，如前所述，但是如何从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();                 
        }
     });   
   }
}

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

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

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

1 个答案: