PHP Select Option Value Eklemek - Veritabanına Kayıt

Merhabalar,

PHP / HTML / JS kullanarak bir sistem yazıyorum. Bir yerde takıldım.

Tedarikçi seçtiğimiz select var. Burda optionları veritabanından çektiriyorum. Ancak müşterim istiyor ki burda hızlı bir şekilde "+" tuşuna basarak sadece isim yazarak yeni tedarikçi eklemek istiyor.

Sizce bunu nasıl yapmalıyım ?

İşinize yarayabilir hocam...

1. Adım: HTML Yapısı ve JavaScript
Öncelikle, mevcut tedarikçileri görüntülemek için bir select öğesi ve yeni tedarikçi eklemek için bir "+" butonu ekleyin. Bu buton, yeni bir tedarikçi eklemek için bir modal pencere açacaktır.

<!-- Tedarikçi Seçim Select Box -->
<select id="supplier-select">
<?php
// Veritabanından tedarikçileri çekin ve seçenekleri oluşturun
$sql = "SELECT id, isim FROM tedarikciler";
$result = $db->query($sql);

while ($row = $result->fetch_assoc()) {
echo "<option value='" . $row['id'] . "'>" . $row['isim'] . "</option>";
}
?>
</select>

<!-- Yeni Tedarikçi Ekle Butonu -->
<button id="add-supplier-btn">+</button>

<!-- Yeni Tedarikçi Ekle Modal -->
<div id="add-supplier-modal" style="display:none;">
<input type="text" id="new-supplier-name" placeholder="Yeni Tedarikçi Adı">
<button id="save-supplier-btn">Kaydet</button>
</div>

2. Adım: JavaScript ile Modal İşlemleri
Bir modal veya popup penceresi kullanarak kullanıcıdan yeni tedarikçi adını alabilirsiniz.

document.getElementById('add-supplier-btn').addEventListener('click', function() {
// Modal'ı göster
document.getElementById('add-supplier-modal').style.display = 'block';
});

document.getElementById('save-supplier-btn').addEventListener('click', function() {
const supplierName = document.getElementById('new-supplier-name').value;

// Yeni tedarikçi adını sunucuya gönder
fetch('add_supplier.php', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ name: supplierName })
})
.then(response => response.json())
.then(data => {
if (data.success) {
// Başarılıysa, yeni tedarikçiyi select box'a ekle
const select = document.getElementById('supplier-select');
const newOption = document.createElement('option');
newOption.value = data.id; // Yeni tedarikçinin ID'si
newOption.text = supplierName;
select.add(newOption);

// Modal'ı kapat
document.getElementById('add-supplier-modal').style.display = 'none';
} else {
alert('Yeni tedarikçi eklenirken bir hata oluştu.');
}
});
});

3. Adım: PHP Tarafında Yeni Tedarikçi Ekleme
add_supplier.php dosyasında, yeni tedarikçiyi veritabanına ekleyen ve sonucu JSON formatında döndüren bir PHP betiği oluşturun.

<?php
include 'config.php';

$data = json_decode(file_get_contents('php://input'), true);
$supplierName = $data['name'];

// Yeni tedarikçiyi ekle
$sql = "INSERT INTO tedarikciler (isim) VALUES (?)";
$stmt = $db->prepare($sql);
$stmt->bind_param("s", $supplierName);

if ($stmt->execute()) {
echo json_encode(['success' => true, 'id' => $db->insert_id]);
} else {
echo json_encode(['success' => false]);
}
?>

https://github.com/selectize/selectize.js/tree/master

https://github.com/selectize/selecti...scussions/1962

gpt bırakın gpt de kalsın yorum olarak atmayı bırakın artık ya

Dinamik input alanı yapmanız lazım örneğin a tuşuna a ile başlayanlar çıkıcak ordan seçiçek eğer seçmek yerine direkt + tuşuna basınca input alanını post edicek zor bir şey yok biraz css biraz js

Select2 kullanarak, kütüphanenin fonksiyonları ile bu isteğinizi yapabilirsiniz. Örnek olarak linki aşağıya bıraktım. createTag yada insertTag fonksiyonları ile veriyi yakalayıp ajax isteği atarsınız. İstek attığınız yerde de veri tabanına ekleme yaparsınız. Ben select2 üzerinden örnek verdim fakat ona benzer farklı kütüphanelerde kullanabilirsiniz.
https://select2.org/tagging