Foros del Web » Programando para Internet » Javascript »

Juntar varias variables en una y mandarla desde un formulario

Estas en el tema de Juntar varias variables en una y mandarla desde un formulario en el foro de Javascript en Foros del Web. Hola a tod@s, Os cuento: En un formulario en html tengo 3 selects (para el dia, el mes y el año) para indicar la fecha ...
  #1 (permalink)  
Antiguo 21/09/2012, 08:56
 
Fecha de Ingreso: mayo-2004
Ubicación: Madrid
Mensajes: 15
Antigüedad: 20 años
Puntos: 0
Juntar varias variables en una y mandarla desde un formulario

Hola a tod@s,
Os cuento:
En un formulario en html tengo 3 selects (para el dia, el mes y el año) para indicar la fecha de nacimiento.
Quiero juntar estas tres variables en una sola con la forma dia/mes/año.
creo que la forma correcta de hacerlo es:
var fecha=dia+'/'+mes+'/'+ano
El problema que tengo es que no se como transmitir esa variable a la base de datos donde recojo los datos.
Se (o creo saber) que la forma correcta serían a través de un campo hidden que recoja esa nueva variable, es decir, a través de un campo oculto del tipo:
<input type="hidden" name="fecha" id="fecha" />
pero no doy con ello.
¿Sabeis como podria hacerlo?

Muchas gracias
  #2 (permalink)  
Antiguo 21/09/2012, 09:03
Avatar de Alexis_Mejias  
Fecha de Ingreso: enero-2005
Ubicación: Santiago
Mensajes: 77
Antigüedad: 19 años, 4 meses
Puntos: 17
Respuesta: Juntar varias variables en una y mandarla desde un formulario

Tienes la función javascript?
Tienes el campo hidden?
El submit lo estas haciendo??

Pon más codigo y podremos ayudarte.

saludos,
__________________
Alexis Mejias C.
Freelancer Chile - Si te sirvió puntúa positivo
Blog Personal
  #3 (permalink)  
Antiguo 21/09/2012, 09:41
 
Fecha de Ingreso: mayo-2004
Ubicación: Madrid
Mensajes: 15
Antigüedad: 20 años
Puntos: 0
Respuesta: Juntar varias variables en una y mandarla desde un formulario

En la funcion javascript lo que hago es validar los campos de dia, mes y año y creo la nueva variable fecha:
Código Javascript:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Formulario en pruebas</title>
  6. <script type="text/javascript">
  7. function validar(){
  8. dia2= document.getElementById('dia').selectedIndex;
  9. if(dia2 == null || dia2== 0 ) {
  10.     alert("Por favor seleccione un dia de su fecha de nacimiento")
  11.   return false;
  12. }
  13.  
  14. mes2= document.getElementById('mes').selectedIndex;
  15. if(mes2 == null || mes2== 0 ) {
  16.     alert("Por favor seleccione un mes de su fecha de nacimiento")
  17.   return false;
  18. }
  19.  
  20. ano2= document.getElementById('ano').selectedIndex;
  21. if(ano2 == null || ano2== 0 ) {
  22.     alert("Por favor seleccione un año de su fecha de nacimiento")
  23.   return false;
  24. }
  25.  
  26. var fecha=dia+'/'+mes+'/'+ano;
  27. }
  28. </script></head>

El formulario es:
Código HTML:
Ver original
  1. <form name="envio" method="get" action="http://www.inkamarketing.net/formulario.php" onSubmit="return validar();">
  2. <table width="650" border="0" align="center">
  3.     <tr>
  4.       <td width="250"><strong>Nombre:</strong></span></td>
  5.       <td width="400"><input name="web_Nombre" type="text" id="web_Nombre" size="40"></td>
  6.       </tr>
  7.     <tr>
  8.       <td><strong>Apellidos:</strong></span></td>
  9.       <td><input name="web_Apellidos" type="text" id="web_Apellidos" size="40"></td>
  10.       </tr>
  11.     <tr>
  12.       <td><strong>Genero:</strong></span></td>
  13.       <td><input name="web_Genero" type="radio" value="1" />
  14.         Masculino
  15.         <input name="web_Genero" type="radio" value="0" />
  16.         Femenino</td>
  17.       </tr>
  18.     <tr>
  19.       <td><strong>DNI:</strong></span></td>
  20.       <td><input name="web_preg1" type="text" id="web_preg1" size="40" onblur="this.value = this.value.toUpperCase();" ></td>
  21.       </tr>
  22.     <tr>
  23.       <td><strong>fecha de Nacimiento</strong></td>
  24.       <td>
  25. <label for="dia"></label>
  26. <select name="dia" id="dia">
  27.   <option>Dia</option>
  28.         <option value="01">1</option>
  29.         <option value="02">2</option>
  30.         <option value="03">3</option>
  31.         <option value="04">4</option>
  32.         <option value="05">5</option>
  33.         <option value="06">6</option>
  34.         <option value="07">7</option>
  35.         <option value="08">8</option>
  36.         <option value="09">9</option>
  37.         <option value="10">10</option>
  38.         <option value="11">11</option>
  39.         <option value="12">12</option>
  40.         <option value="13">13</option>
  41.         <option value="14">14</option>
  42.         <option value="15">15</option>
  43.         <option value="16">16</option>
  44.         <option value="17">17</option>
  45.         <option value="18">18</option>
  46.         <option value="19">19</option>
  47.         <option value="20">20</option>
  48.         <option value="21">21</option>
  49.         <option value="22">22</option>
  50.         <option value="23">23</option>
  51.         <option value="24">24</option>
  52.         <option value="25">25</option>
  53.         <option value="26">26</option>
  54.         <option value="27">27</option>
  55.         <option value="28">28</option>
  56.         <option value="29">29</option>
  57.         <option value="30">30</option>
  58.         <option value="31">31</option>
  59.     </select>
  60.     <label for="mes"></label>  
  61.     <select name="mes" id="mes">
  62.         <option selected="selected">Mes</option>
  63.         <option value="01">Enero</option>
  64.         <option value="02">Febrero</option>
  65.         <option value="03">Marzo</option>
  66.         <option value="04">Abril</option>
  67.         <option value="05">Mayo</option>
  68.         <option value="06">Junio</option>
  69.         <option value="07">Julio</option>
  70.         <option value="08">Agosto</option>
  71.         <option value="09">Septiembre</option>
  72.         <option value="10">Octubre</option>
  73.         <option value="11">Noviembre</option>
  74.         <option value="12">Diciembre</option>
  75.     </select>
  76.     <label for="ano"></label>
  77. <select name="ano" id="ano">
  78.     <option selected="selected">A&ntilde;o</option>
  79.     <option value="2012">2012</option>
  80.     <option value="2011">2011</option>
  81.     <option value="2010">2010</option>
  82.     <option value="2009">2009</option>
  83.     <option value="2008">2008</option>
  84.     <option value="2007">2007</option>
  85.     <option value="2006">2006</option>
  86.     <option value="2005">2005</option>
  87.     <option value="2004">2004</option>
  88.     <option value="2003">2003</option>
  89.     <option value="2002">2002</option>
  90.     <option value="2001">2001</option>
  91.     <option value="2000">2000</option>
  92.     <option value="1999">1999</option>
  93.     <option value="1998">1998</option>
  94.     <option value="1997">1997</option>
  95.     <option value="1996">1996</option>
  96.     <option value="1995">1995</option>
  97.     <option value="1994">1994</option>
  98.     <option value="1993">1993</option>
  99.     <option value="1992">1992</option>
  100.     <option value="1991">1991</option>
  101.     <option value="1990">1990</option>
  102.     <option value="1989">1989</option>
  103.     <option value="1988">1988</option>
  104.     <option value="1987">1987</option>
  105.     <option value="1986">1986</option>
  106.     <option value="1985">1985</option>
  107.     <option value="1984">1984</option>
  108.     <option value="1983">1983</option>
  109.     <option value="1982">1982</option>
  110.     <option value="1981">1981</option>
  111.     <option value="1980">1980</option>
  112.     <option value="1979">1979</option>
  113.     <option value="1978">1978</option>
  114.     <option value="1977">1977</option>
  115.     <option value="1976">1976</option>
  116.     <option value="1975">1975</option>
  117.     <option value="1974">1974</option>
  118.     <option value="1973">1973</option>
  119.     <option value="1972">1972</option>
  120.     <option value="1971">1971</option>
  121.     <option value="1970">1970</option>
  122.     <option value="1969">1969</option>
  123.     <option value="1968">1968</option>
  124.     <option value="1967">1967</option>
  125.     <option value="1966">1966</option>
  126.     <option value="1965">1965</option>
  127.     <option value="1964">1964</option>
  128.     <option value="1963">1963</option>
  129.     <option value="1962">1962</option>
  130.     <option value="1961">1961</option>
  131.     <option value="1960">1960</option>
  132.     <option value="1959">1959</option>
  133.     <option value="1958">1958</option>
  134.     <option value="1957">1957</option>
  135.     <option value="1956">1956</option>
  136.     <option value="1955">1955</option>
  137.     <option value="1954">1954</option>
  138.     <option value="1953">1953</option>
  139.     <option value="1952">1952</option>
  140.     <option value="1951">1951</option>
  141.     <option value="1950">1950</option>
  142.     <option value="1949">1949</option>
  143.     <option value="1948">1948</option>
  144.     <option value="1947">1947</option>
  145.     <option value="1946">1946</option>
  146.     <option value="1945">1945</option>
  147.     <option value="1944">1944</option>
  148.     <option value="1943">1943</option>
  149.     <option value="1942">1942</option>
  150.     <option value="1941">1941</option>
  151.     <option value="1940">1940</option>
  152.     <option value="1939">1939</option>
  153.     <option value="1938">1938</option>
  154.     <option value="1937">1937</option>
  155.     <option value="1936">1936</option>
  156.     <option value="1935">1935</option>
  157.     <option value="1934">1934</option>
  158.     <option value="1933">1933</option>
  159.     <option value="1932">1932</option>
  160.     <option value="1931">1931</option>
  161.     <option value="1930">1930</option>
  162.     <option value="1929">1929</option>
  163.     <option value="1928">1928</option>
  164.     <option value="1927">1927</option>
  165.     <option value="1926">1926</option>
  166.     <option value="1925">1925</option>
  167.     <option value="1924">1924</option>
  168.     <option value="1923">1923</option>
  169.     <option value="1922">1922</option>
  170.     <option value="1921">1921</option>
  171.     <option value="1920">1920</option>
  172.     <option value="1919">1919</option>
  173.     <option value="1918">1918</option>
  174.     <option value="1917">1917</option>
  175.     <option value="1916">1916</option>
  176.     <option value="1915">1915</option>
  177.     <option value="1914">1914</option>
  178.     <option value="1913">1913</option>
  179.     <option value="1912">1912</option>
  180.     <option value="1911">1911</option>
  181.     <option value="1910">1910</option>
  182.     <option value="1909">1909</option>
  183.     <option value="1908">1908</option>
  184.     <option value="1907">1907</option>
  185.     <option value="1906">1906</option>
  186.     <option value="1905">1905</option>
  187.     <option value="1904">1904</option>
  188.     <option value="1903">1903</option>
  189.     <option value="1902">1902</option>
  190.     <option value="1901">1901</option>
  191.     <option value="1900">1900</option>
  192. <input type="hidden" name="fecha" id="fecha"   /></td>
  193.     </tr>
  194.     <tr>
  195.       <td><strong>Localidad:</strong></span></td>
  196.       <td><input name="web_extra1" type="text" id="web_extra1" size="40"></td>
  197.       </tr>
  198.     <tr>
  199.       <td><strong>Provincia:</strong></span></td>
  200.       <td><input name="web_Provincia" type="text" id="web_Provincia" size="40"></td>
  201.       </tr>
  202.     <tr>
  203.       <td><strong>E-Mail*:</strong></span></td>
  204.       <td><input name="web_mail" type="text" id="web_mail" size="40"></td>
  205.       </tr>
  206.     <tr>
  207.         <td colspan="2"><center>
  208.           <input name="alta_registro" type="submit" id="alta_registro" value="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Enviar Informaci&oacute;n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"></center>
  209.         </td>
  210.     </tr>
  211.                      
  212. </form>

El campo hidden está justo despues de los selects, tiene la forma:
<input type="hidden" name="fecha" id="fecha" />

Muchas gracias
  #4 (permalink)  
Antiguo 21/09/2012, 09:47
Avatar de Alexis_Mejias  
Fecha de Ingreso: enero-2005
Ubicación: Santiago
Mensajes: 77
Antigüedad: 19 años, 4 meses
Puntos: 17
Respuesta: Juntar varias variables en una y mandarla desde un formulario

en el javascript en la función agrega

Código HTML:
var fecha=dia+'/'+mes+'/'+ano;
document.getElementById("fecha").value = fecha;
return true;
Con eso despues lo recoges en el php como $_POST["fecha"];

Saludos!
__________________
Alexis Mejias C.
Freelancer Chile - Si te sirvió puntúa positivo
Blog Personal
  #5 (permalink)  
Antiguo 21/09/2012, 10:14
 
Fecha de Ingreso: mayo-2004
Ubicación: Madrid
Mensajes: 15
Antigüedad: 20 años
Puntos: 0
Respuesta: Juntar varias variables en una y mandarla desde un formulario

Cita:
Iniciado por Alexis_Mejias Ver Mensaje
en el javascript en la función agrega

Código HTML:
var fecha=dia+'/'+mes+'/'+ano;
document.getElementById("fecha").value = fecha;
return true;
Con eso despues lo recoges en el php como $_POST["fecha"];

Saludos!
Muchas gracias Alexis, el problema es que me gustaria no tocar el php y hacerlo todo desde el html, ya que a este van varios formularios distintos.
Luego el php conecta a una base mysql y desde este me descargo la bbdd generada
  #6 (permalink)  
Antiguo 21/09/2012, 10:31
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años
Puntos: 1284
Respuesta: Juntar varias variables en una y mandarla desde un formulario

Hola:

Cita:
Iniciado por 0gradoskelvin Ver Mensaje
...el problema es que me gustaria no tocar el php y hacerlo todo desde el html...
... y que pasa si el visitante deshabilita javascript... Ese tipo de operaciones consumen muy pocos recursos del servidor y te garantiza que todo llega correctamente...

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo

Última edición por caricatos; 21/09/2012 a las 17:55
  #7 (permalink)  
Antiguo 21/09/2012, 11:27
Avatar de Alexis_Mejias  
Fecha de Ingreso: enero-2005
Ubicación: Santiago
Mensajes: 77
Antigüedad: 19 años, 4 meses
Puntos: 17
Respuesta: Juntar varias variables en una y mandarla desde un formulario

Cita:
Iniciado por 0gradoskelvin Ver Mensaje
Muchas gracias Alexis, el problema es que me gustaria no tocar el php y hacerlo todo desde el html, ya que a este van varios formularios distintos.
Luego el php conecta a una base mysql y desde este me descargo la bbdd generada
Podrias agregar un hidden que indique el Origen, ese Origen te indicara en el formulario php que acciones seguir... asi lo dejas en un bloque separado del resto que tal?

Espero soluciones tu problema....


Saludos,
__________________
Alexis Mejias C.
Freelancer Chile - Si te sirvió puntúa positivo
Blog Personal
  #8 (permalink)  
Antiguo 21/09/2012, 12:20
 
Fecha de Ingreso: diciembre-2011
Mensajes: 77
Antigüedad: 12 años, 4 meses
Puntos: 2
Respuesta: Juntar varias variables en una y mandarla desde un formulario

Lo que quieres me parece que sería muy factible hacerlo utilizando AJAX.
Puedes revisar la función ajax de Jquery. Saludos.
  #9 (permalink)  
Antiguo 21/09/2012, 13:17
Avatar de ana_gloria  
Fecha de Ingreso: febrero-2008
Mensajes: 65
Antigüedad: 16 años, 2 meses
Puntos: 1
Respuesta: Juntar varias variables en una y mandarla desde un formulario

Bueno, mas arriba dices q no qieres tocar php pero si ajax me es un poco confuso pero respeto, y si me permites darte mi opinion en tu caso yo lo haria así:

<input type="hidden" name="fecha" id="fecha" value="<?php echo ".$ano."-".$mes."-".$dia."?>/>


Debes respetar la estructura dl tipo fecha en las bases de datos, deben ser primero año luego mes luego dia, en total 10 caracteres, saludos y es mi humilde opinion
  #10 (permalink)  
Antiguo 21/09/2012, 16:21
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 16 años, 10 meses
Puntos: 1567
Respuesta: Juntar varias variables en una y mandarla desde un formulario

hay algo que se me escapa, o esto está mal enfocado. en primer lugar, cualquier validación seria debería hacerse con php, a lo suno usar ajax+php para mejorar la experiencia del usuario, en segundo, si el objetivo final es cargar esos datos en una bd, no le veo sentido a crear una nueva variable en javascript, cuando con los $_POST para dia, mes y año podés construir el formato que desees
Código PHP:
Ver original
  1. <form action="#" id="validar_fecha">
  2. <label for="nombre">Nombre </label> <input type="text" id="nombre" value="" name="nombre" />
  3. <p>Fecha de nacimiento</p>
  4. <p>
  5. <select name="dia" id="dia">
  6. <option value="">día</option>
  7. <?php for ($i = 1; $i <= 31 ; $i++) { ?>
  8. <option value="<?php echo $i; ?>"><?php echo $i; ?></option>
  9. <?php } ?>
  10. </select>
  11. <select name="mes" id="mes">
  12. <option value="">mes</option>
  13. <?php for ($i = 1; $i <= 12 ; $i++) { ?>
  14. <option value="<?php echo $i; ?>"><?php echo $i; ?></option>
  15. <?php } ?>
  16. </select>
  17. <select name="anio" id="anio">
  18. <option value="">año</option>
  19. <?php for ($i = 1920; $i <= 2011 ; $i++) { ?>
  20. <option value="<?php echo $i; ?>"><?php echo $i; ?></option>
  21. <?php } ?>
  22. </select>
  23. </p>

y en el php que procesa

Código PHP:
Ver original
  1. $dia = $_POST['dia'];
  2. $mes = $_POST['mes'];
  3. $anio = $_POST['anio'];
  4.  
  5. $fecha_nacimiento = "$dia/$mes/$anio"; //creas una cadena segun el criterio deseado

Finalmente, para validar fechas de nacimiento, no olvides el problema que representan loa años bisiestos

Código PHP:
Ver original
  1. <?php
  2. $dia = $_POST['dia'];
  3. $mes = $_POST['mes'];
  4. $anio = $_POST['anio'];
  5.  
  6. $validar = validarFecha($dia, $mes, $anio);
  7. if($validar !== false){
  8. $fecha_nacimiento = "$dia/$mes/$anio";
  9. }else{
  10. // error
  11. }
  12.  
  13. function validarFecha($dia, $mes, $anio){
  14.   if ($dia<0 || $dia>31 || $mes<0 || $mes >12)
  15.     $valida=false;
  16.   else
  17.     if (($mes==4 || $mes==6 || $mes==9 || $mes==11) && $dia > 30)
  18.       $valida=false;
  19.     else
  20.       if ($mes==2 && $dia>28+bisiesto($anio))
  21.         $valida=false;
  22.        else
  23.         $valida=true;
  24.   return $valida;
  25. }
  26.  
  27. function bisiesto($anio){
  28.   if ($anio%4!=0)
  29.     $bisiesto=false;
  30.   else
  31.     if ($anio%400==0)
  32.       $bisiesto=true;
  33.     else
  34.       if ($anio%100==0)
  35.         $bisiesto=false;
  36.       else
  37.         $bisiesto=true;
  38.   return $bisiesto;
  39. }
  40.  
  41. ?>

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #11 (permalink)  
Antiguo 24/09/2012, 09:52
 
Fecha de Ingreso: mayo-2004
Ubicación: Madrid
Mensajes: 15
Antigüedad: 20 años
Puntos: 0
Respuesta: Juntar varias variables en una y mandarla desde un formulario

Antes de nada muchas gracias por todas vuestras respuestas.
El porqué no tocar el php de destino es porque ese formulario.php solo lo usamos para recoger las variables y subirlas al mysql, y todos los formularios que usamos ( por ejemplo este que os os he preguntado) conectan con este php. Así que todas las validaciones las debemos de hacer en el formulario de origen.
Si....es un poco caos, pero ya sabeis que donde manda patrón....

Pero en resumen.....que al final lo he logrado!!!!!
Lo he hecho así:
primero válido la fecha:
Código Javascript:
Ver original
  1. <script type="text/javascript">
  2. function validar(){
  3.    
  4. //hago validacion fecha de nacimiento(dia,mes y ano)
  5. dia2= document.getElementById('dia').selectedIndex;
  6. if(dia2 == null || dia2== 0 ) {
  7.     alert("Por favor seleccione un dia de su fecha de nacimiento")
  8.   return false;
  9. }
  10.  
  11. mes2= document.getElementById('mes').selectedIndex;
  12. if(mes2 == null || mes2== 0 ) {
  13.     alert("Por favor seleccione un mes de su fecha de nacimiento")
  14.   return false;
  15. }
  16.  
  17. ano2= document.getElementById('ano').selectedIndex;
  18. if(ano2 == null || ano2== 0 ) {
  19.     alert("Por favor seleccione un año de su fecha de nacimiento")
  20.   return false;
  21. }

Y a continuación junto la variable en una y creo la variable que va en el campo oculto
Código Javascript:
Ver original
  1. //junto todas las variables de fecha en una
  2. var fecha;
  3. fecha=document.getElementById('dia').value+"/"+document.getElementById('mes').value+"/"+document.getElementById('ano').value;
  4. envio.web_preg2.value = fecha;
  5.  
  6.  
  7. }
  8. </script>

y luego en el formulario creo un campo oculto que es el que transmite la variable:
Código HTML:
Ver original
  1. <input type="hidden" name="web_preg2" id="web_preg2" />

Lo dicho...que muchas gracias a tod@s.
  #12 (permalink)  
Antiguo 24/09/2012, 10:35
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 16 años, 10 meses
Puntos: 1567
Respuesta: Juntar varias variables en una y mandarla desde un formulario

Yo le diría a tu patrón que entre en razones, con las herramientas de edición de código que cualquier navegador incorpora hoy en día, ese tipo de validaciones pueden ser pasadas por alto.
Usar javascript puro solo sirve para mejorar la experiencia del usuario, pero se seguridad tiene poco y nada
Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.

Etiquetas: formulario, html, input, juntar, select, variables
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 06:16.