Foro - Perl en Español

La comunidad de programadores en Perl de habla hispana.

Obviar


  • Publicidad

Llenar varios inputs a partir de un option select

Discute todo acerca de JavaScript así como DHTML o la tecnología AJAX.
Publicar una respuesta

Llenar varios inputs a partir de un option select

Notapor hugo11ab » 2016-01-06 21:21 @931

¿Qué tal?, nuevamente solicitando de su gran apoyo.

El problema que tengo en que necesito llenar varios textbox a partir del valor de un option select. Para esto estoy usando JQuery y Ajax. He visto varios manuales de cómo hacerlo, he avanzado en una parte pero el problema que tengo es que no sé cómo regresar los valores para ubicarlos en los textbox correspondientes.

Desde este script tengo el option value (lo que no sé es cómo colocar los valores en las cajas nomCategoria y numBeneficiarios).

Sintáxis: [ Descargar ] [ Ocultar ]
Using perl Syntax Highlighting
  1. sub datosLaborales {
  2.     my (@categoria,%labCategorias);
  3.  
  4.     push @gerencias,"";
  5.     ($rs,$fetch)
  6.         = record(
  7.             db        => "consulta_ategorias",
  8.             tabla     => "categorias",
  9.             condicion => "order by 2",
  10.             campos    => "id,codigo",
  11.             visible   => "no"
  12.     );
  13.  
  14.     while($fetch->()) {
  15.         push @categorias,$$rs{id};
  16.         $labCategorias{$$rs{id}} = $$rs{codigo};
  17.     }
  18.  
  19.     my $tblCategorias
  20.         = new HTML::Table(
  21.             -rows    => 2,
  22.             -cols    => 2,
  23.             -border  => 0,
  24.             -bgcolor => 0,
  25.             -width   => "100%",
  26.             -spacing => 0,
  27.             -padding => 3,
  28.             -class   => "tabla_principal2"
  29.     );
  30.     $tblCategorias->setCell(2,1,
  31.         "<span class=negro>Seleccione la Categoria</span> <br/>"
  32.       . popup_menu(
  33.             -name      => 'categoria',
  34.             -id        => 'categoria',
  35.             -value     => [(@categorias)],
  36.             -labels    => {%labCategorias},
  37.             -default   => "",
  38.             -onKeyDown => 'javascript&#058; if (event.keyCode==13 || event.keyCode==9) handleEnter(this,event);',
  39.             -class     => 'estilopopup'
  40.         )
  41.     );
  42.     $tblCategorias->setCell(2,2,
  43.         "<span class=negro>Nombre de la Categoria</span> <br>"
  44.       . textfield(
  45.             -id        => 'nomCategoria',
  46.             -name      => 'nomCategoria',
  47.             -value     => "",
  48.             -class     => 'bloqueado2',
  49.             -size      => 40,
  50.             -maxlength => 40,
  51.             -onpaste   => "return false",
  52.             readOnly   => "true"
  53.         )
  54.     );
  55.     $tblCategorias->setCell(3,1,
  56.         "<span class=negro>Número de Beneficiarios</span> <br>"
  57.       . textfield(
  58.             -id        => 'numBeneficiarios',
  59.             -name      => 'numBeneficiarios',
  60.             -value     => "",
  61.             -class     => 'bloqueado2',
  62.             -size      => 25,
  63.             -maxlength => 10,
  64.             -onpaste   => "return false",
  65.             readOnly   => "true"
  66.         )
  67.     );
  68.     $tblCategorias->setColAlign(1,"LEFT");
  69.     $tblCategorias->setColAlign(2,"LEFT");
  70.  
  71.     do "menu.cgi";
  72.     my $diseno = &obten_menuPrincipal($tblCategorias);
  73.  
  74.     print $session->header;
  75.     print start_html(
  76.         -title  => 'CATEGORIAS',
  77.         -script => [
  78.             #{ -language => 'JavaScript', -src =>'../../mnj_categoria/js/jquery-1.11.2.min.js'},
  79.             { -language => 'JavaScript', -src => 'http://code.jquery.com/jquery-1.11.3.min.js'},
  80.             { -language => 'JavaScript', -src => '../../mnj_categoria/js/jquery-ui-1.10.4.custom.min.js'},
  81.             { -language => 'JavaScript', -src => '../../mnj_categoria/js/valCategoria.js'}                            
  82.         ],
  83.         -style  => [
  84.             { -src => $server . '/mnj_categoria/css/principal.css'},
  85.         ],
  86.     );
  87.  
  88.     print start_multipart_form(
  89.         -action => $script_name,
  90.         -name   => 'form',
  91.         -id     => 'form'
  92.     );
  93.     print $diseno;
  94.     print end_form();
  95.     print end_html();
  96.  
  97.     exit;
  98. }
Coloreado en 0.004 segundos, usando GeSHi 1.0.8.4


Este es el JavaScript donde estoy efectuando la llamada del Ajax:

Sintáxis: [ Descargar ] [ Ocultar ]
Using javascript Syntax Highlighting
  1. $(document).ready(function (){
  2.    
  3.    $("#categoria").change( function(){   
  4.       var id= $("#categoria").val();
  5.           var url ="obtenValCategorias.cgi";
  6.           $.ajax({
  7.                  type:'POST',
  8.                  url:url,
  9.                  data:'id='+id,
  10.                  success:function(data){                         
  11.                          //es en esta parte como poner los valores en sus respectivas cajas
  12.                          $("#nomCategoria").html(data);
  13.                          $("#numBeneficiarios").html(data);
  14.                  }
  15.           });    
  16.           return false;  
  17.    });
  18. });
Coloreado en 0.001 segundos, usando GeSHi 1.0.8.4


Este es el código de obtenValCategorias.cgi
Sintáxis: [ Descargar ] [ Ocultar ]
Using perl Syntax Highlighting
  1. #!/usr/bin/perl -w
  2. BEGIN{ @INC=(@INC,"/var/www/cgi-bin/comun"); }
  3.  
  4. use mnj_plantilla;
  5. use strict;
  6.  
  7. &buscaCategoria();  
  8. exit;
  9.  
  10. sub buscaCategoria {
  11.     my($nombre,$beneficiarios);
  12.  
  13.     ($rs,$fetch)
  14.         = record(
  15.             db        => "consulta_ategorias",
  16.             tabla     => "categorias",
  17.             condicion => "WHERE id=$FORM{id}",
  18.             campos    => "nombre,beneficiarios",
  19.             visible   => "no"
  20.     );
  21.  
  22.     while($fetch->()) {
  23.         $nombre        = $$rs{nombre};
  24.         $beneficiarios = $$rs{beneficiarios};
  25.     }
  26.  
  27.     print $session->header;
  28.     print start_html(
  29.         -title  => 'CATEGORIAS',
  30.         -script => [
  31.                    ],
  32.         -style  => [
  33.                    ],
  34.     );
  35.  
  36.     # el nombre y el beneficiario sí los obtengo,
  37.     # pero no sé cómo regresar los valores para que estos se procesen
  38.     # y caigan en sus respectivas cajas de texto
  39.     print $nombre,$beneficiarios;
  40. }
Coloreado en 0.001 segundos, usando GeSHi 1.0.8.4


Espero y puedan ayudarme y de antemano muchas gracias.
hugo11ab
Perlero nuevo
Perlero nuevo
 
Mensajes: 77
Registrado: 2006-07-22 23:24 @016
Arriba

Publicidad

Re: Llenar varios inputs a partir de un option select

Notapor explorer » 2016-01-07 03:38 @193

Debes componer la respuesta de una manera que luego, en el código JavaScript, puedes extraer, y colocar el contenido de cada control.

Una forma moderna para hacerlo es codificar la información en JSON, ya que luego es fácil de extraer con el JavaScript. Pero lo puedes resolver incluso con una sola cadena de caracteres, unidos los dos campos con un carácter especial, por ejemplo, '|'. Y luego hacer un split en el lado del JQuery.
JF^D Perl programming & Raku programming. Grupo en Telegram: https://t.me/Perl_ES
Avatar de Usuario
explorer
Administrador
Administrador
 
Mensajes: 14486
Registrado: 2005-07-24 18:12 @800
Ubicación: Valladolid, España
Arriba

Re: Llenar varios inputs a partir de un option select

Notapor hugo11ab » 2016-01-07 14:25 @642

Muchas gracias, explorer, ya quedó solucionado.

Así quedó el JavaScript:
Sintáxis: [ Descargar ] [ Ocultar ]
Using javascript Syntax Highlighting
  1. $(document).ready(function (){
  2.    
  3.    $("#categoria").change( function(){  
  4.           var id= $("#categoria").val();
  5.           var url ="obtenValCategorias.cgi";
  6.           $.ajax({
  7.                  type:'POST',
  8.                  url:url,
  9.                  data:'id='+id,
  10.                  success:function(data){                        
  11.                          var resultado = data.split('|');
  12.                          $("#nomCategoria").value(resultado[0]);
  13.                          $("#numBeneficiarios").value(resultado[1]);
  14.                  }
  15.           });    
  16.           return false;  
  17.    });
  18. });
Coloreado en 0.001 segundos, usando GeSHi 1.0.8.4

Así quedó el cgi:
Sintáxis: [ Descargar ] [ Ocultar ]
Using perl Syntax Highlighting
  1. #!/usr/bin/perl -w
  2. BEGIN{ @INC=(@INC,"/var/www/cgi-bin/comun"); }
  3.  
  4. use mnj_plantilla;
  5. use strict;
  6.  
  7. &buscaCategoria();  
  8. exit;
  9.  
  10. sub buscaCategoria {
  11.     my($nombre,$beneficiarios);
  12.  
  13.     ($rs,$fetch)
  14.         = record(
  15.             db        => "consulta_ategorias",
  16.             tabla     => "categorias",
  17.             condicion => "WHERE id=$FORM{id}",
  18.             campos    => "nombre,beneficiarios",
  19.             visible   => "no"
  20.     );
  21.  
  22.     while($fetch->()) {
  23.         $nombre        = $$rs{nombre};
  24.         $beneficiarios = $$rs{beneficiarios};
  25.     }
  26.     my $resultado = $nombre ."|".$beneficiarios;
  27.     print $session->header;
  28.     print $resultado;
  29. }
Coloreado en 0.001 segundos, usando GeSHi 1.0.8.4
Última edición por explorer el 2016-01-07 16:48 @742, editado 1 vez en total
Razón: Poner marcasde código
hugo11ab
Perlero nuevo
Perlero nuevo
 
Mensajes: 77
Registrado: 2006-07-22 23:24 @016
Arriba
Publicar una respuesta

Volver a JavaScript

¿Quién está conectado?

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

Powered by phpBB® Forum Software © phpBB Group
Traducción al Español Mexicano por nextgen en colaboración con phpbb-es.com
phpBB SEO
Advertisements by Advertisement Management
cron