1

He creado un enlace que funcione como un botón, que cuando se le haga click, aparezca un formulario un con na área de texto listo para redactar un mensaje.

Las imágenes están maquetadas dentro de un while de PHP que por tal rezón debería de funcional en todos los enlaces de "Responder mensaje"

introducir la descripción de la imagen aquí

Una vez dado click al enlace: introducir la descripción de la imagen aquí

El problema resulta que cuando le doy click al primer enlace de la, todo funcionan bien. Pero cuando hago en clikc a cualquiera de los enlaces de abajo, no me aparece el formulario y no entiendo cual es la razón.

Código JavaScript:

// Selecionamos
var linkSent = document.querySelector("a[class='black-text']");
var createMessage = document.querySelector("form[class='col s12 hide']");
var message = document.querySelector("textarea[name='chat']");
var cansel = document.querySelector("a[role='button']");

// Si oprime el enlace, mustra el formulario
linkSent.addEventListener('click', () => {
    linkSent.className = "hide";
    createMessage.className = 'show';
    message.focus();
});

// Si oprime el boton canselar, oculta el formulario
cansel.addEventListener('click', () => {
    linkSent.className = "show";
    createMessage.className = "hide";
});

Este es el formulario de HTML5:

<!-- form nuevo mensaje -->
                            <form action="#" method="POST" class="col s12 hide">
                                <div class="row">
                                    <div class="input-field col s12">
                                    <textarea name="chat" class="materialize-textarea" required></textarea>
                                    <label>Escribe tu mensaje:</label>

                                    <input type="hidden" name="email" value="<?=$email_user?>">
                                    <input type="hidden" name="user" value="<?=$id?>">
                                    <input type="hidden" name="title" value="<?=$title?>">
                                    <input type="hidden" name="post" value="<?=$id_product?>">
                                    </div>

                                    <!-- Cancelar -->
                                    <a href="#" role="button" class="btn waves-effect grey left" type="submit">
                                        Cancelar
                                        <i class="material-icons left">cancel</i>
                                    </a>

                                    <!-- Submit -->
                                    <button class="btn waves-effect blue right" type="submit" name="sendChat">
                                        Enviar
                                        <i class="material-icons left">send</i>
                                    </button>
                                </div>
                            </form>
                            <!-- End nuevo mensaje -->

Vuelvo a mencionar que el formulario esta dentro de un while de PHP y en la sentencia sql los mensajes están ordenados DESC.

Acá le dejo el código completo del while:

<!-- Comienzo del bucle -->
                <?php
                
                    $stmt = $conexion->query("SELECT *, users.id_usuario, users.name, users.surname, users.email FROM message_chat INNER JOIN users ON users.email = email_user WHERE id_user_chat = $id ORDER BY id_chat DESC LIMIT $home, $postPage");
                    $stmt->execute();
                    while ($row = $stmt->fetch()) {
                        // Mis mensajes enviados
                        $name = $row['name'];
                        $surname = $row['surname'];
                        $myMessages = $row['message_chat'];
                        $title = $row['title_product'];
                        $email_user = $row['email'];
                        $id_product = $row['id_product_chat'];
                        $id_user = $row['id_usuario'];
                        $fecha = $row['create_at_chat'];
                ?>

                    <div class="col s10">

                        <p>
                        
                            <!-- Si tiene foto de perfil -->
                            <?php if($foto == true) : ?>
                                <img src="photo-perfil/<?=$foto?>" alt="Mi foto de perfil" class="col s2 m2 xl2 circle">
                            <?php else : ?>
                                <!-- Si es hombre-->
                            <?php if($sexo == 'masculino') : ?>
                                <img src="images/profile-masculino.png" alt="Mi foto de perfil" class="col s2 m2 xl2 circle">
                                <!-- Si es mujer -->
                            <?php else : ?>
                                <img src="images/profile-femenina.png" alt="Mi foto de perfil" class="col s2 m2 xl2 circle">
                            <?php endif ?>
                            <?php endif ?>

                            <strong>Enviado a: <span class="blue-text"><a href="profile?id=<?=$id_user?>&name=<?=$name.$surname?>"><?=$name.' '.$surname?></a></span></strong> &#8226; <a href="detail?id=<?=$id_product?>&title=<?=$title?>"><?=substr($title, 0, 40).'...'?></a><br>
                            <i><?=form_fecha($fecha);?></i>
                            <p class="grey-text col s10"><?=$myMessages?></p>

                            <p class="right">
                                <a href="#" class="black-text">Enviar otro mensaje</a>
                            </p><br>

                            <!-- form nuevo mensaje -->
                            <form action="#" method="POST" class="col s12 hide">
                                <div class="row">
                                    <div class="input-field col s12">
                                    <textarea name="chat" class="materialize-textarea" required></textarea>
                                    <label>Escribe tu mensaje:</label>

                                    <input type="hidden" name="email" value="<?=$email_user?>">
                                    <input type="hidden" name="user" value="<?=$id?>">
                                    <input type="hidden" name="title" value="<?=$title?>">
                                    <input type="hidden" name="post" value="<?=$id_product?>">
                                    </div>

                                    <!-- Cancelar -->
                                    <a href="#" role="button" class="btn waves-effect grey left" type="submit">
                                        Cancelar
                                        <i class="material-icons left">cancel</i>
                                    </a>

                                    <!-- Submit -->
                                    <button class="btn waves-effect blue right" type="submit" name="sendChat">
                                        Enviar
                                        <i class="material-icons left">send</i>
                                    </button>
                                </div>
                            </form>
                            <!-- End nuevo mensaje -->

                            <div class="col s12 divider"></div>
                        </p><br>

                    </div>

                    <?php } ?><!-- Fin del bucle -->

1 respuesta 1

1

Te funciona solo con el primero porque document.querySelector() te devuelve solo un elemento y debes usar document.querySelectorAll() para obtener todos los enlaces y, después, recorrerlos para asignarles el evento click.

Lo mismo para los enlaces Cancelar y botón de envío.

Para mostrar y ocultar basta con usar classList.toggle('hide'), que simplemente agrega la clase si no la tiene, o la quita si ya la tiene.

    // Selecionamos
    var linkSent = document.querySelectorAll(".black-text");
    var cancel = document.querySelectorAll("a[role='button']");
    var submit = document.querySelectorAll("[type='submit']");

    // Crear una sola función para todos los enlaces    
    function linkClick(e) {
        // Obtener enlace en el que se hizo clic
        let link = e.target;
        // Ocultar enlace
        link.classList.toggle('hide');
        // Obtener contenedor padre para buscar otros elementos
        let container = link.closest('.col.s10');
        // Mostrar formulario
        container.querySelector('form').classList.toggle('hide');
        // Activar textarea
        container.querySelector('textarea').focus();
    }
    
    // Crear una sola función para cancelar
    function cancelClick(e) {
        // Obtener enlace en el que se hizo clic
        let link = e.target;
        // Obtener contenedor padre para buscar otros elementos
        let container = link.closest('.col.s10');
        // Ocultar formulario
        container.querySelector('form').classList.toggle('hide');
        // Mostrar enlace
        container.querySelector(".black-text").classList.toggle('hide');
    }
    
    // Crear función para enviar mensaje
    function submitClick(e) {
        // Evitar comportamiento normal de formulario
        e.preventDefault();
        // Obtener botón
        let btn = e.target;
        // Obtener formulario
        let frm = btn.closest('form');
        // Aquí debes agregar el código para enviar el formulario por AJAX
    }
    
    // Recorrer enlaces para asignar evento clic
    linkSent.forEach(link => link.addEventListener('click', linkClick));
    // Asignar evento cancel
    cancel.forEach(link => link.addEventListener('click', cancelClick));
    // Asignar evento submit
    submit.forEach(link => link.addEventListener('click', submitClick));
    
.col.s10 {
  background:#ddd;
  margin:10px;
  padding:10px;
}
.hide { display:none; }
                    <div class="col s10">
                            <p class="right">
                                <a href="#" class="black-text">Enviar otro mensaje</a>
                            </p><br>
                            <form action="#" method="POST" class="col s12 hide">
                                <div class="row">
                                    <div class="input-field col s12">
                                    <textarea name="chat" class="materialize-textarea" required></textarea>
                                    <label>Escribe tu mensaje:</label>

                                    <input type="hidden" name="email" value="Correo 1">
                                    <input type="hidden" name="user" value="Usuario 1">
                                    <input type="hidden" name="title" value="Título 1">
                                    <input type="hidden" name="post" value="Producto 1">
                                    </div>
                                    <a href="#" role="button" class="btn waves-effect grey left">Cancelar  <i class="material-icons left">cancel</i></a>
                                    <button class="btn waves-effect blue right" type="submit" name="sendChat">Enviar <i class="material-icons left">send</i></button>
                                </div>
                            </form>
                            <div class="col s12 divider"></div>
                    </div>
                    <div class="col s10">
                            <p class="right">
                                <a href="#" class="black-text">Enviar otro mensaje</a>
                            </p><br>
                            <form action="#" method="POST" class="col s12 hide">
                                <div class="row">
                                    <div class="input-field col s12">
                                    <textarea name="chat" class="materialize-textarea" required></textarea>
                                    <label>Escribe tu mensaje:</label>

                                    <input type="hidden" name="email" value="Correo 2">
                                    <input type="hidden" name="user" value="Usuario 2">
                                    <input type="hidden" name="title" value="Título 2">
                                    <input type="hidden" name="post" value="Producto 2">
                                    </div>
                                    <a href="#" role="button" class="btn waves-effect grey left">Cancelar  <i class="material-icons left">cancel</i></a>
                                    <button class="btn waves-effect blue right" type="submit" name="sendChat">Enviar <i class="material-icons left">send</i></button>
                                </div>
                            </form>
                            <div class="col s12 divider"></div>
                    </div>
                    <div class="col s10">
                            <p class="right">
                                <a href="#" class="black-text">Enviar otro mensaje</a>
                            </p><br>
                            <form action="#" method="POST" class="col s12 hide">
                                <div class="row">
                                    <div class="input-field col s12">
                                    <textarea name="chat" class="materialize-textarea" required></textarea>
                                    <label>Escribe tu mensaje:</label>

                                    <input type="hidden" name="email" value="Correo 3">
                                    <input type="hidden" name="user" value="Usuario 3">
                                    <input type="hidden" name="title" value="Título 3">
                                    <input type="hidden" name="post" value="Producto 3">
                                    </div>
                                    <a href="#" role="button" class="btn waves-effect grey left">Cancelar  <i class="material-icons left">cancel</i></a>
                                    <button class="btn waves-effect blue right" type="submit" name="sendChat">Enviar <i class="material-icons left">send</i></button>
                                </div>
                            </form>
                            <div class="col s12 divider"></div>
                    </div>

3
  • No ha funcionando, Sigue solo funcionando con el primer enlace y cuando cargo la pagina aparece como si se le hubiera dado click, y ademas no aparecen los demás enlaces en los demás mensajes Commented el 21 jul. 2020 a las 0:21
  • 1
    @BraylinIvanPayano, revisa ahora.
    – Triby
    Commented el 21 jul. 2020 a las 15:52
  • Listo, ahora si. Muchas gracias Colega, tenia 5 días con este problema. Gracias de corazón Commented el 21 jul. 2020 a las 16:05

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.