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