[SOLUCIONADO] Pasar datos de un formulario a otro con botones

Landa11 · #1 (**permalink**) 23/05/2014, 11:30

Hola mi duda es la siguiente:

Tengo una lista de sucursales y quiero pasar de uno a otro lado para que ese usuario tenga activas esas sucursales.

Dejo el código que tengo hasta el momento y espero me puedan orientar ya que no he podido conseguir alguna ayuda en alguna página.

De no ser así creo que lo tendré que desarrollar con checkbox para habilitar las sucursales y enviar los datos a mi DB.

Código HTML:

Ver original<!doctype html>
<html>
<head>
 
<style>
body{width:600px;margin:0 auto;overflow-x:hiden;}
select{width:180px;margin:0 0 50px 0;border:1px solid #ccc;padding:10px;border-radius:10px 0 0 10px;}
.clear{clear:both;text-align:center}
div{float:left;width:200px;text-align:center}
input {margin:25px 1px 0 1px;border:1px solid #ccc;padding:10px;}
.izq{border-radius:10px 0 0 10px;}
.der{border-radius:0 10px 10px 0;}
</style>
 
</head>
 
<body>
<form action="" method="post" id="formulario">
        <div>
            <select name="origen[]" id="origen" multiple="multiple" size="8">
                <option value="1">Opción 1</option>
                <option value="2">Opción 2</option>
                <option value="3">Opción 3</option>
                <option value="4">Opción 4</option>
                <option value="5">Opción 5</option>
                <option value="6">Opción 6</option>
                <option value="7">Opción 7</option>
                <option value="8">Opción 8</option>
            </select>
        </div>
        <div>
            <input type="button" class="pasar izq" value="Pasar »"><input type="button" class="quitar der" value="« Quitar"><br />
            <input type="button" class="pasartodos izq" value="Todos »"><input type="button" class="quitartodos der" value="« Todos">
        </div>
        <div class="">
            <select name="destino[]" id="destino" multiple="multiple" size="8"></select>
        </div>
        <p class="clear"><input type="submit" class="submit" value="Procesar formulario"></p>
    </form>
        
        <script type="text/javascript">
 $().ready(function() 
    {
        $('.pasar').click(function() { return !$('#origen option:selected').remove().appendTo('#destino'); });  
        $('.quitar').click(function() { return !$('#destino option:selected').remove().appendTo('#origen'); });
        $('.pasartodos').click(function() { $('#origen option').each(function() { $(this).remove().appendTo('#destino'); }); });
        $('.quitartodos').click(function() { $('#destino option').each(function() { $(this).remove().appendTo('#origen'); }); });
        $('.submit').click(function() { $('#destino option').prop('selected', 'selected'); });
    });
</script>     
</body>
</html>

Alexis88 · #2 (**permalink**) 23/05/2014, 13:21

Cuando seleccionas los valores y los envías, ¿qué resultado obtienes? ¿En qué parte te estás complicando?

Saludos

Landa11 · #3 (**permalink**) 23/05/2014, 14:06

Apenas lo estoy desarrollando pero no me funciona el botón para pasar los datos de un lado a otro, así que no me arroja algún dato o algún error.

Alexis88 · #4 (**permalink**) 23/05/2014, 14:27

No me queda muy claro hacia dónde es que deben de pasar los datos cuando des clic a uno de esos botones. En el título dice 'Pasar datos de un formulario a otro...', pero veo solo uno que enviará los datos hacia la misma página en la que se encuentra.

Landa11 · #5 (**permalink**) 23/05/2014, 14:44

Ah ok en este caso de un formulario a otro es a donde quiero pasar los datos

Los datos que están en este select:

Código HTML:

Ver original<select name="origen[]" id="origen" multiple="multiple" size="8"></select>

Agregarlos a este otro:

Código HTML:

Ver original<select name="destino[]" id="destino" multiple="multiple" size="8"></select>

Y de ahí tomar los valores que se encuentren en ese select y mandarlos a la base de datos, no sé si me explico.

Por que mi otra opción en vez de utilizar este tipo de listas, es agregar un checkbox para seleccionar que datos estarán activos y cuales no

Alexis88 · #6 (**permalink**) 23/05/2014, 14:55

Se me ocurre una solución, pero antes de dártela, si vas a pasar datos de un <select> a otro para enviar solo lo que están en el segundo <select>, ¿por qué no mejor envías lo que ya seleccionaste en el primero?

Edito: Independientemente de que soluciones tu problema enviando los datos seleccionados en el primer <select>, creo que esto es lo buscas hacer:

Cada vez que des un clic al primer <select> (de ahora en adelante, A), obtienes un array con las opciones que tiene el segundo <select> (de ahora en adelante, B) y verificas si el valor de la opciones a la que le diste clic, existe o no en B. De estar presente, lo eliminas, caso contrario, creas una opción, tomas el contenido de la opción de A a la que le diste el clic, se lo asignas a la opción creada, además de asignarle a esta nueva opción el valor de la opción seleccionada y la adhieres a B.

Estos son los métodos que utilicé:

Array.prototype.map: Crea un array a partir de una lista de datos que se le pase como primer parámetro, asignando a cada uno de estos al nuevo array con la función que se le pasa como segundo parámetro.
event.target: Devuelve el objeto al cual se le aplicó el evento en cuestión, en este caso, el evento click.
document.createElement: Crea un nuevo elemento HTML.
removeChild: Remueve un elemento, indicado entre paréntesis, del elemento al que se hace referencia.
appendChild: Agrega un nuevo elemento, indicado entre paréntesis, al final del elemento al que se hace referencia.

Saludos

Landa11 · #7 (**permalink**) 23/05/2014, 16:12

Así es, el ejemplo es el correcto para lo que tengo en mente, igual tomaré en cuenta tu opinión de mandar los datos que se seleccionan desde el primero.

Lo dejaré un poco pendiente en lo que hago unos cambios a mi página y lo retomaré. Espero que puedas ayudarme de nuevo en el futuro.

Muchas gracias!!!!!