CODEWITHSUNDEEP
javascriptphpjqueryajaxforms
Crepitus
Crepitus

Reputation: 39

Javascript code doesn't work inside a while loop

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.

Upvotes: 1

Views: 109

Answers (1)

Mohamed-Yousef
Mohamed-Yousef

Reputation: 24001

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

Upvotes: 4

Related Questions