Display different form fields depending on radio button selection

Question

I am trying to accomplish the following: I have a form that a user will fill-out, outside of the form there are (Let's say Student and Teacher for example).

Depending on which radio box is selected, I want the form to contain different fields.

For example, when Student is selected, the user would have to fill out the fields first name, last name and course name. When Teacher is selected is selected, the user would have to fill first name, last name and year of experience.

As you can see, some of the fields are the same.

I am planning to use the same bean to manage the 2 "types" of users (Student and Teacher). I will just have a column "type" in my DB to make the difference.

What I do not know is, does my controller has anything to do with that or should I handle everything within my JSP with JQuery? I have no idea how to perform that and what is the best practice.

Also, depending on which value of the combo box has been selected, I would need to insert a different "type" value in the DB as I previously said, but how do I get the combo-box value from the JSP to the controller?

Here is my AddUserFormController right now:

@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;
    }
}

Here is my JSP (I simplified it, there is no username and password field here to make it easier in the post). There are 3 fields right now, first name, last name and course name (the fields that I want to display if the combo box that is selected is "Student"). I do not know what do add here and how to handle it so different fields are displayed depending on which combo box is selected:


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



Test



Register



    <%@ include file="/WEB-INF/pages/menu.jsp"%>
    
        

             
                I am a Teacher
            

              I
                am a Student
            

            Here is my Bean that is also simplified (I did not put the username and password attributes here to simplify the post):
@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;
    }
}

                
                    First Name
                    
                    
                
                
                    Last Name
                    
                    
                
                
                    Course Name

Usha · Accepted Answer

The solution here is using Jquery to show or hide the required fields according to the radio button that is selected.

Here is a JSFIDDLE that shows this implementation. The Jquery function that handles this is

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

It basically checks the value of the selected radio button with the id of the html tag that contains the fields that are to be displayed.

I have showed this using simple html, but using tables for aligning form elements is not the best idea. But the Jquery logic can be handy even for different html tags.

Display different form fields depending on radio button selection

Answers (1)

Related Questions