BUTTON VALUE ÇEKME | Cevap #9616

Çok ucu açık bir soru sormuşsunuz. Tamamen varsayımlar üzere bir örnek yazıyorum.
Sayfa ilk açıldığında kutular görünecek.
Kullanıcı herhangi bir kutuya tıkladığı anda localhostunuzda bulunan test adlı veritabanındaki secilmisler adlı tablonuza seçilen fiyat eklenecek.

Şöyle bir komutla mysql'inizdeki test adlı veritabanınızda bir tablo oluşturmuşsunuz varsayalım:

CREATE TABLE secilmisler (
    id int NOT NULL AUTO_INCREMENT,
    secilen varchar(10) NOT NULL,
    eklenme_tarihi TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
    PRIMARY KEY (id)
);

Şöyle bir index.html dosyanız var diyelim:

<html>
    <head>
        <title>Deneme</title>
        <link rel="stylesheet" href="style.css" />
    </head>
    <body>
        <div id="buttonsWrapper">
            <button>30 TL</button>
            <button>35 TL</button>
            <button>40 TL</button>
            <button>50 TL</button>
            <button>60 TL</button>
            <button>75 TL</button>
            <button>100 TL</button>
            <button>200 TL</button>
            <button>300 TL</button>
        </div>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <script src="script.js"></script>
    </body>
</html>

Şöyle de styles.css dosyanız varmış mesela:

* { margin:0; padding:0; box-sizing:border-box; outline:none; }
#buttonsWrapper { display:flex; flex-direction:row; align-items:center; justify-content:flex-start; flex-wrap: wrap; padding:10px; position:relative; }
#buttonsWrapper.waitForResponse::before { position:absolute; top:0; left:0; right:0; bottom:0; display:flex; align-items:center; justify-content:center; z-index:2; opacity:0.5; background:#fff; }
#buttonsWrapper > button { font-size:25px; line-height:1; border:1px solid #ccc; border-radius:10px; padding:20px; margin:10px; color:#222; transition:background ease .3s, color ease .3s; }
#buttonsWrapper > button.active { background-color:#03c; color:#fff; }

Bir de script.js dosyanız varmış varsayalım:

var $buttonsWrapper = $("#buttonsWrapper");
var $buttons = $buttonsWrapper.find("> button");
$buttons.on("click",function(){
    $(this).addClass("active").siblings().removeClass("active");
    var selectedPrice = $(this).text();
    $buttonsWrapper.addClass("waitForResponse");
    $.ajax({
        url:"add-to-database.php",
        type:"post",
        data: { price: selectedPrice },
        success: function(response) {
            if(response.type==="error") alert("HATA!\n"+response.message);
            else if(response.type==="success") alert("BAŞARILI!\n"+response.message);
            else alert("Bir gariplik var...");
            $buttons.removeClass("active");
            $buttonsWrapper.removeClass("waitForResponse");
        },
        error: function(err) {
            alert("ajax fonksiyonu çalışmadı!");
            console.log(err);
            $buttonsWrapper.removeClass("waitForResponse");
        }
    });
});

Seçilen fiyatı veritabanına yazacak add-to-database.php adlı bir dosyanız da varmış:

<?php
function sendJson($type, $message='') {
    header('Content-Type: application/json; charset=utf-8');
    echo json_encode(['type'=>$type, 'message'=>$message]);
    exit();
}
function sendSuccess($message='') { sendJson('success', $message); }
function sendError($message='') { sendJson('error', $message); }

// Birkaç inceleme yapıp gelen fiyatın düzgün olup olmadığını görelim
if(!isset($_POST['price'])) sendError('Fiyat gönderilmedi!');

$priceString = trim($_POST['price']);

if($priceString==='') sendError('Fiyat boş gönderildi!');

$splittedPriceString = explode(' ', $priceString);

if(count($splittedPriceString)!==2) sendError('Fiyat, miktar ve para birimi şeklinde gönderilmedi! Örnek format şu şekilde olmalıydı: "50 TL"');

$price = trim($splittedPriceString[0]);
if(!is_numeric($price)) sendError('Fiyat sayısal değer değil!');

$currency = trim($splittedPriceString[1]);
$currency = preg_replace('/[^a-zA-Z]+/', '', $currency);
if($currency==='') sendError('Para birimi değeri eksik veya hatalı!');
$currency = strtoupper($currency);

$priceString = "$price $currency";

// Veritabanına bağlanıp ekleme işlemini gerçekleştirelim
$db = null;
try { $db = new PDO("mysql:host=localhost;dbname=test;charset=utf8", "root", "123456"); } 
catch ( PDOException $e ){ sendError("Veritabanına bağlanılamadı."); }

$query = $db->prepare("INSERT INTO seçilmisler SET secilen = :priceString");
$insert = $query->execute(["priceString"=>$priceString]);
if(!$insert) sendError("Seçim veritabanına eklenemedi.");

// Sonucu döndürelim
sendSuccess("Ekleme tamamlandı");

Artık siz bu örneğe göre kendinize bir yol çizersiniz...