在一页中发送多个数据 Jquery

Question

İmage

您好，我想在一个页面更新多个数据。但是当我为每一行文本区域创建一个表单时，只有第一个文本区域值被更新。如何使用 jquery 执行此操作？谢谢。

<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 class="row">

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

        <span class="col-md-3 mb-2">
            <div class="card">
                <?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 class="card-body text-center">
                    <span deleteid="<?php echo $query['id'] ?>" style="position:absolute; right:0; top:0;" class="btn btn-sm btn-danger delete">x</span>
                    <form action="" method="POST">
                        <textarea style="height: 7rem" name="text" id="text" class="form-control" col="5" rows="10"><?php echo $query['text'] ?></textarea>
                        <input type="hidden" name="id" id="id" value="<?php echo $query['id']; ?>">
                        <button type="submit" class="btn btn-primary btn-sm mt-1 form" onclick="buton();">Güncelle</button>
                        <div id="status"></div>
                    </form>
                </div>
            </div>
        </span>
    <?php } ?>

Answer 1

首先，从表单输入中删除所有 id 属性。这是因为 id 不是唯一的，对您的情况没有太大帮助。

然后在您的 jquery 中，您使用 $(this).find() 来 select 提交表单的输入而不是 $('#element')。试试这个

PHP/HTML部分

<div class="row">
    <?php
    $query = $veri->selectToplu('contents_temp');
    foreach ($query as $query) { ?>
        <span class="col-md-3 mb-2">
            <div class="card">
                <?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 class="card-body text-center">
                    <span deleteid="<?php echo $query['id'] ?>" style="position:absolute; right:0; top:0;" class="btn btn-sm btn-danger delete">x</span>
                    <form action="" method="POST" class="form">
                        <textarea style="height: 7rem" name="text" class="form-control" col="5" rows="10"><?php echo $query['text'] ?></textarea>
                        <input type="hidden" name="id" value="<?php echo $query['id']; ?>">
                        <button type="submit" class="btn btn-primary btn-sm mt-1">Güncelle</button>
                        <div class="status"></div>
                    </form>
                </div>
            </div>
        </span>
    <?php } ?>
</div>

jQuery/JavaScript部分

$(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();
        });
    });
});

在一页中发送多个数据 Jquery

Sending multiple data in one page Jquery

php

forms

ajax

jquery