首页 > 代码库 > 简单实现根据选项显示不同的表单

简单实现根据选项显示不同的表单

2024-09-15 02:23:34   220人阅读

      不知道大家是否遇到过这样的一种需求。（我遇到了，呵呵）表单里面有个单选，根据不同的选项显示不同的表单，然后提交不同数据。我之前用了一些笨方法去实现，（代码烂，不想贴），不过，现在想到了一个新的解决方法，我就写出来。

 1 <!DOCTYPE html>
 2 <html>
 3 
 4     <head>
 5         <meta charset="utf-8" />
 6         <title>动态表单提交</title>
 7     </head>
 8 
 9     <body>
10         <form id="questionForm">
11             名字:
12             <input type="text" value="" name="username"></input>
13             <br/> 性别: 男
14             <input type="radio" value="0" name="sex" checked></input>
15             女<input type="radio" value="1" name="sex"></input>
16             <div class="boy" style="display: none;">
17                 喜欢什么样的女生：<br/>
18                 <textarea id="textarea"></textarea>
19             </div>
20             <div class="girl" style="display: none;">
21                 男生的哪一点更吸引你？<br/> A.外表相貌
22                 <input type="radio" value="A" name="advantage" checked></input>
23                 B.家庭状况<input type="radio" value="B" name="advantage"></input>
24             </div>
25             <button type="submit">提交</button>
26         </form>
27         <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
28         <script>
29             $(function() {
30                 
31                 var sexRadio = $("input:radio[name=‘sex‘]");
32                 var sex = $("input:radio[name=‘sex‘]:checked").val();
33                 var formJson = {};
34                 //初始化拓展表单
35                 showExpandDiv(sex);
36                 //监听性别单选变化
37                 sexRadio.change(function() {
38                     for(i = 0; i < sexRadio.length; i++) {
39                         if(sexRadio[i].checked) {
40                             sex = sexRadio[i].value;
41                             showExpandDiv(sex);
42                         }
43                     }
44                 });
45                 //显示对应拓展表单
46                 //@param sex 
47                 function showExpandDiv(sex) {
48                     //判断性别值，0为男，1为女
49                     if(sex == 0) {
50                         var boy = $("#textarea").val();
51                         //显示boy表单
52                         $(".boy").show();
53                         $(".girl").hide();
54                         //移除girl数据
55                         delete formJson.girl;
56                         //添加boy数据
57                         formJson.boy = boy;
58                     } else {
59                         var girl = $("input:radio[name=‘advantage‘]:checked").val();
60                         //显示girl表单
61                         $(".girl").show();
62                         $(".boy").hide();
63                         //移除boy数据
64                         delete formJson.boy;
65                         //添加girl数据
66                         formJson.girl = girl;
67                     }
68                 }
69 
70                 //提交表单
71                 $("#questionForm").submit(function() {
72                     var name = $("input[name=‘username‘]").val();
73                     formJson.name = name;
74                     formJson.sex = sex;
75                     showExpandDiv(sex);
76                     alert(JSON.stringify(formJson))
77                 });
78 
79             });
80         </script>
81     </body>
82 
83 </html>

       PS：这是一种可行的方案，如有更好的方法请告诉我。

简单实现根据选项显示不同的表单


联系
我们