-
Notifications
You must be signed in to change notification settings - Fork 2
/
form.html
executable file
·204 lines (171 loc) · 10.2 KB
/
form.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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src='https://www.google.com/recaptcha/api.js'></script>
</head>
<body>
<div style="width: 80%; margin-left: 10%;background: transaparent; padding-bottom:25px; padding-top:35px;">
<form action="{path-gis_reg_process}" method="POST" class="regform" id="expa_reg_form" accept-charset="UTF-8" style="background-color: transparent; width:80%; margin-left:10%;">
<table class="sighnup-form-table" style="background-color: transparent;">
<tr>
<td style="vertical-align: top;padding-top: 15px; padding-left: 5%; width:30%;text-align: right;" class="input-name"><h6 style="font-weight:normal; display:inline;font-style:inherit;">Nombre</h6> <span class="required">*</span></td>
<td style="width:66%;"><input style="border:1px solid #037Ef3; height: 30px; width: 95%;" id="first_name" class="input" type="text" maxlength="50" name="first_name"
required
oninvalid="this.setCustomValidity('Ingresa tu nombre')"
oninput="setCustomValidity('')">
</td>
</tr>
<tr>
<td style="vertical-align: top;padding-top: 15px; padding-left: 5%; width:30%;text-align: right;" class="input-name"><h6 style="font-weight:normal; display:inline;font-style:inherit;">Apellidos</h6> <span class="required">*</span></td>
<td style="width:66%;"><input style="border:1px solid #037Ef3; height: 30px; width: 95%;" id="last_name" class="input" type="text" name="last_name" maxlength="50"
required
oninvalid="this.setCustomValidity('Ingresa tu apellido')"
oninput="setCustomValidity('')">
</td>
</tr>
<tr>
<td style="vertical-align: top;padding-top: 15px; width:30%;padding-left: 5%;text-align: right;" class="input-name"><h6 style="font-weight:normal; display:inline;font-style:inherit;">E-mail</h6> <span class="required">*</span></td>
<td> <input style="border:1px solid #037Ef3; height: 30px; width: 95%;" id="email" class="input" type="text" name="email" maxlength="50"
required
oninvalid="this.setCustomValidity('Please input valid e-mail')"
oninput="setCustomValidity('')"
pattern="^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$">
</td>
</tr>
<tr style="background-color: transparent;">
<td style="vertical-align: top;padding-top: 15px; width:30%;padding-left: 5%;text-align: right;" class="input-name"><h6 style="font-weight:normal; display:inline;font-style:inherit;">Contraseña</h6> <span class="required">*</span></td>
<td style="width:66%;"><input style="border:1px solid #037Ef3; height: 30px; width: 95%;" id="password" class="input" type="password" name="password"
required
oninvalid="this.setCustomValidity('La contraseña debe tener al menos 8 caractéres')"
oninput="setCustomValidity('')"
pattern=".{8,}">
</td>
</tr>
<tr>
<td style="vertical-align: top;padding-top: 15px; width:30%; padding-left: 5%;text-align: right;" class="input-name"><h6 style="font-weight:normal; display:inline;font-style:inherit;">Número Telefónico</h6> <span class="required">*</span></td>
<td> <input style="border:1px solid #037Ef3; height: 30px; width: 95%;" id="phone" class="input" type="text" name="phone" maxlength="50"
required
oninvalid="this.setCustomValidity('Ingresa un número telefónico valido')"
oninput="setCustomValidity('')"
pattern="\(?([0-9]{3})\)?([ .-]?)([0-9]{3})\2([0-9]{4})">
</td>
</tr>
<!-- TODO: hacer que se mapeen las opciones como las de los comites en el plugin -->
<tr>
<td style="vertical-align: top;padding-top: 15px; width:30%;padding-left: 5%;text-align: right;" class="input-name"><h6 style="font-weight:normal; display:inline;font-style:inherit;">¿Cómo te enteraste de AIESEC?</h6> <span class="required">*</span></td>
<td>
<select id="source" name="source" title="{source}" style="border:1px solid #037Ef3; width: 95%;" >
<option disabled selected value>Selecciona una opción</option>
<option value="1" style="background-color: #fff;">Publicidad en Facebook</option>
<option value="2" style="background-color: #fff;">Página de Facebook</option>
<option value="3" style="background-color: #fff;">Sitio web</option>
<option value="4" style="background-color: #fff;">Twitter</option>
<option value="5" style="background-color: #fff;">Instagram</option>
<option value="6" style="background-color: #fff;">LinkedIn</option>
<option value="8" style="background-color: #fff;">Amigos ó Familia</option>
<option value="9" style="background-color: #fff;">Soy Miembro de AIESEC</option>
<option value="10" style="background-color: #fff;">Publicidad en Universidad</option>
<option value="11" style="background-color: #fff;">Stands en universidades y/o activaciones</option>
<option value="12" style="background-color: #fff;">Eventos externos o en tu universidad</option>
<option value="13" style="background-color: #fff;">Radio, televisión, prensa, revistas</option>
<option value="14" style="background-color: #fff;">Un Alumni me recomendó</option>
<option value="15" style="background-color: #fff;">Publicación en Medios</option>
<option value="16" style="background-color: #fff;">Snapchat</option>
<option value="18" style="background-color: #fff;">Medios universitarios</option>
<option value="19" style="background-color: #fff;">Sesión informativa</option>
<option value="20" style="background-color: #fff;">Soy alumni de la organización</option>
</select>
</td>
</tr>
<!-- TODO: hacer que se mapeen las opciones como las de los comites en el plugin -->
<tr>
<td style="vertical-align: top;padding-top: 15px; width:30%; padding-left: 5%;text-align: right;"
class="input-name">
<h6 style="font-weight:normal; display:inline;font-style:inherit;">{interested_in} </h6>
<span class="required">*</span>
</td>
<td>
<select id="interested_in" name="interested_in" title="{source}"
style="border:1px solid #037Ef3; width: 95%;" >
<option value="1" style="background-color:#fff;">Voluntario Global</option>
<option value="2" style="background-color: #fff;">Practicante Global</option>
<option value="5" style="background-color: #fff;">Emprendedor Global</option>
</select>
</td>
</tr>
<tr>
<td style="vertical-align: top;padding-top: 15px; width:30%; padding-left: 5%;text-align: right;" class="input-name"><h6 style="font-weight:normal; display:inline;font-style:inherit;">Selecciona tu estado</h6> <span class="required">*</span></td>
<td>
<select id="state" name="state" title="Selecciona tu estado" style="border:1px solid #037Ef3; width: 95%;" >
</select>
</td>
</tr>
<tr>
<td style="vertical-align: top;padding-top: 15px; width:30%; padding-left: 5%;text-align: right;" class="input-name"><h6 style="font-weight:normal; display:inline;font-style:inherit;">{lead-name}</h6> <span class="required">*</span></td>
<td>
<select id="university" name="university" title="{lead-name}" style="border:1px solid #037Ef3; width: 95%;" >
</select>
</td>
</tr>
<tr hidden="true">
<td style="vertical-align: top;padding-top: 15px; width:30%;padding-left: 5%;text-align: right;" class="input-name"><h6 style="font-weight:normal; display:inline;font-style:inherit;">{lc}</h6> </td>
<td style="width:66%;"><input class="readonly" style="border:1px solid #037Ef3; height: 30px; width: 95%;" id="localcommittee" name="localcommittee" title="{lc}" type="text" readonly />
</td>
</tr>
<tr>
<td></td>
<td class="check-holder" colspan="1">
<input checked="" id="terms" type="checkbox" style="display: inline; "><label for="terms" style="display: inline;">
<span class="required" style="display: inline;">
He leido y acepto los
<a href="https://opportunities.aiesec.org/assets/terms.pdf" target="_blank"> terminos y condiciones.</a>
</span>
</label>
</td>
</tr>
<tr>
<input type="hidden" name="website_url" value="{website_url}">
</table>
<div class="g-recaptcha" data-sitekey="6Ld8uAkUAAAAAMqyl5rjRbaUSP6CQlGzSAAy1pqZ" align="center"></div>
<div id="submit" style="padding:0px">
<input type="submit" id="submit_button" name="submit" clicked="false" class="send" value="Regístrate" style="width: 100%; margin: 6px 0px; padding: 6px; background: #037ff3;">
</div>
</form>
</div>
<script type='text/javascript' src='{path-gis_lcMapper}'></script>
<script type='text/javascript'>
//var $j = jQuery.noConflict();
jQuery(document).ready(function($){
console.log("antes");
var data = {leads_state};
for (var key in data) {
console.log(key);
jQuery('#state').append('<option value="' + key + '">' + key + '</option>')
}
console.log("despues");
var myJsonString = getLeads('{path-leads-json}');
//valores default
jQuery('#localcommittee').val('Aguascalientes');
for (var key in data['Aguascalientes']) {
console.log(key);
jQuery('#university').append('<option value="' + key + '">' + key + '</option>')
}
//valores default
//event funciotns
jQuery('#state').change(function($) {
jQuery('#university').empty();
for (var key in data[jQuery('#state').val()]) {
console.log(key);
jQuery('#university').append('<option value="' + key + '">' + key + '</option>')
jQuery('#localcommittee').val(data[jQuery('#state').val()][jQuery('#university').val()]);
}
});
jQuery('#university').change(function($) {
jQuery('#localcommittee').val(data[jQuery('#state').val()][jQuery('#university').val()]);
});
jQuery('#submit_button').click(function($){
jQuery('#submit_button').attr('clicked', 'true');
});
});
</script>
</body>