根據單選按鈕選擇顯示不同的表單域

我想完成以下操作：我有一個表單，用戶將填寫表單之外的表單（例如，學生和老師）。根據單選按鈕選擇顯示不同的表單域

取決於選擇哪個單選框，我希望表單包含不同的字段。

例如，當選擇學生時，用戶將不得不填寫字段的名字，姓氏和課程名稱。選擇教師後，用戶必須填寫名字，姓氏和經驗年份。

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

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

來源

2013-01-01 dukable

這裏的解決方案是使用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邏輯也可以很方便。

來源

2013-01-02 19:09:54 Usha

根據單選按鈕選擇顯示不同的表單域

回答

相關問題