select multiple a textarea

kaninox · #1 (**permalink**) 31/03/2010, 07:13

Hola muchachos estoy realizando un formulario para enviar correos y pues me gustaría sacar los correos de base de datos en un select múltiple e irlos agregando a un textarea al hacer click y separados por coma, como lo hace hotmail creo.

un ejemplo de lo que quiero es :

de hecho modifique unos codigos, pero solo me copia una direcccion y ya luego la sobre escribe.

Código HTML:

Ver original<script type="text/javascript">
function muestraentextarea()
{
    var indice=document.forms[0].correos.options.selectedIndex;
    document.forms[0].envia_emails.value=document.forms[0].correos.options[indice].text;
}
</script>
 
<form name="forms">
<select multiple="multiple" size="7" name="correos" id="correos" style="width: 500px;" onchange="muestraentextarea()">
<option value="[email protected]">[email protected]</option>
<option value="[email protected]">[email protected]</option>
<option value="[email protected]">[email protected]</option>
</select>
<br /><br />
<textarea name="envia_emails" style="width: 500px;" rows="5"></textarea>
</form>

Alguna idea ?
Saludos.

riscking · #2 (**permalink**) 31/03/2010, 12:26

Hola, para rellenar los select con una llamada a la base de datos seria algo asi

Código PHP:

  $(document).ready(function(){ 
$("#email").html('<option selected="selected" value="0">Cargando...</option>') 
            $.post("modules/busqueda.php",{  //en un archivo php creas la llamada a la base de datos 
                  }  
                ,function(data){ 
                $("#email").html(data); //rellena los select 
                 
            }); 
 
 
 
<select name="email" id="email"> 
        <option value="0" selected>--------------------</option> 
        </select> 
 
y el php seria algo asi 
 
$res = mysql_query("SELECT ....."); 
        while($rs = mysql_fetch_array($res)) 
            echo '<option value="'.$rs["id"].'">'.htmlentities($rs["nombre"]).'</option>';

Espero que te sirva, los de ir cargando los emails en el textarea, supongo q tendras q poner un $("select").change(function(){ e ir guardando el valor del select q seleciones en un array .
Espero que te sirva, soy un poco novato tb en esto pero como me han ayudado a mi espero que te sirva.
Un saludo.

Adler · #3 (**permalink**) 31/03/2010, 12:37

Hola

Prueba así

Código Javascript:

Ver originaldocument.forms[0].envia_emails.value += document.forms[0].correos.options[indice].text + ",";

Suerte

kaninox · #4 (**permalink**) 31/03/2010, 14:34

riscking lo de llenar en php o ajax no era el problema, gracias de todas formas, adler justo era lo que buscaba gracias me funciona perfecto, solo una pregunta mas o no se si lo mejor seria abrir un tema nuevo, pero como se podria hacer para controlar en el textarea un maximo de correos, digamos 20 arrobas que se yo, ya que la idea de esto es seleccionar los emails desde un select multiple pero tambien ingresar nuevos, pero la idea es no hacer spam y que puedan llenar todos los que deceen, muchas gracias :)

Adler · #5 (**permalink**) 31/03/2010, 14:44

Hola

Algo como esto te los limitará a 4

Código Javascript:

Ver originalvar control = 0;
function muestraentextarea() 
{
var indice=document.forms[0].correos.options.selectedIndex;
 
    if (control == 0) {
        document.forms[0].envia_emails.value = document.forms[0].correos.options[indice].text;
    } else if (control <= 3) {
        document.forms[0].envia_emails.value += "," + document.forms[0].correos.options[indice].text;
    }
control += 1;
}

Suerte

kaninox · #6 (**permalink**) 31/03/2010, 15:00

mmmm si genial pero mi pregunta iba mas enfocada el textarea en si, digo por que claramente puedo ingresar hasta 4 emails desde el select multiple, pero aun puedo seguir anotando en el textarea, lo idea seria que no se despues de la , (coma) numero 20 me salte un alert que diga que no se pueden ingresar mas correos, limite excedido, no se si se podra, de todas formas me avanzaste bastante, ya que mi fuerte no es el javascript, saludos y gracias

Edito : un problema que noto es que al ingresar los 4 si los elimino del textarea y quiero cambiarlos por otros ya no me anda mas :/...

saludos

Adler · #7 (**permalink**) 01/04/2010, 11:33

Hola

Prueba con esto

Código Javascript:

Ver original<html>
<head>
<script type="text/javascript">
var control = 0;
function muestraentextarea(correo) {
var txtarea = document.getElementById("envia_emails");
cantidad_emails = txtarea.value.split(",");
 
    if (cantidad_emails.length <= 3) {
        if (control == 0) {
            txtarea.value += correo;
        } else if (control <= 3) {
            txtarea.value += "," + correo;
        }
    }
 
control += 1;
//alert(cantidad_emails.length);
}
 
var total = 0;
var valor_max = 0;
function valcantidad(txtarea) {
cantidad_emails = txtarea.value.split(",");
total = txtarea.value.length;
    if (cantidad_emails.length <= 4) {
valor_max = 0;
        for (i = 0; i < cantidad_emails.length; i++) {
        valor_max += cantidad_emails[i].length;
        }
 
        if(total > parseInt(valor_max+3)) {
        txtarea.value = txtarea.value.substring(0,parseInt(valor_max+3));
        }
    } else {
        txtarea.value = txtarea.value.substring(0,total-1);
    }
}
</script>
</head>
<body>
<form name="forms">
<select multiple="multiple" size="7" name="correos" id="correos" style="width: 500px;" onchange="muestraentextarea(this.options[this.selectedIndex].value)">
<option value="[email protected]">[email protected]</option>
<option value="[email protected]">[email protected]</option>
<option value="[email protected]">[email protected]</option>
<option value="[email protected]">[email protected]</option>
<option value="[email protected]">[email protected]</option>
<option value="[email protected]">[email protected]</option>
<option value="[email protected]">[email protected]</option>
<option value="[email protected]">[email protected]</option>
</select>
<br /><br />
<textarea name="envia_emails" id="envia_emails" style="width: 500px;" rows="5" onkeyup="valcantidad(this);"></textarea>
</form>
</body>
</html>

Suerte