Forum : Bug après ajout d'un form

Bonjour,

j'ai créé un script de commentaire qui ressemble à celui de Google+ avec bootstrap, cependant lors de l'ajout d'une balise form utilise pour transmettre les données en php mes boutons qui sont inclus ne réagissent plus :-/

J'avais déjà créé une maquette html sans la balise form et tout marchait correctement. je vous explique avant de glisser les images et scripts. Mon bouton poster perd sa classe 'disabled' lorsque la chaîne de caractère est supérieur à 1. Mais cela ne fonctionne plus...

De plus mon bouton Annuler doit effacer le textarea et le input pseudo et replier le form, mais mon form ne se replie pas :(

J'indique que je débute en js et jQuery et qu'il se peut que je me sois trompé dans mes sélecteurs. Pouvez vous m'aider ?

comment.php :

<?php
        // Cette page contient le système de commentaire du site Web
       // Inclusion de connect.php et variable de Session + système de notifs
?>
<!DOCTYPE html>
    <head>
        <link rel="icon" type="image/png" href="bootstrap/css/elements/favicon.ico" />
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" type="text/css" href="bootstrap/css/comment.css">
        <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
        <title>LesGaleriesWishima</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script type="text/javascript" src="bootstrap/js/comment.js"></script>
        <script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
    </head>
    <body>
        <div class="container">
            <div class="row">
        <div class="col-xs-12 col-sm-offset-1 col-sm-5">
            <div class="panel panel-default panel-google-plus">
                <div class="dropdown">
                    <span class="dropdown-toggle" type="button" data-toggle="dropdown">
                        <span class="glyphicon glyphicon-chevron-down"></span>
                    </span>
                    <ul class="dropdown-menu" role="menu">
                        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
                        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
                        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
                        <li role="presentation" class="divider"></li>
                        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
                    </ul>
                </div>
                <div class="panel-google-plus-tags">
                    <ul>
                        <li>#Wishima</li>
                        <li>#Photographe</li>
                    </ul>
                </div>
                <div class="panel-heading">
                    <h3>Wishima</h3>
                    <h5><span>Partagé publiquement</span> - <span>Juil 27, 2014</span> </h5>
                </div>
                <div class="panel-body">
                    <p>Vous pouvez commentez ici les photos : </p>
                </div>
                <div class="panel-footer">
                    <div class="input-placeholder">Ajouter un commentaire...</div>
                </div>
                <div class="panel-google-plus-comment">
                    <form method="post" action="addcomment.php">
                    <div class="panel-google-plus-textarea">
                        <input class="form-control" name="pseudo" placeholder="pseudo">
                        <textarea rows="4" id="text" class="form-control" name"message" placeholder="Taper votre commentaire..."></textarea>
                        <button type="submit" class="btn btn-success disabled">Poster</button>
                        <button type="reset" class="btn btn-defaul">Annuler</button>
                        <h6 class="pull-right" id="count_message"></h6>
                    </div>
                    </form>
                    <div class="clearfix"></div>
                </div>
            </div>
        </div>
    </div>
    </div>
    <script type="text/javascript">
    var text_max = 200;
    $('#count_message').html(text_max + ' caractères restants');
    $('#text').keyup(function() {
        var text_length = $('#text').val().length;
        var text_remaining = text_max - text_length;

  $('#count_message').html(text_remaining + ' caractères restants');
    });
    </script>
    </body>
</html>

comment.js :

$(function () {
$('.panel-google-plus > .panel-footer > .input-placeholder, .panel-google-plus > .panel-google-plus-comment > .panel-google-plus-textarea > button[type="reset"]').on('click', function(event) {
var $panel = $(this).closest('.panel-google-plus');
$comment = $panel.find('.panel-google-plus-comment');

$comment.find('.btn:first-child').addClass('disabled');
$comment.find('textarea').val('');

$panel.toggleClass('panel-google-plus-show-comment');

if ($panel.hasClass('panel-google-plus-show-comment')) {
$comment.find('textarea').focus();
}
});
$('.panel-google-plus-comment > .panel-google-plus-textarea > textarea').on('keyup', function(event) {
var $comment = $(this).closest('.panel-google-plus-comment');

$comment.find('button[type="submit"]').addClass('disabled');
if ($(this).val().length >= 1) {
$comment.find('button[type="submit"]').removeClass('disabled');
}
});

});

Bug après ajout d'un form

1 réponse