Why is my code always submitting the same exact same id (myId) to the php script?

Question

I am trying to process internal messaging via ajax using an interval to slow down queries as they can sometimes be in the hundreds. My code, however, always submits the same form data, even tho the id is automatically incremented via a for() loop.

Here is my HTML:

<form id="form" action="index.php" method="post">
    <input type="hidden" id="users" value="2|5|7|8|20" />
    <div class="form-group">
        <label>Message:</label>
        <textarea name="message" id="msg" class="form-control" rows="5"></textarea>
    </div>
    <button type="submit" class="btn btn-info">Send Message</button>
</form>

Here is my jQuery code:

$("#form").submit(function(e){
    e.preventDefault();
    var str = $('#users').val();
    var message = $('#msg').val();
    var strArr = str.split('|');
    for(i=0; i < strArr.length; i++){
        var myId = strArr[i];
        var formdata = "action=messaging_text&id="+myId+"&message="+message+"";
        var timerId = 0,
        timerId = setInterval(function(){
            $.ajax({
                type: "POST",
                url: 'index.php',
                data: formdata,
                dataType: 'json'
            }).done(function(mydata) {
                $("#status").append("Sent Text Message to <span style=\"color:green\">"+mydata.name+"</span><br>");
                clearInterval(timerId);
            });
        }, 6000);
    }
});

Maybe [this](https://stackoverflow.com/a/7749109/863110) could help. — Mosh Feu, Nov 05 '19 at 11:14
your loop has probably finished by the time your ajax runs so the form data will probably be the last thing it has been set to — Pete, Nov 05 '19 at 11:38
check out this codepen with the console open: https://codepen.io/banzomaikaka/pen/bGGvNwX?editors=0010 — João Paulo Macedo, Nov 05 '19 at 12:12

score 0 · Answer 1 · answered Nov 05 '19 at 14:22

Check this code and fix yours according to it. Take a look at html changing also.

$("#sumb_form").click(function(e){
    e.preventDefault();
    $("#status").html('');
    var str = $('#users').val();
    var message = $('#msg').val();
    var strArr = str.split('|'); 
    var sec = 6000; //6 seconds
    
    strArr.forEach((val, ind) => {
       
       var formdata = "action=messaging_text&id="+val+"&message="+message+""; 

      setTimeout(() => {
           /*$.ajax({
                type: "POST",
                url: 'index.php',
                data: formdata,
                dataType: 'json'
            }).done(function(mydata) {
           */
           // $("#status").append("Sent Text Message to <span style=\"color:green\">"+mydata.name+"</span><br>");
              $("#status").append("Sent Text Message to <span style=\"color:green\">"+val+"</span><br>"); // this is for snippet
              console.log(formdata); // this is for snippet
           /*   
            });
          */  
      }, ind * sec)
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="status"></div>
<form id="form" action="index.php" method="post">
    <input type="hidden" id="users" value="2|5|7|8|20" />
    <div class="form-group">
        <label>Message:</label>
        <textarea name="message" id="msg" class="form-control" rows="5"></textarea>
    </div>
    <button id="sumb_form" class="btn btn-info">Send Message</button>
</form>

Why is my code always submitting the same exact same id (myId) to the php script?

1 Answers1