forked from vitmalina/w2ui
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathform2.html
118 lines (117 loc) · 5.38 KB
/
form2.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<html>
<head>
<link rel="stylesheet" type="text/css" media="screen" href="../dist/w2ui.css" />
<script type="text/javascript" src="../libs/jquery/jquery-3.5.1.min.js"></script>
<script type="module" src="../src/w2compat.js?globals"></script>
<script>
//<![CDATA[
$(function () {
$('#form').w2form({
name : 'form',
// url : 'form.php',
recid : 4,
header : 'Edit header',
//formURL : 'form-template.html',
//formHTML: 'some html',
onChange(event) {
console.log(event)
},
record: {
"field_date": '3/15/2013',
field: {
map: {
key1: '1',
key2: '2',
key3: '3',
key4: '4',
key5: '5'
},
array: ['val1', 'val2', 'val3', { key: 'key1', value: '1' }]
}
},
tabs: ['General', 'Aditional'],
fields: [
// { field: 'field_text', type: 'text', html: { page : 0 } },
// { field: 'field_int', type: 'int', html: { page : 0 }, options: { prefix: '$', arrows: true } },
// { field: 'field_float', type: 'float', html: { page : 0 } },
// { field: 'field_alphanumeric', type: 'alphanumeric', html: { page : 0 } },
// { field: 'field_money', type: 'money', html: { page : 0 } },
// { field: 'field_currency', type: 'currency', html: { page : 0 } },
// { field: 'field_percent', type: 'percent', html: { page : 0 } },
// { field: 'field_bin', type: 'bin', html: { page : 0 } },
// { field: 'field_hex', type: 'hex', html: { page : 0 } },
{ field: 'field_text', type: 'text', required: true,
html: { label: 'Text', page: 0 }
},
{ field: 'field.map', type: 'map', required: true,
html: {
label: 'Map', page: 0, text: '',
key: { attr: 'placeholder="key"', text: ' = '},
value: { attr: 'placeholder="value"', text: ''}
},
},
{ field: 'field.array', type: 'array', required: true,
html: {
label: 'Array', page: 0, text: '',
key: { attr: 'placeholder="key"', text: ' = '},
value: { attr: 'placeholder="value"', text: ''}
},
},
// { field: 'field_alpha', type: 'alphanumeric', required: true,
// html: { label: 'Alpha Numeric', page: 0 }
// },
// { field: 'field_int', type: 'int', required: true,
// html: { label: 'Integer', page: 0 }
// },
// { field: 'field_float', type: 'float', required: true,
// html: { label: 'Float', page: 0 }
// },
// { field: 'field_date', type: 'date',
// options: { format: 'mm/dd/yyyy', blocked: ['3/12/2013', '3/13/2013'] },
// html: { label: 'Date', page: 0 }
// },
// { field: 'field_list', type: 'list', required: true,
// options: { items: [{ id: 0, txt: 'Adams, John' }, { id: 1, text: 'Adams2, John' }], showNone: false },
// html: { label: 'List', page: 0 }
// },
// { field: 'field_enum', type: 'enum', required: true,
// options: { items: [{id: 1, text: 'Adams, John'}, 'Johnson, Peter', 'Lewis, Frank', 'Cruz, Steve', 'Donnun, Nick'] },
// html: { label: 'Enum (multi select)', attr: 'style="width: 100%"', page: 0 }
// },
// { field: 'field_textarea', type: 'textarea', required: true,
// html: { label: 'Text Area', attr: 'style="width: 100%; height: 90px; resize: none"', page: 0 }
// },
// { field: 'field_textarea', type: 'textarea', html: { page : 1 } },
// { field: 'field_text2', type: 'text', html: { page : 1 } },
// { field: 'field_text3', type: 'text', html: { page : 1 } },
// { field: 'field_text4', type: 'text', html: { page : 1 } },
// { field: 'field_text5', type: 'text', html: { page : 1 } },
// { field: 'field_upload', type: 'text', html: { page : 1 } }
],
actions: {
Reset() {
this.clear();
},
Save() {
var obj = this;
this.save({}, function (data) {
console.log(data);
if (data.status == 'error') {
console.log('ERROR: '+ data.message);
return;
}
//obj.clear();
});
}
},
onChange: function (event) {
// console.log('change', event)
}
});
});
//]]>
</script>
<body style="margin: 30px;">
<div id="form" style="width: 700px; height1: 900px;"></div>
</body>
</html>