Görsel düzene pek takılmayın onu seyrim için yaptım.
<?php
$db = new PDO('mysql:host=localhost;dbname=gazete', 'root', '');
$db->query('SET NAMES utf8');
if (isset($_REQUEST['gazeteler'])) {
header('Content-type: application/json');
$rows = array();
foreach($db->query('SELECT * FROM gazete ORDER BY gazete_ad ASC', PDO::FETCH_ASSOC) as $row) {
array_push($rows, $row);
}
exit(json_encode($rows));
} elseif (isset($_REQUEST['gazete_id'])) {
header('Content-type: application/json');
$rows = array();
foreach($db->query('SELECT * FROM gazeteci WHERE gazete_id = ' . (int) $_GET['gazete_id'] . ' ORDER BY gazeteci_ad ASC', PDO::FETCH_ASSOC) as $row) {
array_push($rows, $row);
}
exit(json_encode($rows));
}
/* MySQLi
$db = new mysqli('localhost', 'root', '', 'gazete');
$db->query('SET NAMES utf8');
if (isset($_REQUEST['gazeteler'])) {
header('Content-type: application/json');
$query = $db->query('SELECT * FROM gazete ORDER BY gazete_ad ASC');
$rows = array();
while ($row = $query->fetch_object()) {
array_push($rows, $row);
}
exit(json_encode($rows));
} elseif (isset($_REQUEST['gazete_id'])) {
header('Content-type: application/json');
$query = $db->query('SELECT * FROM gazeteci WHERE gazeteci_gazeteid = ' . (int) $_GET['gazete_id']);
$rows = array();
while ($row = $query->fetch_object()) {
array_push($rows, $row);
}
exit(json_encode($rows));
}*/
?>
<!DOCTYPE html>
<html>
<head>
<title>Gazeteci</title>
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Ubuntu:400,500&subset=latin-ext">
<link rel="stylesheet" type="text/css" href="https://unpkg.com/nprogress@0.2.0/nprogress.css">
<meta charset="utf-8">
<style>
body{font-family:Ubuntu;font-size:13px;background-color:#f0f0f0}
form{max-width:340px;padding:35px;box-sizing:border-box;margin:0 auto;margin-top:10%;background-color:#fff;border-radius:4px;box-shadow:0 2px 4px rgba(0,0,0,0.08),0 0 2px rgba(0,0,0,0.08)}
form .input{position:relative;margin-bottom:1em}
form .input.hidden:after{position:absolute;content:"";width:100%;height:100%;top:0;left:0;background:#fff;opacity:.5;cursor:not-allowed}
form .input label{display:block;margin-bottom:5px;margin-left:4px;color:#747474;font-weight:400}
form .input select{-webkit-appearance:none;cursor:pointer;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMi44NzEgMTIuNDUzIj48cGF0aCBkYXRhLW5hbWU9IlBhdGggMTQ4OSIgZD0iTTExLjk1NyAxMi4yMkwyMi42NTEgMS4zMDlhLjc3Ljc3IDAgMCAwLTEuMS0xLjA3N0wxMS40MDUgMTAuNTgzIDEuMzE5LjI5M2EuNzcuNzcgMCAwIDAtMS4xIDEuMDc3bDEwLjYzNiAxMC44NTFhLjc2Ny43NjcgMCAwIDAgLjU1LjIzMS43NzcuNzc3IDAgMCAwIC41NTItLjIzMnoiIGZpbGw9IiM0MzQzNDMiLz48L3N2Zz4=);background-repeat:no-repeat;background-position:right 10px center;background-size:10px;width:100%;border-radius:4px;padding:0 10px;height:35px;line-height:35px;font-size:inherit;font-family:inherit;color:#495057;background-color:#fff;box-sizing:border-box;border:1px solid #ddd}
form .input select:focus{outline:none}
form button{box-sizing:border-box;font-family:inherit;font-size:13px;border-radius:4px;padding:10px 15px;border:0;color:#fff;font-weight:500;cursor:pointer;width:100%;background-color:#000;opacity:.2;cursor:not-allowed}
form button.active{opacity:1;cursor:pointer;background-color:#1ABC9C}
</style>
</head>
<body>
<form>
<div class="input">
<label>Gazete</label>
<select name="gazete_id">
<option>Seçiniz</option>
</select>
</div>
<div class="input hidden">
<label>Gazeteci</label>
<select name="gazeteci_id">
<option>Seçiniz</option>
</select>
</div>
<button type="button">Uygula</button>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script src="https://unpkg.com/nprogress@0.2.0/nprogress.js"></script>
<script>
NProgress.configure({
parent: 'form'
});
$(function() {
NProgress.start();
$.getJSON("?gazeteler", function(json) {
$.each(json, function(index, row) {
$("select[name=gazete_id]").append($("<option>").val(row.gazete_id).text(row.gazete_ad));
});
NProgress.done();
});
$("select[name=gazete_id]").change(function() {
NProgress.start();
$.getJSON("", {gazete_id: $(this).val()}, function(json) {
$("select[name=gazeteci_id]").empty().append($("<option>").text("Seçiniz (" + json.length + ")"));
$.each(json, function(index, row) {
$("select[name=gazeteci_id]").append($("<option>").val(row.gazeteci_id).text(row.gazeteci_ad));
});
$(".input.hidden").removeClass("hidden");
NProgress.done();
});
});
$("select[name=gazeteci_id]").change(function() {
$("button").toggleClass("active");
});
$("form button").click(function(event) {
event.preventDefault();
if (!$(this).hasClass("active")) return;
console.log($("form").serialize());
});
});
</script>
</body>
</html>