Ajax表单提交内部循环提交不止一次

Question

I have a ajax script and form inside a loop - (One per user). While the form, and submit button both have a unique id of the user. yet they are still being submitted more than once as soon as I hit the button.

Here is my script

<?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;?>

</div>

Answer 1

Try This :

<?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>