2013-01-01 276 views
0

我想完成以下操作:我有一个表单,用户将填写表单之外的表单(例如,学生和老师)。根据单选按钮选择显示不同的表单域

取决于选择哪个单选框,我希望表单包含不同的字段。

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

正如你所看到的,一些字段是相同的。

我打算使用同一个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; 
    } 
} 

回答

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逻辑也可以很方便。

相关问题