Javascript İçinde PHP Foreach Kullanımı
Arkadaşlar merhaba, günlerdir uğraşıyorum fakat başarılı olamadım bir türlü. Bir formum var ve ekle butonuna bastığımda yeni satır ekleyip bunları veritabanına kayıt edebiliyorum. Fakat foreach ile eklenen satırlara veri çekemiyorum. Javascript içinde nasıl kullanacağım foreach kısmını yardımcı olur musunuz.
<div class="container pt-5">
<div id="show_alert"></div>
<button id="ekle" class="btn btn-success w-100 mb-3 add_item_btn">Ekle</button>
<form action="#" method="POST" id="add_form">
<div id="show_item">
<div class="row mb-3">
<div class="col-md-3">
<select name="stok_urun" class="form-select" data-search="on" required>
<option></option>
<?php foreach ($urunsor as $cek): ?>
<option value="<?=$cek['id']?>"><?=$cek['ad']?></option>
<?php endforeach ?>
</select>
</div>
<div class="col-md-3">
<input type="text" class="form-control" name="product_name[]" placeholder="Adınız Soyadınız" required>
</div>
<div class="col-md-2">
<input type="number" class="form-control" name="product_price[]" placeholder="Fiyat" required>
</div>
<div class="col-md-2">
<input type="number" class="form-control" name="product_qty[]" placeholder="Miktar" required>
</div>
<div class="col-md-2">
<button class="btn btn-danger w-100 remove_item_btn">Sil</button>
</div>
</div>
<input type="submit" class="btn btn-success w-100 mb-3" id="add_btn" value="Kaydet">
</form>
</div>
<script src="jquery.min.js"></script>
<script>
$(document).ready(function(){
//Ekleme İşlemi//
$(".add_item_btn").click(function(e){
e.preventDefault();
$("#show_item").prepend(`<div class="row mb-3 append_item">
<div class="col-md-3">
<select name="stok_urun" class="form-select" data-search="on" required>
<option></option>
<?php foreach ($urunsor as $cek): ?>
<option value="<?=$cek['id']?>"><?=$cek['ad']?></option>
<?php endforeach ?>
</select>
</div>
<div class="col-md-3">
<input type="text" class="form-control" name="product_name[]" placeholder="Adınız Soyadınız" required>
</div>
<div class="col-md-2">
<input type="number" class="form-control" name="product_price[]" placeholder="Fiyat" required>
</div>
<div class="col-md-2">
<input type="number" class="form-control" name="product_qty[]" placeholder="Miktar" required>
</div>
<div class="col-md-2">
<button id="cikar" class="btn btn-danger w-100 remove_item_btn">Sil</button>
</div>
</div>`);
});
//Silme İşlemi//
$(document).on('click', '.remove_item_btn', function(e) {
e.preventDefault();
let row_item=$(this).parent().parent();
$(row_item).remove();
});
//Ajax Post İşlemi//
$("#add_form").submit(function(e){
e.preventDefault();
$("#add_btn").val('Ekleniyor...');
$.ajax({
url:"action.php",
method:"post",
data: $(this).serialize(),
success: function(response){
$("#add_btn").val('Ekle');
$("#add_form")[0].reset();
$(".append_item").remove();
$("#show_alert").html(`<div class="alert alert-success">${response}</div>`)
}
});
});
});
</script>
@trsherlock hocam tam olarak kodlarım bu şekilde. Herhangi bir hatada almıyorum direk boş olarak dönüyor. Sanırım js kısmında foreach kullanımım yanlış
<?php
require_once 'inc/db.php';
//Ürünler Sorgusu//
$urunsor = $db->query("SELECT * FROM urunler ORDER BY id DESC", PDO::FETCH_ASSOC);
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<title>Hello, world!</title>
</head>
<body>
<div class="container pt-5">
<div id="show_alert"></div>
<button id="ekle" class="btn btn-success w-100 mb-3 add_item_btn">Ekle</button>
<form action="#" method="POST" id="add_form">
<div id="show_item">
<div class="row mb-3">
<div class="col-md-3">
<select name="stok_urun" class="form-select" data-search="on" required>
<option></option>
<?php foreach ($urunsor as $cek): ?>
<option value="<?=$cek['id']?>"><?=$cek['ad']?></option>
<?php endforeach ?>
</select>
</div>
<div class="col-md-3">
<input type="text" class="form-control" name="product_name[]" placeholder="Adınız Soyadınız" required>
</div>
<div class="col-md-2">
<input type="number" class="form-control" name="product_price[]" placeholder="Fiyat" required>
</div>
<div class="col-md-2">
<input type="number" class="form-control" name="product_qty[]" placeholder="Miktar" required>
</div>
<div class="col-md-2">
<button class="btn btn-danger w-100 remove_item_btn">Sil</button>
</div>
</div>
<input type="submit" class="btn btn-success w-100 mb-3" id="add_btn" value="Kaydet">
</form>
</div>
<script src="jquery.min.js"></script>
<script>
$(document).ready(function(){
//Ekleme İşlemi//
$(".add_item_btn").click(function(e){
e.preventDefault();
$("#show_item").prepend(`<div class="row mb-3 append_item">
<div class="col-md-3">
<select name="stok_urun" class="form-select" data-search="on" required>
<option></option>
<?php foreach ($urunsor as $cek): ?>
<option value="<?=$cek['id']?>"><?=$cek['ad']?></option>
<?php endforeach ?>
</select>
</div>
<div class="col-md-3">
<input type="text" class="form-control" name="product_name[]" placeholder="Adınız Soyadınız" required>
</div>
<div class="col-md-2">
<input type="number" class="form-control" name="product_price[]" placeholder="Fiyat" required>
</div>
<div class="col-md-2">
<input type="number" class="form-control" name="product_qty[]" placeholder="Miktar" required>
</div>
<div class="col-md-2">
<button id="cikar" class="btn btn-danger w-100 remove_item_btn">Sil</button>
</div>
</div>`);
});
//Silme İşlemi//
$(document).on('click', '.remove_item_btn', function(e) {
e.preventDefault();
let row_item=$(this).parent().parent();
$(row_item).remove();
});
//Ajax Post İşlemi//
$("#add_form").submit(function(e){
e.preventDefault();
$("#add_btn").val('Ekleniyor...');
$.ajax({
url:"action.php",
method:"post",
data: $(this).serialize(),
success: function(response){
$("#add_btn").val('Ekle');
$("#add_form")[0].reset();
$(".append_item").remove();
$("#show_alert").html(`<div class="alert alert-success">${response}</div>`)
}
});
});
});
</script>
</body>
</html>