调查问卷生成json字符串

大家可能见到一些问卷调查网站，可以拖拽生成自己想要的调查问卷。本人自己完成一个基于按钮的生成调查问卷的功能（可以得到问卷中题目组成的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>&nbsp;&nbsp;<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>&nbsp;&nbsp;<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>&nbsp;&nbsp;<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");//当前numbercurrentObj.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字符串相关推荐

JsonObject生成Json字符串有转意字符
"PatientInfo": {"Name": "{\"GivenName\":\"sduie\"}" ...
Java系列之：生成Json字符串
Java系列之:生成Json字符串一.拼接Json字符串二.使用JSONObject()生成字符串一.拼接Json字符串 import com.alibaba.fastjson.JSONObje ...
Jackson解析与生成Json字符串
Jackson API:http://tool.oschina.net/apidocs/apidoc?api=jackson-1.9.9 流式API读取和写入JSON内容离散事件. JsonParse ...
java生成json字符串，威力加强版
策略 1--停止挖掘 Law of Holes 是说当自己进洞就应该停止挖掘.对于单体式应用不可管理时这是最佳建议.换句话说,应该停止让单体式应用继续变大,也就是说当开发新功能时不应该为旧单体应用添加 ...
java生成json字符串，真香
前言 JVM调优主要是针对垃圾收集器的收集性能优化,令运行在虚拟机上的应用能够使用更少的内存以及延迟获取更大的吞吐量.毫不夸张地说,JVM是现代软件工程最成功的案例之一.因为它自带GC,又有无数可以微 ...
调查问卷动态生成的一点探索
之前做过企业内部用的调查问卷系统,因为每一年的调查内容都有差异,所以每次都要重新修改代码,所以想到了能否用程序做一个自动问卷生成系统. 大体的思路如下: 1>一套基于web的后台问卷生成系统,通 ...
【Groovy】json 序列化 ( JsonBuilder 生成器 | 生成带根节点名称的 json 字符串 | 生成不带根节点名称的 json 字符串 )
文章目录一.json 生成器二.代码示例一.json 生成器首先 , 创建 json 生成器 . // json 生成器 def jsonBuilder = new JsonBuilder() ...
java解析与生成json数据的四种方式，比如将json字符串转为json对象或json对象转为json字符串
文章目录 1. 详说json 1.1 何为json 1.2 json语法 2. Java解析与生成JSON的四种方式 2.1 传统方式 2.2 利用Jackson方式 2.3 利用Gson方式 2.4 ...
jackson中JSON字符串节点遍历和修改
有些场景下,在实现一些基础服务和拦截器的时候,我们可能需要在不知道JSON字符串所属对象类型的情况下,对JSON字符串中的某些属性进行遍历和修改,比如,设置或查询一些报文头字段. 在jackson中, ...

调查问卷生成json字符串

调查问卷生成json字符串相关推荐

最新文章

热门文章