[SOLUCIONADO] agregar y eliminar texto a a un textarea

webtexcoco · #1 (**permalink**) 17/10/2016, 14:05

hola muy buenas!

ojalá puedan orientarme un poco porque mis conocimientos en javascript son muy básicos

tengo un form con unos checkbox con una descripcion cada uno, cuando habilito un checkbox la descripción se agrega a un textarea, lo que quiero hacer es que cuando deshabilite el checkbox me borre la descripcion que se agrego, pero no consigo hacerlo

lo que he intentado es esto

Código Javascript:

Ver originalfunction addDescripcion(descripcion,cbox){
            var desc = document.getElementById("descGralSolicitud");
            desc.value += descripcion + " - ";
 
            var box = document.getElementById(cbox);
            if(box.checked){
                descripcion.value += descripcion + " - ";
            }else{
                descripcion.value = "";
            }
        }

mi html

Código HTML:

Ver original<form action="">
        <input type="checkbox" name="idchk1" id="idchk1" onclick="addDescripcion('desc1','idchk1')"> <span id="desc1">Descripción 1</span> <input type="text" name="importe"><br>
        <input type="checkbox" name="idchk2" id="idchk2" onclick="addDescripcion('desc2','idchk2')"> <span id="desc2">Descripción 2</span> <input type="text" name="importe"><br>
        <input type="checkbox" name="idchk3" id="idchk3" onclick="addDescripcion('desc3','idchk3')"> <span id="desc3">Descripción 3</span> <input type="text" name="importe"><br>
        <input type="checkbox" name="idchk4" id="idchk4" onclick="addDescripcion('desc4','idchk4')"> <span id="desc4">Descripción 4</span> <input type="text" name="importe"><br>
        <textarea name="nombre" id="descGralSolicitud" cols="30" rows="10"></textarea><br>
        <input type="submit" value="Enviar">
    </form>

ojala puedan orientarme un poco, y muchas gracias por su apoyo

AngelKrak · #2 (**permalink**) 17/10/2016, 21:27

Podrias investigar sobre jquery y con prop() puede hacer que si esta marcado agregue el texto y cuando no, lo borre

mpozo · #3 (**permalink**) 18/10/2016, 07:17

Yo usaría un bloque con el atributo contenEditable para ir insertando y eliminando las descripciones. Y al mismo tiempo iría transvasando el contenido del bloque al textarea. Para poder eliminar una descripción, la envolvería en un elemento span con un class/id para poder identificarlo de las demás descripciones

Código Javascript:

Ver original<!DOCTYPE html>
<html dir="ltr" lang="es-es">
    <head>
        <title></title>
        <meta charset="utf-8">
        <style>
        div {
            width: 14rem;
            height: 9rem;
            position: absolute;
            top: 6rem;
            overflow: hidden;
            z-index: -1;
        }
        </style>
        <script>
        function addDescripcion(cbox){
            var desc = document.getElementById("descGralSolicitud")
                desc2 = document.getElementById("descGralSolicitud2");;
 
            if(cbox.checked){
                desc2.insertAdjacentHTML('beforeend', '<span class="' + cbox.id + '">' + cbox.nextElementSibling.textContent + '</span>')
            }else{
                desc2.removeChild(document.querySelector('.'+cbox.id));
            }
 
            desc.textContent = desc2.textContent;
        }
        </script>
    </head>
    <body>
    <form action="">
        <input type="checkbox" name="idchk1" id="idchk1" onclick="addDescripcion(this)"> <span id="desc1">Descripción 1</span> <input type="text" name="importe"><br>
        <input type="checkbox" name="idchk2" id="idchk2" onclick="addDescripcion(this)"> <span id="desc2">Descripción 2</span> <input type="text" name="importe"><br>
        <input type="checkbox" name="idchk3" id="idchk3" onclick="addDescripcion(this)"> <span id="desc3">Descripción 3</span> <input type="text" name="importe"><br>
        <input type="checkbox" name="idchk4" id="idchk4" onclick="addDescripcion(this)"> <span id="desc4">Descripción 4</span> <input type="text" name="importe"><br>
        <textarea name="nombre" id="descGralSolicitud" cols="30" rows="10"></textarea><br>
        <div id="descGralSolicitud2" contentEditable="true"></div>
        <input type="submit" value="Enviar">
    </form>
    </body>
</html>

webtexcoco · #4 (**permalink**) 18/10/2016, 14:52

Cita:

Iniciado por mpozo

Yo usaría un bloque con el atributo contenEditable para ir insertando y eliminando las descripciones. Y al mismo tiempo iría transvasando el contenido del bloque al textarea. Para poder eliminar una descripción, la envolvería en un elemento span con un class/id para poder identificarlo de las demás descripciones

Código Javascript:

Ver original<!DOCTYPE html>
<html dir="ltr" lang="es-es">
    <head>
        <title></title>
        <meta charset="utf-8">
        <style>
        div {
            width: 14rem;
            height: 9rem;
            position: absolute;
            top: 6rem;
            overflow: hidden;
            z-index: -1;
        }
        </style>
        <script>
        function addDescripcion(cbox){
            var desc = document.getElementById("descGralSolicitud")
                desc2 = document.getElementById("descGralSolicitud2");;
 
            if(cbox.checked){
                desc2.insertAdjacentHTML('beforeend', '<span class="' + cbox.id + '">' + cbox.nextElementSibling.textContent + '</span>')
            }else{
                desc2.removeChild(document.querySelector('.'+cbox.id));
            }
 
            desc.textContent = desc2.textContent;
        }
        </script>
    </head>
    <body>
    <form action="">
        <input type="checkbox" name="idchk1" id="idchk1" onclick="addDescripcion(this)"> <span id="desc1">Descripción 1</span> <input type="text" name="importe"><br>
        <input type="checkbox" name="idchk2" id="idchk2" onclick="addDescripcion(this)"> <span id="desc2">Descripción 2</span> <input type="text" name="importe"><br>
        <input type="checkbox" name="idchk3" id="idchk3" onclick="addDescripcion(this)"> <span id="desc3">Descripción 3</span> <input type="text" name="importe"><br>
        <input type="checkbox" name="idchk4" id="idchk4" onclick="addDescripcion(this)"> <span id="desc4">Descripción 4</span> <input type="text" name="importe"><br>
        <textarea name="nombre" id="descGralSolicitud" cols="30" rows="10"></textarea><br>
        <div id="descGralSolicitud2" contentEditable="true"></div>
        <input type="submit" value="Enviar">
    </form>
    </body>
</html>

gracias amigo tu ejemplo me funciono de maravilla, seguro que a mas de uno le servirá tu aporte, gracias de nuevo maestro.

mpozo · #5 (**permalink**) 20/10/2016, 07:19

Como no puedo editar mis mensajes, escribo este otro para puntualizar que no viene al caso que el bloque tenga que ser editable. No se pretende realizar un editor de texto enriquecido. Aunque para ese caso, habría que hacer algunos cambios más