Posts tagged "formulario"

the making of: Desplegable de Entidades Bancarias para Formulario HTML

No se si os habréis encontrado alguna vez en la necesidad de añadir un desplegable con nombres y códigos de entidades bancarias a alguno de vuestros formularios. Si el caso es afirmativo, ya os las habréis apañado seguramente mejor que yo, si el caso es que no, pero probablemente algún día os toque… os voy a dar un pequeño truco, ya que seguramente lo único que encontraréis será el listado tal cual en texto plano… y eso convertirlo a un

<select name=”Entidad”>

    <option value=”2011”> - CAJA AHORROS MONTE PIEDAD BARCELONA </option>

</select>

lleva tela para hacerlo a mano…

En resumen, os voy a enseñar como pasar de esto:

  2000 CONFEDERACION ESPAÑOLA CAJAS AHORROS
  2001 CAJA AHORROS PROVINCIAL ALBACETE
  2005 CAJA AHORROS PROVINCIAL ALICANTE
  2006 MONTE PIEDAD Y CAJA AHORROS ALMERIA
  2007 CAJA AHORROS Y PRESTAMOS ANTEQUERA
  2010 M.P.CAJA GRAL AHORROS DE BADAJOZ
  2011 CAJA AHORROS MONTE PIEDAD BARCELONA
  2012 CAJA PENSIONES V.A.CATALUÑA Y BAL

a esto:

<option value=’2000’>   - CONFEDERACION ESPAÑOLA CAJAS AHORROS </option>
<option value=’2001’>   - CAJA AHORROS PROVINCIAL ALBACETE </option>
<option value=’2005’>   - CAJA AHORROS PROVINCIAL ALICANTE </option>
<option value=’2006’>   - MONTE PIEDAD Y CAJA AHORROS ALMERIA </option>
<option value=’2007’>   - CAJA AHORROS Y PRESTAMOS ANTEQUERA </option>
<option value=’2010’>   - M.P.CAJA GRAL AHORROS DE BADAJOZ </option>
<option value=’2011’>   - CAJA AHORROS MONTE PIEDAD BARCELONA </option>
<option value=’2012’>   - CAJA PENSIONES V.A.CATALUÑA Y BAL </option>

en unos sencillos pasos.

Lo primero, obtener el listado de Entidades Bancarias

asusta ¿no?

Despues, analizar que es lo que queremos, pues separar el código númerico del nombre de entidad y crear una cadena que contenga:

<option value=”$codigoEntidad”> - $nombreEntidad </option>

así que echamos mano de las expresiones regulares que tenemos cogiendo polvo en nuestra cabeza (veréis que esta es muy fácil y cortita) y la aplicamos a la cadena de muestra.:

([0-9]{4})

esto nos dará los cuatro dígitos con los que comienza la cadena

“2011 CAJA AHORROS MONTE PIEDAD BARCELONA”

es decir,

“2011”

ahora solo tenemos que coger el resto de la cadena en otra variable, y escribir la cadena que queremos…

le damos forma en nuestro lenguaje de programación favorito y…

<?php

// abrimos fichero
$lines = file('listado_Entidades_Bancarias.txt');

foreach($lines as $line) {

    // extraer código de entidad
    preg_match('/([0-9]{4})/', $line, $match);
    $codigoEntidad = $match[0];


    //Reemplazamos el código de entidad por un guión   
    $nombreEntidad = preg_replace('/([0-9]{4})/',"-", $line);
    $nombreEntidad = rtrim($nombreEntidad);
    //print $nombreEntidad;

    //escribimos la linea opción
    $opcion ="<option value='$codigoEntidad'> $nombreEntidad </option>\n";
    print $opcion;
}

?>

y et voila! ya tenemos nuestro texto con la forma deseada


Comments

making of: jQuery jugando al gato y al ratón, show & hide en HTML forms

Hoy es el día de aprender cosas…

Así que vamos a ver, como manejar elementos en formularios web de manera que podamos mostrarlos u ocultarlos según nos convenga:

javascript:

 $(document).ready(function() {
              
                $('#showFoo2').hide();
                $('#Foo1').click( function(e) {
                    if (e.target.type !== 'radio') {
                        $(this).find(":radio").trigger('click');
                       
                    }
                    $('#showFoo2').hide();
                    $('#showFoo1').show();
                   });
                   $('#Foo2').click( function(e) {
                    if (e.target.type !== 'radio') {
                        $(this).find(":radio").trigger('click');
                       
                       
                    }
                        $('#showFoo1').hide();
                        $('#showFoo2').show();
                   });
            // bind 'fooForm' y nos da un callback 
            $('#fooForm').ajaxForm(function() {
                alert("Datos enviados al servidor");
            });
        });

HTML:

<form method='post' action="devnull.php" id="fooForm" />

 Foo1 o Foo2:<br>
            <input id="Foo1" type="radio" name="Foo" value="01"

            checked="checked" >
            Foo1 <br>
            <div id="showFoo1">
                #Foo1:
<input name="fooInput1" type="text"           

                size="20" maxlength="20" /> <br>
            </div>
            <input id="Foo2" type="radio" name="Foo2" value="02">  

           Foo2<br>
            <div id="showFoo2">
                 Foo2:
<input name="fooInput2"  

                 type="text" maxlength="16" />
            </div>


</form>           


Comments