php ajax multiple insert ı need - php

Question

<div class="row">
<?php
$sql=mysqli_query($conn,"select * from is_ilanlari");
while($oku=mysqli_fetch_object($sql))
{
?>
<div class="col-md-4">
<aside class="profile-nav alt">
<section class="card">
<div class="card-header user-header alt bg-dark" >
<div class="media">
<a href="#">
<img class="align-self-center rounded-circle mr-3" style="width:100px; height:100px;" alt="" src="images/korucanta.jpg">
</a>
<div class="media-body">
<h2 class="text-light display-6" style="size:10px;"><?php echo $oku->is_ilanlari_baslik; ?></h2>
<p>Görev süresi : <?php echo $oku->is_ilanlari_bekleme_suresi; ?></p>
<div class="h4 mb-0" style="float:right;"></div>
</div>
</div>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">
<a href="#"> <i class="fa fa-money"></i><b> Para kazancı </b>
<span class="badge badge-primary pull-right"> <?php echo $oku->is_ilanlari_kazanc; ?></span></a>
</li>
<li class="list-group-item">
<a href="#"> <i class="fa fa-plus-circle"></i><b> XP kazancı </b>
<span class="badge badge-danger pull-right"><?php echo $oku->is_ilanlari_bp; ?></span></a>
</li>
<li class="list-group-item">
<a href="#"> <i class="fa fa-clock-o"></i><b> Görev süresi</b>
<span class="badge badge-danger pull-right" style="background-color:#35dccd; height:28px; text-color:white;">
<p id="kutu1"><?php echo number_format($oku->is_ilanlari_bekleme_suresi); ?></p></span></a>
</li>
<li class="list-group-item">
<form method="POST" id="degerler">
<button type="button" name="buton<?php echo $oku->is_ilanlari_id; ?>" value="<?php echo $oku->is_ilanlari_id; ?>" class="btn btn-secondary btn-lg btn-block">KORUMAYA BAŞLA </button>
</form>
<script>
$(document).ready(function() {
$('button').on('click', function() {
$("button").attr("disabled", "disabled");
var is_id = $(this).val();
if(is_id!=""){
$.ajax({
url: "isbaslat.php",
type: "POST",
data: {
is_id: is_id
},
cache: false,
success: function(dataResult){
var dataResult = JSON.parse(dataResult);
if(dataResult.statusCode==1){
//$("button").removeAttr("disabled");
$('#degerler').find('input:text').val('');
$("#success").show();
$('#success').html('İş Başladı !');
console.log("b");
}
else if(dataResult.statusCode==0){
alert("Error occured !");
}
}
});
}
else{
alert('Please fill all the field !');
}
});
});
</script>
</li>
</ul>
</section>
</aside>
</div>
<?php
}
?>
</div>
this is form create php and ajax
can you see ?
<?php
session_start();
include('baglanti.php');
include('fonksiyonlar.php');
$kid=$_SESSION['kullanici_adi'];
getir_kullanici($kid);
$k_id=$getir['kid'];
$is_id=$_POST['is_id'];
$sql = "insert into kullanici_is(is_ilan_id,kullanici_id,is_baslangic_tarih,is_durum)
values ('$is_id','$k_id','".date("Y-m-d H:i:s")."',1)";
if (mysqli_query($conn, $sql)) {
echo json_encode(array("statusCode"=>1));
}
else {
echo json_encode(array("statusCode"=>0));
}
mysqli_close($conn);
?>
this is insert php you can see
http://prntscr.com/rhrmp5
ı want to insert a line.But this buttons all of them click and inserted 8 line in database.
How ı can insert just clicked value.
ı tryed all things pls help me
ı try again but no ı can t do it pls help me ı need more help . ı am waiting for

Answer 1

issue: code inside loop
Solution: move js code outside loop to avoid multiple instances,
use a class for all buttons
$('.btn_class').on('click', function() {
// now only the specific btn is clicked
$(this).val(); // will be of the clicked btn
...
}
add btn class
<form method="POST" id="degerler">
<button type="button" name="buton<?php echo $oku->is_ilanlari_id; ?>" value="<?php echo $oku->is_ilanlari_id; ?>" class="btn btn-secondary btn-lg btn-block btn_class">KORUMAYA BAŞLA </button>
</form>
fixed :
<div class="row">
<?php
$sql=mysqli_query($conn,"select * from is_ilanlari");
while($oku=mysqli_fetch_object($sql))
{
?>
<div class="col-md-4">
<aside class="profile-nav alt">
<section class="card">
<div class="card-header user-header alt bg-dark" >
<div class="media">
<a href="#">
<img class="align-self-center rounded-circle mr-3" style="width:100px; height:100px;" alt="" src="images/korucanta.jpg">
</a>
<div class="media-body">
<h2 class="text-light display-6" style="size:10px;"><?php echo $oku->is_ilanlari_baslik; ?></h2>
<p>Görev süresi : <?php echo $oku->is_ilanlari_bekleme_suresi; ?></p>
<div class="h4 mb-0" style="float:right;"></div>
</div>
</div>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">
<a href="#"> <i class="fa fa-money"></i><b> Para kazancı </b>
<span class="badge badge-primary pull-right"> <?php echo $oku->is_ilanlari_kazanc; ?></span></a>
</li>
<li class="list-group-item">
<a href="#"> <i class="fa fa-plus-circle"></i><b> XP kazancı </b>
<span class="badge badge-danger pull-right"><?php echo $oku->is_ilanlari_bp; ?></span></a>
</li>
<li class="list-group-item">
<a href="#"> <i class="fa fa-clock-o"></i><b> Görev süresi</b>
<span class="badge badge-danger pull-right" style="background-color:#35dccd; height:28px; text-color:white;">
<p id="kutu1"><?php echo number_format($oku->is_ilanlari_bekleme_suresi); ?></p></span></a>
</li>
<li class="list-group-item">
<form method="POST" id="degerler">
<button type="button" name="buton<?php echo $oku->is_ilanlari_id; ?>" value="<?php echo $oku->is_ilanlari_id; ?>" class="btn btn-secondary btn-lg btn-block">KORUMAYA BAŞLA </button>
</form>
</li>
</ul>
</section>
</aside>
</div>
<?php
}
?>
</div>
// move script outside the loop
<script>
$(document).ready(function() {
$('button').on('click', function() {
$("button").attr("disabled", "disabled");
var is_id = $(this).val();
if(is_id!=""){
$.ajax({
url: "isbaslat.php",
type: "POST",
data: {
is_id: is_id
},
cache: false,
success: function(dataResult){
var dataResult = JSON.parse(dataResult);
if(dataResult.statusCode==1){
//$("button").removeAttr("disabled");
$('#degerler').find('input:text').val('');
$("#success").show();
$('#success').html('İş Başladı !');
console.log("b");
}
else if(dataResult.statusCode==0){
alert("Error occured !");
}
}
});
}
else{
alert('Please fill all the field !');
}
});
});
</script>