Hola, quiero actualizar varios datos en una página. Pero cuando creo un formulario para cada fila de área de texto, solo se actualiza el primer valor de área de texto. ¿Cómo hago esto con jquery? Gracias.
<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 } ?>Primero, elimine todos los atributos de id de las entradas del formulario. Esto se debe a que la id no es única y no ayudará mucho en su caso.
Luego, en su jquery, usa $(this).find() para seleccionar las entradas del formulario enviado en lugar de $('#element') . Prueba esto
Parte 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>Parte 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(); }); }); });