Ajaxフォームはループ内でループを2回以上送信します

Question

ループ内にajaxスクリプトとフォームがあります（ユーザーあたり1つ）。 フォームと送信ボタンの両方にユーザーの一意のIDがあります。まだ私はボタンを押すとすぐに複数回提出されています。ここで

は私のスクリプトです

<?php $results = $con->query("SELECT * FROM tbl_users"); ?> 
 
      <?php while($result = $results->fetch_object()): ?> 
 
      <div class="chat" data-chat="person<?=$result->user_id?>"> 
 
       <div class="conversation-start"> 
 
       </div> 
 

 
       <?php 
 
       $sender = $result->user_id; 
 
       $messageload = $con->query("SELECT * FROM messages WHERE sender = $sender"); ?> 
 

 
       <?php while($message = $messageload->fetch_object()): ?> 
 
        <div class="bubble you"> 
 
         Hello, 
 
        </div> 
 
        <div class="bubble me"> 
 
         Are you serious? 
 
        </div> 
 
       <?php endwhile;?> 
 
      </div> 
 

 
      <div class="write"> 
 
      <form autocomplete="off" id="SendForm<?=$result->user_id?>" class="SendMsg" role="form" method="post"> 
 
       <input type="text" id="message" name="message" /> 
 
       <input id="sender" name="sender" value="<?= $_SESSION['user']['user_id']?>" style="display:none;"/> 
 
       <input id="recipient" name="recipient" value="<?=$result->user_id?>" style="display:none;"/> 
 
        <input style="" id="submit" class="submit MsgInputHidden" type="submit" name="submit" value="Submit" /> 
 

 
       </form> 
 
      </div> 
 
        <script> 
 
    $(function() { 
 
    $(document).on('submit', 'form#SendForm<?=$result->user_id?>', function(e){ 
 
    e.preventDefault(); 
 
      $.post('message_send.php', $(this).serialize(), function (data) { 
 
       // This is executed when the call to mail.php was succesful. 
 
       // 'data' contains the response from the request 
 
       $('#message').val(''); 
 
      }) 
 
      .error(function() { 
 
       $('#message').val('');   
 
       }); 
 
      e.preventDefault(); 
 
         $('#message').val(''); 
 
    }) 
 

 
    }); 
 
</script> 
 
      <?php endwhile;?>

Answer 1

これ試してみてください：あなたは、あなたのサーバー上で `while`ループ内のスクリプトタグをつけ

<?php $results = $con->query("SELECT * FROM tbl_users"); ?> 
<?php while ($result = $results->fetch_object()): ?> 
    <div class="chat" data-chat="person<?= $result->user_id ?>"> 
     <div class="conversation-start"> 
     </div> 

     <?php 
     $sender = $result->user_id; 
     $messageload = $con->query("SELECT * FROM messages WHERE sender = $sender"); 
     ?> 

     <?php while ($message = $messageload->fetch_object()): ?> 
      <div class="bubble you"> 
       Hello, 
      </div> 
      <div class="bubble me"> 
       Are you serious? 
      </div> 
     <?php endwhile; ?> 
    </div> 

    <div class="write"> 
     <form autocomplete="off" id="SendForm<?= $result->user_id ?>" class="SendMsg" role="form" method="post" onsubmit="return add_message(this);"> 
      <input type="text" id="message" name="message" /> 
      <input id="sender" name="sender" value="<?= $_SESSION['user']['user_id'] ?>" style="display:none;"/> 
      <input id="recipient" name="recipient" value="<?= $result->user_id ?>" style="display:none;"/> 
      <input style="" id="submit" class="submit MsgInputHidden" type="submit" name="submit" value="Submit" /> 

     </form> 
    </div> 
<?php endwhile; ?> 
<script> 

    function add_message(form){ 
     $.post('message_send.php', $(form).serialize(), function (data) { 
// This is executed when the call to mail.php was succesful. 
// 'data' contains the response from the request 
       $('#message').val(''); 
      }).error(function() { 
       $('#message').val(''); 
      }); 
      $('#message').val(''); 
      return false; 
    } 


</script>