onepage/tm/template_dir/admin/activity/interactive_input.html

<{include file="./admin/header.html"}>
<{include file="./admin/left.html"}>
<{include file="./admin/nav.html"}>
<{include file="get_kindeditor.html"}>

<style>
.set-nav {
	margin: 0 auto;
}
.set-nav-hr {
	background-color: #ddd;
    height: 1px;
    position: relative;
}
.form-group label {
	font-weight: 600;
}
.checkbox-inline, .radio-inline {
	font-weight: 400!important;
}
.rowlabel {
	font-weight: 300!important;
}
.music_play_hide {
	display:none;
}
</style>


<div id="activity_container">

<form id="activity_form">
<div class="activity_center">
<{include file="./admin/activity/common_nav.html"}>

	<input name="events_id" type="hidden" value="<{$events_Data.events.id}>">
	
	<div  class="panel panel-default">
		<div class="panel-heading">
			<h3 class="panel-title" id="panel-title">设置表单</h3>
		</div>
		<div class="panel-body">
			
			<div class="form-group">
				<div>
					<table class="custom_from_table table table-condensed">
						<thead>
							<tr>
								<th>名称</th>
								<th>类型</th>
								<th>最小长度</th>
								<th>验证规则</th>
								<th>是否必填</th>
							</tr>
						</thead>
						<tbody>
							<{if !$events_Data.events.forms}>
							<tr class="not_input">
								<td colspan='6' align="center">没有设置表单</td>
							</tr>
							<{else}>
							<{foreach from=$events_Data.events.forms item=form}>
							<{if $form.type == 'text'}>
							<tr>
								<td><input name="f[0][name]" type="text" value="<{$form.name}>" class="form-control" /></td>
								<td>
									<select class="form-control form_select" name="f[0][type]">
										<option value="text" selected>单行文本框</option>
										<option value="textarea">多行文本框</option>
										<option value="select">下拉菜单</option>
									</select>
								</td>
								<td><input name="f[0][rule][size]" type="text" value="<{$form.rule.size}>" class="form-control" /></td>
								<td>
									<select class="form-control" name="f[0][rule][regularid]">
										<option value="">无规则</option>
										<option value="1" <{if $form.rule.regularid == 1}>selected<{/if}>>手机验证</option>
										<option value="2" <{if $form.rule.regularid == 2}>selected<{/if}>>邮箱验证</option>
									</select>
								</td>
								<td>
									<input name="f[0][required]" type="checkbox" value="1" <{if $form.required}>checked<{/if}>/>
								</td>
							</tr>
							<{/if}>
							<{if $form.type == 'select'}>
							<tr>
								<td><input name="f[0][name]" type="text" value="<{$form.name}>" class="form-control"/></td>
								<td>
									<select class="form_select form-control" name="f[0][type]">
										<option value="text">单行文本框</option>
										<option value="textarea">多行文本框</option>
										<option value="select" selected>下拉菜单</option>
									</select>
								</td>
								<td>
									<textarea name="f[0][options]" class="form-control" placeholder=""><{$form.options}></textarea>
								</td>
								<td>多个选项换行分隔</td>
								<td><input name="f[0][required]" type="checkbox" value="1" <{if $form.required}>checked<{/if}>/></td>
							</tr>
							<{/if}>
							<{if $form.type == 'textarea'}>
							<tr>
								<td><input name="f[0][name]" type="text" value="<{$form.name}>" class="form-control"/></td>
								<td>
									<select class="form_select form-control" name="f[0][type]">
										<option value="text">单行文本框</option>
										<option value="textarea" selected>多行文本框</option>
										<option value="select">下拉菜单</option>
									</select>
								</td>
								<td><input name="f[0][rule][size]" type="text" value="<{$form.rule.size}>" class="form-control"/></td>
								<td>
									<select name="f[0][rule][regularid]" class="form-control">
										<option value="">无规则</option>
										<option value="1" <{if $form.rule.regularid == 1}>selected<{/if}>>手机验证</option>
										<option value="2" <{if $form.rule.regularid == 2}>selected<{/if}>>邮箱验证</option>
									</select>
								</td>
								<td><input name="f[0][required]" type="checkbox" value="1" <{if $form.required}>checked<{/if}>/> </td>
							</tr>
							<{/if}>
							<{/foreach}>
							<{/if}>
						</tbody>
					</table>
					<a href="javascript:;" class="addRule js_add_prize" data-stat="show"><i class="fa fa-plus"></i> 添加表单字段</a>
				</div>
			</div>
			<a id="activity_submit" href="javascript:;" class="button button-3d button-primary button-rounded"><i class="fa fa-refresh fa-spin" style="display:none;"></i> 保存设置</a>
			<{if $typ}>
			<div  style="text-align:right;">
				<a  href="?c=Admin_Activity_SetInteractive&a=PageShow&events_id=<{$events_Data.events.id}>" >返回互动设置</a>
			</div>
			<{/if}>
		</div>
	</div>
</div>

<{include file="./admin/activity/common_right.html"}>

<div style="clear:both;"></div>
</form>
</div>

<div class="form_select_template" style="display:none;">
	<table>
		<tr>
			<td><input name="f[0][name]" type="text" value="" class="form-control"/></td>
			<td>
				<select class="form_select form-control" name="f[0][type]">
					<option value="text">单行文本框</option>
					<option value="textarea">多行文本框</option>
					<option value="select" selected>下拉菜单</option>
				</select>
			</td>
			<td>
				<textarea name="f[0][options]" class="form-control" placeholder=""></textarea>
			</td>
			<td>多个选项换行分隔</td>
			<td><input name="f[0][required]" type="checkbox" value="1"/></td>
		</tr>
	</table>
</div>
<div class="form_text_template" style="display:none;">
	<table>
		<tr>
			<td><input name="f[0][name]" type="text" value="" class="form-control"/></td>
			<td>
				<select class="form_select form-control" name="f[0][type]">
					<option value="text" selected>单行文本框</option>
					<option value="textarea">多行文本框</option>
					<option value="select">下拉菜单</option>
				</select>
			</td>
			<td><input name="f[0][rule][size]" type="text" value="" class="form-control"/></td>
			<td>
				<select name="f[0][rule][regularid]" class="form-control">
					<option value="">无规则</option>
					<option value="1">手机验证</option>
					<option value="2">邮箱验证</option>
				</select>
			</td>
			<td><input name="f[0][required]" type="checkbox" value="1"/></td>
		</tr>
	</table>
</div>
<div class="form_textarea_template" style="display:none;">
	<table>
		<tr>
			<td><input name="f[0][name]" type="text" value="" class="form-control"/></td>
			<td>
				<select class="form_select form-control" name="f[0][type]">
					<option value="text">单行文本框</option>
					<option value="textarea" selected>多行文本框</option>
					<option value="select">下拉菜单</option>
				</select>
			</td>
			<td><input name="f[0][rule][size]" type="text" value="" class="form-control"/></td>
			<td>
				<select name="f[0][rule][regularid]" class="form-control">
					<option value="">无规则</option>
					<option value="1">手机验证</option>
					<option value="2">邮箱验证</option>
				</select>
			</td>
			<td><input name="f[0][required]" type="checkbox" value="1"/> </td>
		</tr>
	</table>
</div>

<script>
KISSY.use('node, io, event, jquery', function (S, Node, IO, Event, jQuery) {
	var $ = S.all;
	
	$('.addRule').on('click', function () {
		$(".not_input").hide();
    	var form_text_template = $('.form_text_template table tbody').last().clone(true, true, true);
    	$('.custom_from_table tbody').last().after(form_text_template);
	});
	
	Event.delegate(document,'change','.form_select',function(e){
		var formType = e.target.value;
		
		if (formType == 'select') {
			var form_select_template = $('.form_select_template table tbody').last().clone(true, true, true);
			$(e.target).parent('tr').replaceWith(form_select_template);
		}
		
		if (formType == 'text') {
			var form_text_template = $('.form_text_template table tbody').last().clone(true, true, true);
			$(e.target).parent('tr').replaceWith(form_text_template);
		}
		
		if (formType == 'textarea') {
			var form_textarea_template = $('.form_textarea_template table tbody').last().clone(true, true, true);
			$(e.target).parent('tr').replaceWith(form_textarea_template);
		}
	});
	
	var activity_submit_status = false; //按钮状态
    function submit_button_active() {
    	activity_submit_status = true;
    	$("#activity_submit").addClass('active').all('i').show();
    }
    function submit_button_default() {
    	activity_submit_status = false;
    	$("#activity_submit").removeClass('active').all('i').hide();
    }
    
	$("#activity_submit").on('click', function () {
    	if (activity_submit_status) {
    		return false;
    	}
    	submit_button_active();
    	
    	jQuery('.custom_from_table tr').each(function (i, item) {
			jQuery(item).find('input,select,checkbox,textarea').each(function (j, input) {
				input.name = input.name.replace(/\[\d+\]/, '['+ i +']');
			});
		});
    	
    	formData = IO.serialize("#activity_form");
    	
    	new IO({
			type: "post"
			, url: VG.conf.root_domain + '/?c=Admin_Activity_SetInteractive&a=ReqUpForm'
			, data: formData
			, success: function (data) {
				if (data.ok) { //ok
					var url = data.msg;
					alert('保存成功');
					location.reload();
				} else {
					alert('操作失败，原因：'+data.msg);
				}
				return false;
			}
			, error: function (NULL, textStatus) {
				alert("请求服务器失败，原因:"+textStatus);
			}
			, dataType: "json"
		});
	});
});
</script>

<{include file="./admin/bottom.html"}>