Duda con input Texto y Combobox

[Sirius381]

Buenas noches foro! Vengo a solicitar su ayda, tengo un problema y una duda, empiezo con el problema...

Tengo un Combobox para una página de registro, en el quiero darle al usuario la opción de que elija el año de su nacimiento, no se si se puede "autorellenar" dandole un rango de años o tengo que poner el codigo "a piedra" de esta forma:

Código HTML:

<select>
                <option value="1970">1970
                <option value="1971">1971
                <option value="1972">1972
...
            </select> 

Hacer eso hasta el 2012 va a ser un relajo, es posible?

Y ahora la duda, se que es posible, pero no he encontrado información concreta, como se le quita a la caja de texto (input) el borde "tridimensional" que tiene? es decir, mi diseño requiere que solo sea una linea delgada lo que enmarque mi caja de texto, se ve muy mal cuando le pongo un background-color y despues en un :focus lo cambio de color, todo esto en CSS, alguien me podria orientar indicandome la propiedad que manipula esto?

Desde ya mil gracias! quedo al pendiente

[gildus]

Holas,

Creo que seria con un javascript algo como:

Código HTML:

<select id="anios"></select>
 
<script>
var opc = '';
for(i=1970; i<=2012; i++){
    opc += "<option value='"+(i)+"'>"+(i)+"</option>";
}
document.getElementById("anios").innerHTML = opc;
</script>
 

Y para quitar los border de un input algo como:

Código CSS:

input{
border: none;
}
 

o si deseas darle un linea mas delgada o uniforme:

Código CSS:

input{
border: 1px solid gray; //o con el color que deseas.
}
 

Saludos

[Sirius381]

Hola gildus! Muchas gracias amigo! siempr el codigo CSS del borde quedo así:

Código HTML:

#txt-srch
{
    border: 1px ridge;
    background-color: #234258;
    border-color: #b3cee1;
}


#txt-srch:focus
{
    border: 1px ridge;
    background-color: #FFF;
    border-color: #b3cee1;
}

y el javascript que me comentas voy enseguida a implementarlo, te posteo el resultado, de nuevo mil gracias compañero!

Saludos!

[gildus]

Un css mas simplificado:

Código CSS:

#txt-srch:focus, #txt-srch{
    border: 1px ridge #b3cee1;
}
 
#txt-srch
{    
    background-color: #234258;
}
 
#txt-srch:focus
{
    background-color: #FFF; 
}
 

Saludos

[Sirius381]

EL javascript implementado y funciona PERFECTO, lo implemente para los días del mes, muchísimas gracias gildus! Me sirvió muchísimo tu solución, ahora veré como ejecutar uno u otro en función del mes (es mas detalle del que requiero pero en eso radica la calidad creo yo :) )

Saludos!!

[emprear]

Ese javascript lamentablemente en ie no funciona, tendrías que hacer algo más complejo. Te lo dejo en php por si te sirve
Te dejo para dia mes y año, descartá lo que no te sirva

Código PHP:

<p>
<select name="dia" id="dia">
<option value="">día</option>
<?php for ($i = 1; $i <= 31 ; $i++) { ?>
<option value="<?php echo $i; ?>"><?php echo $i; ?></option>
<?php } ?>
</select>
<select name="mes" id="mes">
<option value="">mes</option>
<?php for ($i = 1; $i <= 12 ; $i++) { ?>
<option value="<?php echo $i; ?>"><?php echo $i; ?></option>
<?php } ?>
</select>
<select name="anio" id="anio">
<option value="">año</option>
<?php for ($i = 1920; $i <= 2011 ; $i++) { ?>
<option value="<?php echo $i; ?>"><?php echo $i; ?></option>
<?php } ?>
</select>
</p>
 

y aqui una función para determinar si la fecha es válida

Código PHP:

function validarFecha($dia, $mes, $anio){
  if ($dia<0 || $dia>31 || $mes<0 || $mes >12)
    $valida=false;
  else
    if (($mes==4 || $mes==6 || $mes==9 || $mes==11) && $dia > 30)
      $valida=false;
    else
      if ($mes==2 && $dia>28+bisiesto($anio))
        $valida=false;
       else
        $valida=true;
  return $valida;
}
 
function bisiesto($anio){
  if ($anio%4!=0)
    $bisiesto=false;
  else
    if ($anio%400==0)
      $bisiesto=true;
    else
      if ($anio%100==0)
        $bisiesto=false;
      else
        $bisiesto=true;
  return $bisiesto;
}
 

saludos

[gildus]

Creo que generarlo en el servidor no es lo adecuado, pero si estamos en la seccion PHP, claro que es valido; mas complejo no es necesario con JQuery seria mas o menos asi:

Código Javascript:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
 
<select id="anios"></select>
<script>
 
var opc = '';
for(i=1970; i<=2012; i++){    
    opc += "<option value='"+(i)+"'>"+(i)+"</option>";
}
$('#anios').html(opc);
 
</script>
 

Hay otras formas de como puedas generarlo:

http://stackoverflow.com/questions/1...list-in-jquery

Lo de validar si es importante tanto en el lado del cliente como en el lado del servidor.

Saludos

[emprear]

Creo que generarlo en el servidor no es lo adecuado

No veo por que no

pero si estamos en la seccion PHP, claro que es valido;

solo por intuición de lo que se entiende, te diría, tampoco estamos en la sección de javascript.

Con jquery, y si también se puede...
Creo que la idea de @Sirius381 es simplificar la confección de su html, y para eso tanto js como php son válidos

Es cierto que pueda no estar usando php, por eso mi indicación fué acompañada por un... por si te sirve

De todas maneras , si se lo quiere hacer con javascript sin cargar una librería, dejo 2 variantes

1.html

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Generar form para fecha</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
<script type="text/javascript">
//<![CDATA[
function generar_fecha(){
var dia = document.getElementById("dia");
var mes = document.getElementById("mes");
var anio = document.getElementById("anio");
 
for (var d=1; d<=31; d++){
dia.options[dia.options.length] = new Option(d, d);
}
 
for (var m=1; m<=12; m++){
mes.options[mes.options.length] = new Option(m, m);
}
 
for (var a=1920; a < 2020; a++){ // definimos el rango de años
anio.options[anio.options.length] = new Option(a, a);
}
 
}
 
function verificar(){
var dia = document.getElementById("dia").selectedIndex;
var mes = document.getElementById("mes").selectedIndex;
var anio = document.getElementById("anio").selectedIndex;
var valor_anio =document.getElementById("anio").value;
alert(dia + '-' + mes + '-' + anio + '(' + valor_anio + ')');
}
 
//]]>
</script>
</head>
<body>
<form action="#">
<p> 
<select id="dia">
<option>día</option>
</select>
<select id="mes">
<option>mes</option>    
</select>
<select id="anio">
<option>año</option>
</select>
</p>
<p>
    <input type="button" value="verificar indices" onclick="verificar();"/>
</p>
</form>
<script type="text/javascript">
window.onload=function(){
generar_fecha();
}
</script>
</body>
</html>
 

2.html (hacemos aparecr por defecto la fecha actual)

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Generar form para fecha</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
<script type="text/javascript">
//<![CDATA[
function generar_fecha(){
var hoy=new Date()
var dia = document.getElementById("dia");
var mes = document.getElementById("mes");
var anio = document.getElementById("anio");
 
 
var este_anio = hoy.getFullYear();
for (var d=1; d<=31; d++){
dia.options[dia.options.length] = new Option(d, d);
}
 
for (var m=1; m<=12; m++){
mes.options[mes.options.length] = new Option(m,m);
}
 
for (var a=1920; a < 2020; a++){ //definimos el rango de años
if(a == hoy.getFullYear()){
anio.options[anio.options.length] = new Option(a,a,'defaultSelected','selected');
}else{
anio.options[anio.options.length] = new Option(a,a);
}
}
dia.selectedIndex = hoy.getDate();
mes.selectedIndex = hoy.getMonth()+1;
}
 
function verificar(){
var dia = document.getElementById("dia").selectedIndex;
var mes = document.getElementById("mes").selectedIndex;
var anio = document.getElementById("anio").selectedIndex;
var valor_anio =document.getElementById("anio").value;
alert(dia + '-' + mes + '-' + anio + '(' + valor_anio + ')');
}
 
//]]>
</script>
</head>
<body>
<form action="#">
<p>
<select id="dia">
<option><!--fix --></option>
</select>
<select id="mes">
<option><!-- fix --></option>   
</select>
<select id="anio">
<option><!--fix --></option>
</select>
</p>
<p>
    <input type="button" value="verificar indices" onclick="verificar();"/>
</p>
</form>
<script type="text/javascript">
window.onload=function(){
generar_fecha();
}
</script>
</body>
</html>
 

[gildus]

jajajaaj,

Felicitaciones @emprear

[Sirius381]

Ufff!! masters! les explico un poco, estoy trabajando con JSP's asi que creo mas 'correcto' trabajar con javascript, pero cualquier implementacion es bienvenida y re bienvenida, vo a usarlo todo jejejeje y de verdad, no es mentira, usare todo lo que me pasaron, muchas gracias a los dos!!

Saludos masters!

[emprear]

Por lo que ví, el for en JSP no difiere mucho de PHP, sería algo asi

Código JSP:

<%
for ( int i = 0; i <= 31 ; i++ ) {
%>
<option value="<%= i %>"><%= i %></option>
<%
 }
%>
 

Más o menos creo...
es cuestión de probar

SAludos

[Sirius381]

Oye emperar y si hago todo eso, toda la logica en las clases de java puro y en el codigo del portal solo llevo y traigo datos? por medio de beans o algo asi, esa implementación seria correcta? Supongo que si...

Saludos!!

[emprear]

la idea básica es hacer un bucle para ahorrarte escribir tanto html (y es aplicable a los tres lenguajes, js, php, jsp) el resto son agregados que hice o tenía hechos para mejorar el funcionamiento.
Si es mejor trabajar del lado del cliente o del server, obviamente si lo haces del lado del server es más seguro, en el caso de que javascript esté deshabilitado o no soportado. Aunque hoy en día hay aplicaciones que requieren si ó si de js, asi que hay que forzar al usuario que lo habilite.

SAludos

[Sirius381]

Ok, intentare implementarlo del lado del servidor y veo resultados, supongo que cuando esto empiece a crecer el performance va a ser importante, ahi decidire cual es el definitivo, mientras implemento todo lo que me pasaron para tenerlo ahi, nunca esta d emas no? jejeje

Muchas gracias amigo!