• Publicidad

Validación de un HTML

Preguntas y comentarios relacionadas con HTML y CSS.

Validación de un HTML

Notapor seafree » 2015-10-08 08:51 @410

Buenos días. Tengo éste código pero sólo ejecuta el JavaScript desde Google Chrome. ¿Tendrás alguna idea de por qué sucede eso?

Sintáxis: [ Descargar ] [ Ocultar ]
Using html4strict Syntax Highlighting
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset='UTF-8' />
  5. <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
  6. <script language="javascript" type="text/javascript">
  7. $(document).ready(function(){
  8.  
  9. //let's create arrays
  10. var v_2012 = [
  11.     {display: "2014", value: "2014" }];
  12.  
  13. var v_2013 = [
  14.     {display: "2015", value: "2015" }];
  15.  
  16. var v_2014 = [
  17.     {display: "2016", value: "2016" }];
  18.  
  19. var v_2015 = [
  20.     {display: "2017", value: "2017" }];
  21.  
  22. var v_2016 = [
  23.     {display: "2018", value: "2018" }];
  24.  
  25. //If parent option is changed
  26. $("#parent_selection").change(function() {
  27.         var parent = $(this).val(); //get option value from parent
  28.  
  29.         switch(parent){ //using switch compare selected option and populate child
  30.               case 'v_2012':
  31.                 list(v_2012);
  32.                 break;
  33.               case 'v_2013':
  34.                 list(v_2013);
  35.                 break;
  36.               case 'v_2014':
  37.                 list(v_2014);
  38.                 break;
  39.               case 'v_2015':
  40.                 list(v_2015);
  41.                 break;
  42.               case 'v_2016':
  43.                 list(v_2016);
  44.                 break;
  45.             default: //default child option is blank
  46.                 $("#child_selection").html('');
  47.                 break;
  48.            }
  49.         return false;
  50. });
  51.  
  52. //function to populate child select box
  53. function list(array_list)
  54. {
  55.     $("#child_selection").html(""); //reset child options
  56.     $(array_list).each(function (i) { //populate child options
  57.         $("#child_selection").append("<option value=\""+array_list[i].value+"\">"+array_list[i].display+"</option>");
  58.     });
  59. }
  60.  
  61. });
  62. </script>
  63. </head>
  64. <basefont SIZE=4>
  65. <body BGCOLOR='#FFFFFF' TOPMARGIN='0' LEFTMARGIN='0'>
  66. <center><font face='arial' size='3'><br><B>GR&Aacute;FICA COMPARATIVA DE EVENTOS ENTRE 3 A&Ntilde;OS</B></font></center>
  67. <FORM NAME='forma_menu' METHOD='post' ACTION='/cgi-bin/sifamep/charts/softmultibar.pl'><P><center><br>
  68.    <table frame="border" width=60% >
  69.         <tr>
  70.             <td bgcolor="#FFFFFF" colspan=6> <br>
  71.               <center> <font face="ARIAL" size=3>
  72.         <b>POR FAVOR</b> seleccionar par&aacute;metros y pulsar el Bot&oacute;n <i>Continuar</i>.
  73.         </font></center><br>
  74.             </td>
  75.         </tr>
  76.         <tr>
  77.                 <td bgcolor="#FFFFFF" align="center" valign="middle" height="40"> <font face="arial" size=2><B>SEDE:</B></font> </td>
  78.                 <td bgcolor="#FFFFFF" align="left"  valign="left" height="40">
  79.                         <select name=sede>
  80.                                 <option value=sede>Gerencia</option>
  81.                         </select>
  82.                 </td>
  83.                 <td  bgcolor="#FFFFFF" align="center" valign="middle" height="40"> <font face="arial" size=2><B>LOCAL:</B></font> </td>
  84.                 <td bgcolor="#FFFFFF" align="left"   valign="middle" height="40">
  85.                         <select name=local>
  86.                                 <option value='tx'>Adscripcion</option>
  87.                         </select>
  88.                 </td>
  89.                 <td bgcolor="#FFFFFF" align="center" valign="middle" height="40"><font face="arial" size=2><B>Ubicación:</td>
  90.                 <td bgcolor="#FFFFFF" align="left"  valign="left" height="40">
  91.                         <select name=ubicacion>
  92.                                 <option value='todas'>---Seleccionar---</option>
  93.                                 <option value='CTR'>CENTRO</option>
  94.                                 <option value='NTE'>NORTE</option>
  95.                                 <option value='SUR'>SUR</option>
  96.                         </select>
  97.                 </td>
  98.         </tr>
  99.  
  100.  
  101. <tr><td ALIGN='left' VALIGN='middle' COLSPAN='6'>
  102. <div class="wrapper">
  103. A&Ntilde;O :
  104.     <select name="parent_selection" id="parent_selection">
  105.     <option value="">-- Seleccionar la Comparaci&oacute;n --</option>
  106.     <option value="v_2012">2012</option>
  107.     <option value="v_2013">2013</option>
  108.     <option value="v_2014">2014</option>
  109.     <option value="v_2015">2015</option>
  110.     <option value="v_2016">2016</option>
  111.     </select>
  112.     <select name="child_selection" id="child_selection">
  113.     </select>
  114. </div>
  115. </td>
  116. </tr>
  117.  
  118. <tr>
  119.     <td bgcolor="#FFFFFF" colspan=6>
  120.      <br><center>
  121.         <input type="submit" name="action" value="Continuar" style="font:Arial; color:#ffffff; background:#7495ab">&nbsp;&nbsp;&nbsp;&nbsp;<input type=button style="font:arial; color:#ffffff; background:#7495ab" value='Regresar' name=regresar onClick='history.back()'>
  122.      </center>
  123.     </td>
  124.   </tr>
  125.  </table>
  126. </td></tr>
  127. <br>
  128. </body>
  129. </html>
Coloreado en 0.005 segundos, usando GeSHi 1.0.8.4


Gracias por el apoyo.
seafree
Perlero nuevo
Perlero nuevo
 
Mensajes: 296
Registrado: 2012-08-10 11:26 @518

Publicidad

Re: Validación de un HTML

Notapor explorer » 2015-10-08 09:50 @451

Hay atributos a cuales les faltan las comillas dobles.

Hay marcas, al final, <td>, <tr>, que están fuera de la definición de una tabla.

No está cerrado el <form>.

Si hay problemas con JavaScript, debería salir en la consola.
JF^D Perl programming & Raku programming. Grupo en Telegram: https://t.me/Perl_ES
Avatar de Usuario
explorer
Administrador
Administrador
 
Mensajes: 14476
Registrado: 2005-07-24 18:12 @800
Ubicación: Valladolid, España

Re: Validación de un HTML

Notapor seafree » 2015-10-08 11:47 @533

Ok, explorer, tienes razón, hay detalles respecto a los atributos y marcas que ya se corrigieron y, sí, efectivamente, la depuración desde la consola de IE envía:

La página adjunta está orientada al modo documento 7. Es posible que algunas características y API de consola no estén disponibles.

CÓDIGO MODIFICADO:
<!DOCTYPE HTML>
<html>
<head>
<meta charset='UTF-8' />
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){

//let's create arrays
var v_2012 = [{display: "2014", value: "2014" }];

var v_2013 = [{display: "2015", value: "2015" }];

var v_2014 = [{display: "2016", value: "2016" }];

var v_2015 = [{display: "2017", value: "2017" }];

var v_2016 = [{display: "2018", value: "2018" }];

//If parent option is changed
$("#parent_selection").change(function() {
var parent = $(this).val(); //get option value from parent

switch(parent){ //using switch compare selected option and populate child
case 'v_2012':
list(v_2012);
break;
case 'v_2013':
list(v_2013);
break;
case 'v_2014':
list(v_2014);
break;
case 'v_2015':
list(v_2015);
break;
case 'v_2016':
list(v_2016);
break;
default: //default child option is blank
$("#child_selection").html('');
break;
}
return false;
});

//function to populate child select box
function list(array_list)
{
$("#child_selection").html(""); //reset child options
$(array_list).each(function (i) { //populate child options
$("#child_selection").append("<option value=\""+array_list[i].value+"\">"+array_list[i].display+"</option>");
});
}

});
</script>
</head>
<basefont SIZE=4>
<body bgcolor='#FFFFFF' topmargin='0' leftmargin='0'>
<center>
<font face='arial' size='3'><br><B>GR&Aacute;FICA COMPARATIVA DE EVENTOS ENTRE 3 A&Ntilde;OS</B></font>
</center>
<form name='forma_menu' method='post' action='/cgi-bin/sifamep/charts/softmultibar.pl'>
<center>
<br>
<table frame="border" width=60% >
<tr>
<td bgcolor="#FFFFFF" colspan=6> <br>
<center> <font face="ARIAL" size=3> <b>POR FAVOR</b> seleccionar par&aacute;metros y pulsar el Bot&oacute;n <i>Continuar</i>. </font>
</center><br>
</td>
</tr>
<tr>
<td bgcolor="#FFFFFF" align="center" valign="middle" height="40"> <font face="arial" size=2><B>SEDE:</B></font> </td>
<td bgcolor="#FFFFFF" align="left" valign="left" height="40">
<select name="sede">
<option value=grtor>Gerencia</option>
</select>
</td>
<td bgcolor="#FFFFFF" align="center" valign="middle" height="40"> <font face="arial" size=2><B>LOCAL:</B></font> </td>
<td bgcolor="#FFFFFF" align="left" valign="middle" height="40">
<select name="local">
<option value="tx">Adscripci&Oacute;n</option>
</select>
</td>
<td bgcolor="#FFFFFF" align="center" valign="middle" height="40"><font face="arial" size=2><B>UBICACIO&Oacute;N:</td>
<td bgcolor="#FFFFFF" align="left" valign="left" height="40">
<select name=ubicacion>
<option value="todas">---Seleccionar---</option>
<option value="CTR">CENTRO</option>
<option value="NTE">NORTE</option>
<option value="SUR">SUR</option>
</select>
</td>
</tr>
<tr>
<td align='left' valign='middle' colspan='6'>
<div class="wrapper"> A&Ntilde;O :
<select name="parent_selection" id="parent_selection">
<option value="">-- Seleccionar la Comparaci&oacute;n --</option>
<option value="v_2012">2012</option>
<option value="v_2013">2013</option>
<option value="v_2014">2014</option>
<option value="v_2015">2015</option>
<option value="v_2016">2016</option>
</select>
<select name="child_selection" id="child_selection">
</select>
</div>
</td>
</tr>

<tr>
<td bgcolor="#FFFFFF" colspan=6> <br>
<center>
<input type="submit" name="action" value="Continuar" style="font:arial; color:#ffffff; background:#7495ab">&nbsp;&nbsp;&nbsp;&nbsp;<input type=button style="font:arial; color:#ffffff; background:#7495ab" value='Regresar' name=regresar onClick='history.back()'>
</center>
</td>
</tr>
</table>
</form>
</body>
</html>

Gracias por responder.
seafree
Perlero nuevo
Perlero nuevo
 
Mensajes: 296
Registrado: 2012-08-10 11:26 @518

Re: Validación de un HTML

Notapor explorer » 2015-10-08 16:26 @726

No tengo ni idea de lo que el IE quiere decir. Me sorprende incluso que sigas usándolo. Es pura basura.

Es mucho mejor las herramientas que trae Firefox o Google Chrome.

En Firefox, vas al menú Herramientas->Desarrollador web->Web Console, y ahí verás los errores JavaScript que se producen, en qué líneas, y de ahí puedes deducir qué está mal.

Si quieres aún mayor control, instala en el Firefox el complemente FireBug, que te permitirá depurar el código.

Por de pronto, sí que veo un error muy grave:

<script src="//...

No estás indicando la ruta completa al código JQuery. Te falta el http:
JF^D Perl programming & Raku programming. Grupo en Telegram: https://t.me/Perl_ES
Avatar de Usuario
explorer
Administrador
Administrador
 
Mensajes: 14476
Registrado: 2005-07-24 18:12 @800
Ubicación: Valladolid, España

Re: Validación de un HTML

Notapor seafree » 2015-10-09 10:02 @460

Gracias por responder y por tu observación.

Saludos.
seafree
Perlero nuevo
Perlero nuevo
 
Mensajes: 296
Registrado: 2012-08-10 11:26 @518


Volver a HTML

¿Quién está conectado?

Usuarios navegando por este Foro: No hay usuarios registrados visitando el Foro y 2 invitados