<!DOCTYPE html>
<html lang="utf-8">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>上传资料</title>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
//初始参数个数
var varCount = 0;
$(document).ready(function () {
//新增按钮点击
$('#add_field_btn').click(function () {
varCount++;
// var $node = '<div class="" style="text-align: center">'
// + '<div class="col-md-2"> <label for="first_name +' + varCount + '"><input type="text" class="form-control" id="first_name+' + varCount + '" placeholder="字段类型" value="" required=""> </label> </div>'
// + '<div class="col-md-2"> <label for="chinese_name +' + varCount + '"><input type="text" class="form-control" id="chinese_name+' + varCount + '" placeholder="中文字段" value="" required=""> </label> </div>'
// + '<div class="col-md-2"> <label for="english_name +' + varCount + '"><input type="text" class="form-control" id="english_name +' + varCount + '" placeholder="英文字段" value="" required=""> </label> </div>'
// + '<div class="col-md-2"> <label for="position_id +' + varCount + '"><input type="text" class="form-control" id="position_id +' + varCount + '" placeholder="定位符" value="" required=""> </label> </div>'
// + '<div class="col-md-2 field_row"><label for="num + ' + varCount + '"><input type="text" class="form-control" id="num+' + varCount + '" placeholder="值" value="" required=""> </label> </div></div>';
var new_btn =$("#field_add_romove0").clone(true)
.removeAttr("id").removeAttr("value")
.attr({"id":'field_add_romove'+varCount,"name":'field_add_romove'+varCount});
$(this).parent().parent().after(new_btn);
});
//删除按钮点击
$("#remove_field_btn").click(function () {
// length = $(this).parents(".remove_field").length;
// if (length = 1) {
// alert("请至少保留一行");
// } else {
$(this).parent().parent().remove();
});
//提交表单
$("form").submit(function() {
var d = {};
var t = $('form').serializeArray();
$.each(t, function() {
d[this.children().name] = this.children().text();
});
alert(JSON.stringify(d));
});
// $("#field_add_romove").children();
// for(var i=0;i<varCount;i++) {
// var form_dict = '';
// var first_name = "first_name" + i;
// var chinese_name = "chinese_name" + i;
// var english_name = "english_name" + i;
// var position_id = "position_id" + i;
// var num = "num+i";
// var first_name_val = $("#first_name+i").val();
// var chinese_name_val = $("#chinese+i").val();
// var english_name_val = $("#english_name +i").val();
// var position_id_val = $("#position_id +i").val();
// var num_val = $("#num+i").val();
// var form_name = 'table' + i + ':' +
// '{' + first_name + ':' + first_name_val + ','
// + chinese_name + ':' + chinese_name_val + ','
// + english_name + ':' + english_name_val + ','
// + position_id + ':' + position_id_val + ','
// + num + ':' + num_val + ',' + '}';
// 这步很重要，如果没有这步，则会报错无法建立连接
// alert(form_name);
// $(this).submit(form);
//处发事件
$("#update_btn").click(function(){
$("form").submit();
}
);
});
</script>
</head>
<body>
<form class="col-md-11" method="post">
<h3 class="mb-3 page-header">字段上传</h3>
<div class="remove_field" novalidate="" id="field_add_romove" style="display: block">
<div class="field_add_remove" style="text-align: center" id="field_add_romove0">
<div class="col-md-2"> <label for="first_name1"><input type="text" class="form-control" id="first_name0" placeholder="字段类型" value="" required="" name=first_name0"> </label> </div>
<div class="col-md-2"> <label for="chinese_name1"><input type="text" class="form-control" id="chinese_name0" placeholder="中文字段" value="" required="" name="chinese_name0"> </label> </div>
<div class="col-md-2"> <label for="english_name1"><input type="text" class="form-control" id="english_name0" placeholder="英文字段" value="" required="" name="english_name0"> </label> </div>
<div class="col-md-2"> <label for="position_id1"><input type="text" class="form-control" id="position_id0" placeholder="定位符" value="" required="" name="position_id0"> </label> </div>
<div class="col-md-2 field_row"><label for="num1"><input type="text" class="form-control" id="num0" placeholder="值" value="" required="" name="num0"> </label> </div>
<div><div class="col-md-1" id="add_field_btn"> <label for="add_field0"><button type="button" class="btn btn-primary">增加</button> </label> </div>
<div class="col-md-1" id="remove_field_btn"><label for="add_field0"></label> <button type="button" class="btn btn-primary">删除</button> </div> </div> </div>
</div>
<p></p>
<div class="col-md-12" align="center" style="margin: auto">
<h3 class="page-header">文件上传</h3>
<div class="col-md-4">
<input class="form-control" placeholder="文件地址" type="text">
<label for="upload_field"></label>
</div>
<div class="col-md-1 md-1">
<button type="submit" class="btn file" date-s>选择文件</button>
</div>
<div class="col-md-1">
<label for="">文件类型</label>
</div>
<div class="col-md-2 md-1">
<select class="custom-select col-md-2 form-control" id="file_idx_name" required="">
<option value="">案例</option>
<option value="">培训材料</option>
<option value="">产品文档</option>
<option value="">模板</option>
<option value="">博客</option>
<option value="">其他</option>
</select></div>
<label for="state"></label>
<div class="col-md-1">
<label for="">提交人</label>
</div>
<div class="col-md-1" id="file_add_box">
<input class="form-control" id="input_person_name" placeholder="" required="" type="text">
<label for="input_person"></label>
</div>
</div>
<div class="col-md-11">
<button class="btn btn-primary btn-lg btn-block" id="update_btn"
type="submit">提交</button>
</div>
</form>
<div id="results"></div>
<style>
#add_field_btn{
margin-bottom: 20px;
margin-right:0;
}
label{
text-align:right;
font-size: large;
}
#remove_field_btn{
position: relative;
margin-right: 0;
}
</style>
</body>
</html>
网友评论