He creado un sistema de noticias en mi página web donde uso el bucle while para hacer eco de mis noticias en una página. Con noticias, creé un formulario para noticias donde lo apunto por nombre y quiero usar jquery para procesar los resultados. Cuando uso php funciona bien, pero quiero evitar volver a cargar la página con el envío del formulario y la publicación inmediata de comentarios en la página.

Mi forma se ve así:

<form action="" method="post" enctype="multipart/form-data" class="comments" id="comments">
    <textarea id="comment_area" class="comment-area" name="comment" placeholder="Dodajte svoj komentar tukaj..."></textarea>
    <input type="hidden" id="news_id" name="news_id" value="' . $row['news_id'] . '">
    <input type="hidden" id="type" name="type" value="0">
    <input type="submit" id="comment_btn" class="comment-btn" name="comments<php echo $row['news_id'] ?>" value="Objavi">
</form>'

Mi código php se ve así:

if (isset($_POST['comments' . $row['news_id'] . '']) === true && empty($_POST['comment']) === false) {

global $user_data; 

$user_id    = $user_data['user_id'];
$connect_id = $_POST['news_id'];
$type       = $_POST['type'];
$time       = date('Y-m-d H:i:s');
$comment    = $_POST['comment'];
$comment    = sanitize($comment);

mysql_query("INSERT INTO `comments` (`user_id`, `connect_id`, `type`, `time`, `comment`) VALUES ('$user_id', '$connect_id', '$type', '$time', '$comment')");
}

Si trato de hacer algo como esto:

$(".comment-btn").click(function(e) {
    e.preventDefault();

    var text = $('.comment-area').val();

    console.log(text);

    $('.comment-area').val('');
});

Se dirige solo al formulario donde están las primeras noticias y no se dirige a todos los formularios.

¿Hay alguna manera de hacer esto de manera diferente?

Gracias por ayudar.

0
Mladen Railić 14 ene. 2017 a las 17:43

3 respuestas

La mejor respuesta

Podría intentar algo como lo siguiente:

$(".comment-btn").each(function(){
    $(this).click(function(e) {
        e.preventDefault();
        var commentArea = $(this).siblings(".comment-area");
        var text = commentArea.val();
        console.log(text);
        commentArea.val('');
    });
});

El problema es que si bien este $(".comment-btn") devuelve una matriz de todos los botones en los formularios que mencionó, este $(".comment-btn").click(... adjunta un controlador de eventos de clic solo para el primer elemento de la matriz.

$(function(){ 
    $(".comment-btn").each(function(){
        $(this).click(function(e){
            e.preventDefault();
            var commentArea = $(this).siblings(".comment-area");
            var text = commentArea.val();
            console.log(text);
            commentArea.val('');
        });
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post" enctype="multipart/form-data" class="comments" id="comments">
    <textarea id="comment_area" class="comment-area" name="comment" placeholder="Dodajte svoj komentar tukaj..."></textarea>
    <input type="hidden" id="news_id" name="news_id" value="' . $row['news_id'] . '">
    <input type="hidden" id="type" name="type" value="0">
    <input type="submit" id="comment_btn" class="comment-btn" name="comments<php echo $row['news_id'] ?>" value="Objavi">
</form>'

<form action="" method="post" enctype="multipart/form-data" class="comments" id="comments">
    <textarea id="comment_area" class="comment-area" name="comment" placeholder="Dodajte svoj komentar tukaj..."></textarea>
    <input type="hidden" id="news_id" name="news_id" value="' . $row['news_id'] . '">
    <input type="hidden" id="type" name="type" value="0">
    <input type="submit" id="comment_btn" class="comment-btn" name="comments<php echo $row['news_id'] ?>" value="Objavi">
</form>'

<form action="" method="post" enctype="multipart/form-data" class="comments" id="comments">
    <textarea id="comment_area" class="comment-area" name="comment" placeholder="Dodajte svoj komentar tukaj..."></textarea>
    <input type="hidden" id="news_id" name="news_id" value="' . $row['news_id'] . '">
    <input type="hidden" id="type" name="type" value="0">
    <input type="submit" id="comment_btn" class="comment-btn" name="comments<php echo $row['news_id'] ?>" value="Objavi">
</form>'
1
Christos 14 ene. 2017 a las 14:59

Pruebe esto, aquí estamos bloqueando el envío predeterminado del formulario que creo que necesitará si no desea volver a cargar la página.

$(".comments").on("submit", function(e) {

        e.preventDefault();
        var text = $(this).find('.comment-area').val();
        console.log(text);
        $(this).find('.comment-area').val('');

    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post" enctype="multipart/form-data" class="comments" id="comments">
    <textarea id="comment_area" class="comment-area" name="comment" placeholder="Dodajte svoj komentar tukaj..."></textarea>
    <input type="hidden" id="news_id" name="news_id" value="' . $row['news_id'] . '">
    <input type="hidden" id="type" name="type" value="0">
    <input type="submit" id="comment_btn" class="comment-btn" name="comments<php echo $row['news_id'] ?>" value="Objavi">
</form>'
0
codenut 14 ene. 2017 a las 15:23

Puede usar la función jQuery on para vincular el evento "clic" a todos los botones con la clase comment-btn. Sin embargo, será importante identificar a qué comment-area desea referirse. Si eso no se hace, simplemente borrará los valores de todos los campos / áreas de texto con la clase comment-area.

$(".comment-btn").on("click", function(e) {
    e.preventDefault();

    var text = $(this).parent().find('.comment-area').val();
    console.log(text);
    $(this).parent().find('.comment-area').val('');
});

Ejemplo de trabajo con el único cambio de que el tipo de entrada para los botones se cambia de "enviar" a "botón":
https://jsfiddle.net/L87n4Ljo/

Del mismo modo, si desea enviar un formulario en particular cuando se hace clic en el botón, deberá hacerlo identificando específicamente ese formulario utilizando la función parent().

0
Dhruv Saxena 14 ene. 2017 a las 15:14