Sending multiple data in one page Jquery-CodePudding

İmage

Hello, I want to update multiple data in one page. But when I create a form for each row of textarea, only the first textarea value is updated. How do I do this with jquery? Thank you.

<script src="https://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>
<script>
    $(document).ready(function() {
        $(".form").click(function() {
            var text = $("#text").val();
            var id = $("#id").val();
            $.post("../../app/modules/content/update.php", {
                "text": text,
                "id": id
            }, function(cevap) {
                $('#status').html('Güncellendi').show();
            });
        });
    });
</script>

<div >

    <?php
    $query = $veri->selectToplu('contents_temp');
    foreach ($query as $query) { ?>

        <span >
            <div >
                <?php
                if (isset($query['video'])) {
                    echo "<video controls='' style='height: 187px;' src='" . $query['video'] . "' class='bs-card-video'></video>";
                } else {
                    echo "<img class='card-img-top' style='height: 187px;' src='" . $query['img1'] . "'>";
                }
                ?>
                <div >
                    <span deleteid="<?php echo $query['id'] ?>" style="position:absolute; right:0; top:0;" >x</span>
                    <form action="" method="POST">
                        <textarea style="height: 7rem" name="text" id="text"  col="5" rows="10"><?php echo $query['text'] ?></textarea>
                        <input type="hidden" name="id" id="id" value="<?php echo $query['id']; ?>">
                        <button type="submit"  onclick="buton();">Güncelle</button>
                        <div id="status"></div>
                    </form>
                </div>
            </div>
        </span>
    <?php } ?>

CodePudding user response：

First, remove all the id attributes from the form inputs. This is because id is not unique and won't help much in your case.

Then in your jquery, you use $(this).find() to select the submitted form's inputs instead of $('#element'). Try this

PHP/HTML Part

<div >
    <?php
    $query = $veri->selectToplu('contents_temp');
    foreach ($query as $query) { ?>
        <span >
            <div >
                <?php
                if (isset($query['video'])) {
                    echo "<video controls='' style='height: 187px;' src='" . $query['video'] . "' class='bs-card-video'></video>";
                } else {
                    echo "<img class='card-img-top' style='height: 187px;' src='" . $query['img1'] . "'>";
                }
                ?>
                <div >
                    <span deleteid="<?php echo $query['id'] ?>" style="position:absolute; right:0; top:0;" >x</span>
                    <form action="" method="POST" >
                        <textarea style="height: 7rem" name="text"  col="5" rows="10"><?php echo $query['text'] ?></textarea>
                        <input type="hidden" name="id" value="<?php echo $query['id']; ?>">
                        <button type="submit" >Güncelle</button>
                        <div ></div>
                    </form>
                </div>
            </div>
        </span>
    <?php } ?>
</div>

jQuery/JavaScript Part

$(document).ready(function() {
    $(".form").submit(function(e) {
        e.preventDefault();
        var text    = $(this).find('[name="text"]').val();
        var id      = $(this).find('[name="id"]').val();
        var $status = $(this).find('.status');

        $.post("../../app/modules/content/update.php", {
            "text": text,
            "id": id
        }, function(cevap) {
            $status.html('Güncellendi').show();
        });
    });
});