Javascript AJAX using $(this)

Question

i have a question how to take input value of poke with $(this) method. $("#poke") is working var counter = parseInt($("#poke").val()); but i need to use $(this) because i have while loop in form JS:

$(document).ready(function () {
    $('form').on('submit', function (e) {
        e.preventDefault();
        $.ajax({
            type: "post",
            data: $(this).serialize(),
            url: "index2.php",
            success: function (data) {
                var counter = parseInt($("#poke").val());
                counter++;
                $("#poke").val(counter);
                $("#submit").text(counter);
                alert("form was submited");
            }
        });
        return false;
    });
});

HTML:

<?php
                $result = $mysqli->query("SELECT * FROM users") or die($mysqli->error);
                while ($users = $result->fetch_assoc()) {
                    ?>
                    <form class="table" name="table" id="table" method="post" enctype="multipart/form-data" autocomplete="off">
                        <div class="Table-row" id="table">
                            <div class="Table-row-item" data-header="Header1"><input class="clear" type="text" name="first_name" id="first_name" value="<?php echo $users['first_name'] ?>"></div>
                            <div class="Table-row-item" data-header="Header2"><input class="clear" type="text" name="last_name" id="last_name" value="<?php echo $users['last_name'] ?>"></div>
                            <div class="Table-row-item" data-header="Header3"><input class="clear" type="text" name="email" id="email" value="<?php echo $users['email'] ?>"></div>
                            <div class="Table-row-item" data-header="Header4"><input class="clear" type="text" name="poke" id="poke" value="<?php echo $users['poke']?>"></div>
                            <div class="Table-row-item" data-header="Header5"><input class="poke" type="submit" value="Poke" id="submit" name="submit"></div>
                            <input class="clear" type="hidden" id="hidden_<?php echo $users['id']?>" name="hidden" value="<?php echo $users['id']?>">
                        </div>
                    </form>
                                    <?php 
                                  } ?>

have something like `var $this = $(this)` out side ajax then `var counter = parseInt($this .val());` — guradio, Jun 20 '17 at 11:15
Where is the _while_ loop? Seems you are creating multiple element with same id. — Satpal, Jun 20 '17 at 11:15
What do you mean, by while loop in JS form, you mean that there are multiple forms like this? But then you would have multiple elements with same id. — Beri, Jun 20 '17 at 11:15
I have added full html with while loop Guaradio But i need to take only poke input not all form variables — Modestas Pruckus, Jun 20 '17 at 11:19

score 0 · Answer 1 · answered Jun 20 '17 at 11:17

0

You can set the context of this in the ajax query. Try it this way:

$.ajax({
... 
context:this, 
...
});

Then $(this) should be the form instead of the ajax request

answered Jun 20 '17 at 11:17

dns_nx

3,651
4
37
66

score 0 · Answer 2 · answered Jun 20 '17 at 11:20

Your question doesn't show much the logic of using loop; Yet to loop through all inputs in a form you can use like this:

$('#formId input[type="text"]').each(function(){
        // Do your magic here
});

Ref: https://stackoverflow.com/a/10322919/7735285

Update: your updated HTML shows that PHP Loop above the HTML might create a multiple elements with the same ID, which is wrong.

Javascript AJAX using $(this)

2 Answers2