Javascript code doesn't work inside a while loop

Question

I am trying to submit a form with ajax, but that form is actually in a table. I made up a table that has rows filled by while loop + a button for every row to submit when clicked, but the problem when I click the button nothing happens. Any idea why? Here is my code. Also, is it correct way to submit that form? I mean with generated JS codes for every form.

EDIT: even after changing that function to simple .click one and then alert it does nothing. looks like it doesn't get executed at all

while($row = $stmt->fetch())
{ $x++;
    echo '<tr>
    <form id="lululu-'. $x .'" method="post">
    <td>'. $x .'</td>
    <td><label>' .$row["WebName"] . '</label></td>
    <input type="hidden" name="clothes" value="'.$row["clothes"] .'"/>
    <input type="hidden" name="pieces" value="'.$row["pieces"] .'"/>
    <input type="hidden" name="userId" value="'.$row["userId"] .'"/>
    <td><img src="/img/knownitem.png" alt="Not found" /></td>
    <td><label>'.$row["gear"] .'</label></td>
    <td><label>1</label></td>
    <td><label>2</label></td>
    <td><label>3</label></td>
    <td><select name="selltype">
        <option value="1" name="1">1</option>
        <option value="0" name="0">0</option>
    </select></td>
    <td><input type="number" name="cost" min="1" style="width: 50px;" value="1"/></td>
    <td><input type="text" name="test"/></td>
    <td><input type="submit" name="submit" class="btn btn-primary btn-block" value="GetIn" /></td>
    </form></tr> 
    <script type="text/javascript">
    jQuery("#lululu-' . $x . '").submit(function (e) {
        e.preventDefault();
        $.ajax({
               type: "POST",
               url: "/duuh/test.php/",
               data: $("#lululu-'. $x .'").serialize(),
               success: function(data)
               {
    alert("success");
               }
             });
        });
    </script>
    ';
}
echo '  </table>
    </div>';

Thanks in advance.

There is really no reason to have multiple scripts, one generic one can do it. — epascarello
– epascarello, Commented Dec 13, 2017 at 0:30
I already one time only, but it runs only on the very first form created. — Crepitus
– Crepitus, Commented Dec 13, 2017 at 0:31
Is this correct? url: "/duuh/test.php/" ... seems like you have a trailing slash for the php location. Also did you look into the browsers network tab to make sure its sending and receiving something for the click? — IncredibleHat
– IncredibleHat, Commented Dec 13, 2017 at 0:49

Mohamed-Yousef · Accepted Answer · 2017-12-13 00:56:25Z

4

Just remove the javascript code part from the loop and just use the next code outside the loop

<script type="text/javascript">
    jQuery("form[id^='lululu-']").submit(function (e) {
        e.preventDefault();
        $.ajax({
             type: "POST",
             url: "/duuh/test.php/",
             data: $(this).serialize(),
             success: function(data)
               {
                  alert("success");
               }
        });
    });
</script>

form[id^='lululu-'] - select the forms which there ids starts with lululu-

$(this) - refer to this form

Personally: I prefer

1- use the js code inside $(document).ready(function(){ //code here })

2- use .on('submit' , function(){}) instead of using submit(function(){})

And as @incrediblehat said on comment Also can do it by adding a class to all forms class="lulu-form" and match on that: $(".lulu-form").submit.... Either way works

edited Dec 13, 2017 at 0:56

answered Dec 13, 2017 at 0:48

Mohamed-Yousef

24k3 gold badges21 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

IncredibleHat Over a year ago

Also can do it by adding a class to all forms class="lulu-form" and match on that: $(".lulu-form").submit.... Either way works. +2 for mentioning going with .on

Mohamed-Yousef Over a year ago

@IncredibleHat you're right :) I'll edit my answer with that

Crepitus Over a year ago

Still nothing happens after pressing on the button.

Crepitus Over a year ago

the form doesnt seem to be submitted because I even tried to skip that ajax post and it still gives nothing. not even alert

Collectives™ on Stack Overflow

Javascript code doesn't work inside a while loop

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related