11521 sujets

JavaScript, DOM et API Web HTML5

Pour reformuler ma question, j'ai un formulaire de réponse qui se trouve dans une boucle. J'aimerais répondre à chacune de mes questions sans problème. Mes questions sont indépendantes et chaque réponse est liée à une question par clé étrangère question_id. Ci-dessous mon code :


// HTML
<form method="post" action="actionReponse.php" class="myform">
        <textarea name="message" class="message" value="<?=isset($_POST['message'])?                                 $_POST['message']:'';?>"></textarea>
  
         <input type="submit" value="Envoyer">
  
         <input type="hidden" name="question_id[<?=$row['question_id'];?>]" class="question" value="<?=isset($row['question_id'])?$row['question_id']:'';?>">
         <input type="hidden" name="user_name[<?=$_SESSION['user_name'];?>]" class="user_name" value="<?=isset($_SESSION['user_name'])?$_SESSION['user_name']:'';?>">
         <input type="hidden" name="date[<?=date('d/m/Y H:i:s');?>]" class="date" value="<?=date('d/m/Y H:i:s');?>">
</form>


//  jQuery
$(document).ready(function() {
    $('.myform').on('submit', function(e) {
        e.preventDefault();
  
        var $this = $(this);
  
        $('.message ').each(function() {
            var message  = $('.message').val();
        });
         $('.question').each(function() {
            var question_id = $('.question').val();
        });
        $('.user_name').each(function() {
            var user_name= $('.user_name').val();
        });
        $('.date').each(function() {
            var date = $('.date').val();
        });
  
        if (message === '' || question_id === '' || user_name === '' || date === '') {
             $('#status').html('<p class="error">Champ invalide</p>');
        } else {
            $.ajax({
                url: 'ActionReponse.php',
                type: 'POST',
                data: $this.serialize(),
                ContentType: 'application/x-www-form-urlencoded; charset=UTF-8',
                beforeSend: function() {
                    $this.after('<span id="load4"><img src="inc/img/loader.gif" alt="loading"> Chargement...</span>');
                },
                success: function(data){
                    $('#load4').remove();
  
                    $('.form').prepend('<div class="reponse"><p>'+message+'</p><p>Par '+user_name+', le '+date+'</p></div>').hide().slideDown();
                }
            });
        }
    });
});

J'ai l'erreur suivante qui s'affiche : ReferenceError: message is not defined à la ligne :
if (message === '' || question_id === '' || user_name === '' || date === '') {...


Merci !
Modifié par dinolam (17 Jun 2016 - 21:45)
Bé c'est normal, tu déclare ton message dans une callback
        $('.message ').each(function() {
            var message  = $('.message').val();
        });


Si tu veut message, il faut le sortir
        var message;
        $('.message ').each(function() {
           message  = $('.message').val();
        });


Edit : pareil pour les autres
Modifié par thejocker9 (18 Jun 2016 - 15:39)
Bonjour @thejocker9,

Merci d'avoir le temps de me répondre.
Je vais corriger le problème et je reviendrai s'il y a de soucis.
Mais avant j'aimerais aussi savoir ma façon de procéder dans le code js est bonne.

Merci encore

Cdlt,
Bonjour @thejocker9,

Mon code HTML m'affiche ceci :


// HTML
<form method="post" action="actionReponse.php" class="myform">
        <textarea name="message[]" class="message" value=""></textarea>
 
         <input type="submit" value="Envoyer">
 
         <input type="hidden" name="question_id[Marc]" class="question" value="Marc">
         <input type="hidden" name="user_name[4]" class="user_name" value="4">
         <input type="hidden" name="date[20/06/2016 09:21:01]" class="date" value="20/06/2016 09:21:01">
</form>


Mais je ne récupère pas de message. Je ne comprend pas le problème.

Cdlt,