0

私は次のことを達成しようとしています: ユーザーがフォームの外に記入するフォームがあります (たとえば、学生と教師としましょう)。

どのラジオ ボックスが選択されているかによって、フォームに異なるフィールドを含める必要があります。

たとえば、学生が選択されている場合、ユーザーはフィールド名、姓、およびコース名を入力する必要があります。Teacher is selected が選択されている場合、ユーザーは名、姓、および経験年数を入力する必要があります。

ご覧のとおり、一部のフィールドは同じです。

同じ Bean を使用して、2 つの「タイプ」のユーザー (学生と教師) を管理することを計画しています。違いを生むために、DBに「タイプ」列を作成するだけです。

私が知らないのは、コントローラーがそれと関係があるのか​​、JQuery を使用して JSP 内のすべてを処理する必要があるのか​​ということです。それを実行する方法と、ベストプラクティスは何ですか。

また、コンボ ボックスのどの値が選択されているかによって、DB に別の「型」の値を挿入する必要があります。

これが私の 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 を使用してこれを示しましたが、フォーム要素を配置するためにテーブルを使用することは最善の考えではありません。しかし、Jquery ロジックは、さまざまな html タグに対しても便利です。

于 2013-01-02T19:09:54.833 に答える