-
Notifications
You must be signed in to change notification settings - Fork 2
/
form_gv.html
269 lines (233 loc) · 18.5 KB
/
form_gv.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
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src='https://www.google.com/recaptcha/api.js'></script>
<style type="text/css">
.toolTip{
background: rgba(0,0,0,0.7);
border: 2px solid #000;
width: auto;
color: white;
border-radius: 0px 0px 5px 5px;
position: relative;
top: -20px;
float: left;
text-align: center;
padding: 1px 10px;
text-align: center;
font-weight: 100;
padding: 0px 15px;
max-width: 80%;
}
#first_name:hover + label{
display:block;
}
#TT:hover + label{
display:block;
}
#TT + label{
display:none;
}
</style>
</head>
<body>
<div class="col-lg-12 col-sm-10 col-xs-10" >
<form action="{path-gis_reg_process}" method="POST" background="OGV-Final3-sinTT.png" class="regform" id="expa_reg_form" accept-charset="UTF-8" style="background-color: transparent; width:75%; margin-left:10%;">
<table class="sighnup-form-table" style="background-color: rgba(248, 90, 64, 0.75); border-radius: 7px;">
<tr style="background: transparent;"><td style="background: transparent;"> </td></tr>
<tr style="background: transparent;/*background: rgba(255,255,255,0.4) !important;*/">
<td style="vertical-align: top;padding-top: 15px; padding-right: 5px; width:25%;margin-bottom: 20px; text-align: right;" class="input-name"><h6 style="color:#FFF !important;font-weight:normal; display:inline;font-style:inherit;">Nombre</h6> <span class="required" style="color:#FFF !important;">*</span></td>
<td style="width:80%;">
<input style="margin-bottom: 20px; border:1px solid #037Ef3; height: 30px; width: 80%;margin-right: 5px; display: inline;border-radius: 5px;" id="first_name" class="input" type="text" maxlength="50" name="first_name"
required
oninvalid="this.setCustomValidity('Ingresa tu nombre')"
oninput="setCustomValidity('')"><img style="width:20px;vertical-align:middle;" src="http://test.aiesec.org.mx/wp-content/plugins/EXPAregistrationWPplugin-master/help.png" id="TT" onmouseover="hover(this);" onmouseout="unhover(this);" ><label class="toolTip t1" style="">Nombre o Nombres</label>
</td>
</tr>
<tr style="background: transparent;/*background: rgba(255,255,255,0.4) !important;*/">
<td style="vertical-align: top;padding-top: 15px; padding-right: 5px; width:25%;margin-bottom: 20px; text-align: right;" class="input-name"><h6 style="color:#FFF !important;font-weight:normal; display:inline;font-style:inherit;">Apellidos</h6> <span class="required" style="color:#FFF !important;">*</span></td>
<td style="width:66%;">
<input style="margin-bottom: 20px; border:1px solid #037Ef3; height: 30px; width: 80%;margin-right: 5px; display: inline;border-radius: 5px;" id="last_name" class="input" type="text" name="last_name" maxlength="50"
required
oninvalid="this.setCustomValidity('Ingresa tu apellido')"
oninput="setCustomValidity('')"><img style="width:20px;vertical-align:middle;" src="http://test.aiesec.org.mx/wp-content/plugins/EXPAregistrationWPplugin-master/help.png" id="TT" onmouseover="hover(this);" onmouseout="unhover(this);" ><label class="toolTip" style="">Apellido paterno y materno completos</label>
</td>
</tr>
<tr style="background: transparent;/*background: rgba(255,255,255,0.4) !important;*/">
<td style="vertical-align: top;padding-top: 15px; width:25%;padding-right: 5%;margin-bottom: 20px; text-align: right;" class="input-name"><h6 style="color:#FFF !important;font-weight:normal; display:inline;font-style:inherit;">E-mail</h6> <span class="required" style="color:#FFF !important;">*</span></td>
<td style="color:white;">
<label data-toggle="tooltip" style="color:#FFF;" data-placement="top" title="">
<input style="margin-bottom: 20px; border:1px solid #037Ef3; height: 30px; width: 80%;margin-right: 5px; display: inline;border-radius: 5px;" 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})$"><img style="width:20px;vertical-align:middle;" src="http://test.aiesec.org.mx/wp-content/plugins/EXPAregistrationWPplugin-master/help.png" id="TT" onmouseover="hover(this);" onmouseout="unhover(this);" ><label class="toolTip" style="">Este correo es el que te permitirá entrar a nuestro portal de oportunidades</label>
</td>
</tr>
<tr style="background: transparent;/*background: rgba(255,255,255,0.4) !important;*/">
<td style="vertical-align: top;padding-top: 15px; width:25%;padding-right: 5%;margin-bottom: 20px; text-align: right;" class="input-name"><h6 style="color:#FFF !important;font-weight:normal; display:inline;font-style:inherit;">Contraseña</h6> <span class="required" style="color:#FFF !important;">*</span></td>
<td style="width:66%;color:white;">
<span data-toggle="tooltip" style="color:#FFF;" data-placement="top" title="">
<input style="margin-bottom: 20px; border:1px solid #037Ef3; height: 30px; width: 80%;margin-right: 5px; display: inline;border-radius: 5px;" 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,}"><img style="width:20px;vertical-align:middle;" src="http://test.aiesec.org.mx/wp-content/plugins/EXPAregistrationWPplugin-master/help.png" id="TT" onmouseover="hover(this);" onmouseout="unhover(this);" ><label class="toolTip" style="">Esta será tu contraseña para el acceso a nuestro portal de oportunidades.</label>
</span>
</td>
</tr>
<tr style="background: transparent;/*background: rgba(255,255,255,0.4) !important;*/">
<td style="vertical-align: top;padding-top: 15px; width:25%; padding-right: 5px;margin-bottom: 20px; text-align: right;" class="input-name"><h6 style="color:#FFF !important;font-weight:normal; display:inline;font-style:inherit;">Número Telefónico</h6> <span class="required" style="color:#FFF !important;">*</span></td>
<td>
<label data-toggle="tooltip" style="color:#FFF;" data-placement="top" title="Número de teléfono o celular">
<input style="margin-bottom: 20px; border:1px solid #037Ef3; height: 30px; width: 80%;margin-right: 5px; display: inline;border-radius: 5px;" 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})"><img style="width:20px;vertical-align:middle;" src="http://test.aiesec.org.mx/wp-content/plugins/EXPAregistrationWPplugin-master/help.png" id="TT" onmouseover="hover(this);" onmouseout="unhover(this);" ><label class="toolTip" style="">Ingresa tu número número de teléfono o celular con LADA.</label>
</label>
</td>
</tr>
<!-- TODO: hacer que se mapeen las opciones como las de los comites en el plugin -->
<tr style="background: transparent;/*background: rgba(255,255,255,0.4) !important;*/">
<td style="vertical-align: top;padding-top: 15px; width:25%;padding-right: 5%;margin-bottom: 20px; text-align: right;" class="input-name"><h6 style="color:#FFF !important;font-weight:normal; display:inline;font-style:inherit;">¿Cómo te enteraste de AIESEC?</h6> <span class="required" style="color:#FFF !important;">*</span></td>
<td>
<label data-toggle="tooltip" style="color:#FFF;" data-placement="top" title="Medio por el cual te enteraste de este programa">
<select id="source" name="source" title="" style="margin-bottom: 20px; border:1px solid #037Ef3; width: 80%;margin-right: 5px; display: inline;border-radius: 5px;" >
<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>
<img style="width:20px;vertical-align:middle;" src="http://test.aiesec.org.mx/wp-content/plugins/EXPAregistrationWPplugin-master/help.png" id="TT" onmouseover="hover(this);" onmouseout="unhover(this);" ><label class="toolTip" style="">Selecciona el medio por el cual te enteraste de este programa.</label>
</label>
</td>
</tr>
<!-- TODO: hacer que se mapeen las opciones como las de los comites en el plugin -->
<tr style="background: transparent;/*background: rgba(255,255,255,0.4) !important;*/" id="programa" hidden="true">
<td style="vertical-align: top;padding-top: 15px; width:25%; padding-right: 5px;margin-bottom: 20px; text-align: right;" class="input-name"><h6 style="color:#FFF !important;font-weight:normal; display:inline;font-style:inherit;">Interesado en:</h6> <span class="required" style="color:#FFF !important;">*</span></td>
<td>
<label data-toggle="tooltip" style="color:#FFF;" data-placement="top" title="Selecciona el tipo de programa que más te interesa">
<select id="interested_in" name="interested_in" title="Selecciona el tipo de programa que más te interesa." style="margin-bottom: 20px; border:1px solid #037Ef3; width: 80%;margin-right: 5px; display: inline;border-radius: 5px;" >
<option value="1" style="background-color:#fff;">Voluntario Global</option>
</select><img style="width:20px;vertical-align:middle;" src="http://test.aiesec.org.mx/wp-content/plugins/EXPAregistrationWPplugin-master/help.png" id="TT" onmouseover="hover(this);" onmouseout="unhover(this);" ><label class="toolTip" style="">Experiencia de voluntariado de corta duración.</label>
</label>
</td>
</tr>
<tr style="background: transparent;/*background: rgba(255,255,255,0.4) !important;*/">
<td style="vertical-align: top;padding-top: 15px; width:25%; padding-right: 5px;margin-bottom: 20px; text-align: right;" class="input-name"><h6 style="color:#FFF !important;font-weight:normal; display:inline;font-style:inherit;">Estado</h6> <span class="required" style="color:#FFF !important;">*</span></td>
<td>
<label data-toggle="tooltip" style="color:#FFF;" data-placement="top" title="Selecciona una de nuestras universidades o estados">
<select id="state" name="state" title="Universidad" style="border:1px solid #037Ef3; width: 80%;margin-right: 5px; display: inline;border-radius: 5px; margin-bottom: 20px;" >
</select><img style="width:20px;vertical-align:middle;" src="http://test.aiesec.org.mx/wp-content/plugins/EXPAregistrationWPplugin-master/help.png" id="TT" onmouseover="hover(this);" onmouseout="unhover(this);" ><label class="toolTip" style="">Selecciona tu estados.</label>
</label>
</td>
</tr>
<tr style="background: transparent;/*background: rgba(255,255,255,0.4) !important;*/">
<td style="vertical-align: top;padding-top: 15px; width:25%; padding-right: 5px;margin-bottom: 20px; text-align: right;" class="input-name"><h6 style="color:#FFF !important;font-weight:normal; display:inline;font-style:inherit;">Universidad</h6> <span class="required" style="color:#FFF !important;">*</span></td>
<td>
<label data-toggle="tooltip" style="color:#FFF;" data-placement="top" title="Selecciona una de nuestras universidades o estados">
<select id="university" name="university" title="Universidad" style="border:1px solid #037Ef3; width: 80%;margin-right: 5px; display: inline;border-radius: 5px; margin-bottom: 20px;" >
</select><img style="width:20px;vertical-align:middle;" src="http://test.aiesec.org.mx/wp-content/plugins/EXPAregistrationWPplugin-master/help.png" id="TT" onmouseover="hover(this);" onmouseout="unhover(this);" ><label class="toolTip" style="">Selecciona una de nuestras universidades o estados.</label>
</label>
</td>
</tr>
<tr style="background: transparent;/*background: rgba(255,255,255,0.4) !important;*/" hidden="true">
<td style="vertical-align: top;padding-top: 15px; width:25%;padding-right: 5%;margin-bottom: 20px; text-align: right;" class="input-name"><h6 id="lc_label" style="color:#FFF !important;font-weight:normal; display:inline;font-style:inherit;">Entidad Local</h6> </td>
<td style="width:66%;">
<label data-toggle="tooltip" style="color:#FFF;" data-placement="top" title="Entidad local más cercana que te brindará apoyo durante tu proceso">
<input class="readonly" style="margin-bottom: 20px; border:1px solid #037Ef3; height: 30px; width: 80%;margin-right: 5px; display: inline;border-radius: 5px;" id="localcommittee" name="localcommittee" title="Nombre de la entidad local más cercana." type="text" value="Aguascalientes" readonly /><img style="width:20px;vertical-align:middle;" src="http://test.aiesec.org.mx/wp-content/plugins/EXPAregistrationWPplugin-master/help.png" id="TT" onmouseover="hover(this);" onmouseout="unhover(this);" class="uni"><label class="toolTip" style="">Está es la entidad local que te apoyará durante tu proceso.</label>
</label>
</td>
</tr>
<tr style="background: transparent;/*background: rgba(255,255,255,0.4) !important;*/">
<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;color:#fff !important">
He leído y acepto los <u><a href="https://opportunities.aiesec.org/assets/terms.pdf" target="_blank" style="color: #fff;"> términos y condiciones.</a></u>
</span>
</label>
</td>
</tr>
<tr style="background: transparent;"><td style="background: transparent;"> </td></tr>
<input type="hidden" name="website_url" value="{website_url}">
</table>
<div id="error" class="error" style="display:none;"><p></p></div>
<div class="g-recaptcha" data-sitekey="6Ld8uAkUAAAAAMqyl5rjRbaUSP6CQlGzSAAy1pqZ" align="center"></div>
<div id="submit" style="padding:0px;background: transparent;text-align:center;">
<input type="submit" id="submit_button" name="submit" clicked="false" class="send" value="Regístrate" style="width: 50%; margin: 6px 0px; padding: 16px; background: #037ff3;border-radius: 5px;">
</div>
</form>
</div>
<script type='text/javascript' src='{path-gis_lcMapper}'></script>
<script type='text/javascript'>
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()]);
});
/* var myJsonString = getLeads('{path-leads-json}');
jQuery('#localcommittee').hide();
jQuery('#lc_label').hide();
jQuery('.uni').hide();
jQuery('#localcommittee').val('Aguascalientes');
//jQuery(".regform").validationEngine();
jQuery('#university').change(function($) {
// $('#localcommittee').val((mapLC($('#university').val())));
jQuery('#localcommittee').val(mapLC(jQuery('#university').val()));
jQuery('#localcommittee').show('slow');
jQuery('#lc_label').show('slow');
jQuery('.uni').show('slow');
});*/
jQuery('#submit_button').click(function($){
jQuery('#submit_button').attr('clicked', 'true');
});
});
function hover(element) {
element.setAttribute('src', 'http://test.aiesec.org.mx/wp-content/plugins/EXPAregistrationWPplugin-master/help_hover.png');
}
function unhover(element) {
element.setAttribute('src', 'http://test.aiesec.org.mx/wp-content/plugins/EXPAregistrationWPplugin-master/help.png');
}
</script>
</body>