调查问卷生成json字符串
2016-04-09 09:48
477 查看
大家可能见到一些问卷调查网站，可以拖拽生成自己想要的调查问卷。本人自己完成一个基于按钮的生成调查问卷的功能（可以得到问卷中题目组成的json字符串），现在只有文本框、单选、段落描述三种类型。附下功大家参考：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style type="text/css">
.menu {
float: left;
width: 100px;
height: 200px;
margin-top: 200px;
margin-left: 100px;
/*background-color: #45B7FF;*/
text-align: center;
border: 1px solid #45B7FF;
}
.menu .menu_bar {
background-color: #45B7FF;
font-size: larger;
color: white;
height: 30px;
line-height: 30px;
}
.menu table {
margin-top: 10px;
margin-left: 30px;
text-align: center;
}
.menu table td {
height: 30px;
line-height: 30px;
}
.menu table td a{
text-decoration: none;
color: black;
}
.menu table td a:hover{
background-color: #CCCCCC;
color: white;
}
.container {
float: left;
width: 900px;
}
.head {
text-align: center;
}
.head button {
background-color: #45B7FF;
border-radius: 5px;
width: 100px;
height: 25px;
border-color: #45B7FF;
color: white;
margin-left: 100px;
}
.head div {
font-size: smaller;
margin-top: 5px;
margin-bottom: 10px;
color: #CCCCCC;
}
.head input[type=text] {
width: 169px;
height: 21px;
background-color: white;
}
.head select {
width: 173px;
height: 25px;
}
.head ul li {
margin:5px 0px;
}
#content {
width: 900px;
text-align: left;
}
ul {
list-style: none;
}
#content div {
margin: 10px 5%;
width: 90%;
border: 1px solid #CCCCCC;
padding: 5px 0px;
}
#content input[type=text] {
width: 700px;
border: none;
height: 30px;
padding-left: 5px;
}
#content ul {
margin-top: 10px;
margin-left: 50px;
}
#content ul li input[type=text] {
width: 400px;
}
#content ul li {
margin-bottom: 5px;
}
#content div textarea {
width: 700px;
height: 50px;
border: none;
margin-left: 5px;
}
#content label {
height: 20px;
line-height: 20px;
display: inline-block;
}
.close {
width: 30px !important;
display: none;
position: absolute;
}
.add {
width: 30px !important;
display: none;
position: absolute;
}
.delete {
width: 30px !important;
display: none;
position: absolute;
}
</style>
</head>
<body>
<div class="main">
<div class="menu">
<div class="menu_bar">问卷类型</div>
<div>
<table>
<tr><td><a href="javascript:;" id="label">段落</a></td></tr>
<tr><td><a href="javascript:;" id="radio2">单选(2)</a></td></tr>
<tr><td><a href="javascript:;" id="radio3">单选(3)</a></td></tr>
<tr><td><a href="javascript:;" id="text">文本框</a></td></tr>
</table>
</div>
</div>
<div class="container">
<div class="head">
<ul>
<li>
问卷名称：
<input type="text" id="questionnaireName">
</li>
<li>
<button id="btnSubmit">提交</button>
</li>
</ul>
<div>注：请创建问卷后再提交</div>
</div>
<div id="content">
</div>
</div>
</div>
<!-- <button class="close">X</button> -->
</body>
</html>
<script type="text/javascript">
count = 0 ;
function formRadio2() {
count++;
var radio = "<div id='Q" + count+"' name='Q" + count+"' type='radio' number='"+count+"'><label>" + "Q" + count+":</label> <input type='text' class='title' value='请输入单选描述'/>"+"<ul class='answer'><li><input type='radio'><input type='text' value='选项1'></li><li><input type='radio'><input type='text' value='选项2'> </li></ul><button class='close'>x</button><button class='add'>+</button><button class='delete'>-</button></div>";
return radio;
}
function formRadio3() {
count++;
var radio = "<div id='Q" + count+"' name='Q" + count+"' type='radio' number='"+count+"'><label>" + "Q" + count+":</label> <input type='text' class='title' value='请输入单选描述'/>"+"<ul class='answer'><li><input type='radio'><input type='text' value='选项1'></li><li><input type='radio'><input type='text' value='选项2'></li><li><input type='radio'><input type='text' value='选项3'></li></ul><button class='close'>x</button></div>";
return radio;
}
function formText() {
count++;
var text = "<div id='Q" + count+"' name='Q" + count+"' type='text' number='"+count+"'><label>" + "Q" + count+":</label> <input type='text' class='title' value='请输入文本框描述'/><ul><li><input type='text'></li></ul><button class='close'>x</button></div>";
return text;
}
function formLabel() {
var label = "<div type='label'><textarea class='title'>请输入段落描述</textarea><button class='close'>x</button></div>";
return label;
}
$(".menu").on("click","a",function(){
var id = $(this).attr("id");
switch(id) {
case "radio2" :
var content = formRadio2();
$("#content").append(content);
break;
case "radio3" :
var content = formRadio3();
$("#content").append(content);
break;
case "text" :
var content = formText();
$("#content").append(content);
break;
case "label" :
var content = formLabel();
$("#content").append(content);
break;
}
});
$("#btnSubmit").on("click", function(){
var content = [];
var count = 0;
$("#content").find("div[type]").each(function(){
var type = $(this).attr("type");
if (type == "label") {
var tempdata = {};
tempdata['type'] = type;
tempdata['title'] = $(this).find("textarea").val();
content[count++] = tempdata;
} else if (type == "radio") {
var tempdata = {};
tempdata['id'] = $(this).attr("id");;
tempdata['name'] = $(this).attr("name");
tempdata['type'] = type;
tempdata['title'] = $(this).find("input.title").val();
var tempCount = 1;
var tempRadio = {};
$(this).find(".answer input[type=text]").each(function(){
tempRadio[tempCount++] = $(this).val();
});
tempdata['answer'] = tempRadio;
content[count++] = tempdata;
} else if (type == "text") {
var tempdata = {};
tempdata['id'] = $(this).attr("id");;
tempdata['name'] = $(this).attr("name");
tempdata['type'] = type;
tempdata['title'] = $(this).find("input.title").val();
content[count++] = tempdata;
}
});
var template = JSON.stringify( content );
var name = $("#questionnaireName").val();
console.log(template);
console.log(name);
});
$("#content").delegate("div[type]", "mouseover", function(){
var offset = $(this).offset();
var top = offset.top +10 ;
var left = offset.left + 810 - 40;
$(this).find(".close").css("top",top);
$(this).find(".close").css("left",left);
if ($(this).attr("type") == "radio") {
$(this).find(".add").css("top",top+30);
$(this).find(".add").css("left",left);
$(this).find(".add").css("display","block");
$(this).find(".delete").css("top",top+60);
$(this).find(".delete").css("left",left);
$(this).find(".delete").css("display","block");
}
$(this).find(".close").css("display","block");
});
$("#content").delegate("div[type]", "mouseout", function(){
$(this).find(".close").css("display","none");
if ($(this).attr("type") == "radio") {
$(this).find(".add").css("display","none");
$(this).find(".delete").css("display","none");
}
});
$(".main").delegate(".close", "click", function(){
var currentObj = $(this).closest("div[type]");
var type = currentObj.attr("type");
if (type == "label") {
currentObj.remove();
} else {
//带有Qn的div，需要更改div中n值，并且count--
var cur_number = currentObj.attr("number");//当前number
currentObj.remove();
$("#content div[type!=label]").each(function(){
var number = $(this).attr("number");
if (number > cur_number) {
$(this).attr("number", number-1);
var qn = "Q" + --number;
$(this).attr("id", qn);
$(this).attr("name", qn);
$(this).find("label").html(qn);
}
});
count--;
}
});
$(".main").delegate(".add", "click", function(){
var length = $(this).closest("div[type]").find("ul li").length;
var content = "<li><input type='radio'><input type='text' value='选项"+ (length+1) +"'></li>";
$(this).closest("div[type]").find("ul").append(content);
});
$(".main").delegate(".delete", "click", function(){
var length = $(this).closest("div[type]").find("ul li").length;
$(this).closest("div[type]").find("ul li:last").remove();
});
</script>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JSON知识介绍
- 偶然发现关于网页JavaScript脚本无法正常运行的原因
- js unicode 编码解析关于数据转换为中文的两种方法
- JavaScript：关于事件处理程序何时可以直接访问元素的属性
- JavaScript 模块（1）：初学者指南
- 用 JavaScript 对抗 DDOS 攻击
- JS学习笔记-事件绑定
- bzoj 1823: [JSOI2010]满汉全席 2-SAT判定
- 记一次奇葩的Js劫持事件
- SoundJS手机浏览器加载得到的音频长度与实际不符的BUG
- JavaScript 中的undefined and null 学习
- javascript的函数作用域及声明提前
- js设置、修改、获取、删除 cookie
- 七步从Angular.JS菜鸟到专家（2）：Scopes(1)
- 七步从Angular.JS菜鸟到专家（3）：数据绑定和AJAX(1)
- 七步从Angular.JS菜鸟到专家（1）：如何开始
- Backbone.js 1.1.2
- Zepto.js 1.1.6
- Underscore.js 1.8.3
- JavaScript依赖注入的实现思路