Skip to content

Instantly share code, notes, and snippets.

@tghelere
Created August 1, 2019 14:36
Show Gist options
  • Save tghelere/9f8c10d4aa902246752f5fad065df0a4 to your computer and use it in GitHub Desktop.
Save tghelere/9f8c10d4aa902246752f5fad065df0a4 to your computer and use it in GitHub Desktop.
Just a simple example
<?
$servers = ['server abc', 'server 123'];
$jogos_abc = ['1' => 'Jogo a', '2' => 'Jogo y', '3' => 'Jogo 4', '4' => 'Jogo h'];
$jogos_123 = [
'a' => 'Game f',
'b' => 'Game x',
'c' => 'Game 1',
'd' => 'Game m'
];
if (isset($_GET['servers'])) {
$selected_server = $_GET['servers'];
if ($selected_server == 1) {
echo json_encode($jogos_abc);
exit;
}
echo json_encode($jogos_123);
exit;
}
if (!empty($_POST)) {
print_r($_POST);
exit;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<style>
form.formulario { width: 600px; margin: 100px auto 0; }
p.resultado{ text-align: center;}
.mt-50 { margin-top: 50px; }
</style>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script>
$(() => {
let servers = $("#servers")
let jogos = $("#jogos")
servers.on('change', e => {
let server = $(e.target).val()
$.ajax({
url: '?servers=' + server,
type: 'get',
dataType: 'json',
success: (data) => {
let games = []
games.push('<option disabled selected value="">Selecione um jogo</option>')
$.each(data, function(key, value) {
games.push('<option value="' + key + '">' + value + "</option>")
})
jogos.html(games.join(""))
}
})
})
$('form.formulario').on('submit', e => {
e.preventDefault()
console.log(servers)
if(servers.val() != null && jogos.val() != null){
$('p.resultado').html('O servidor que você escolheu foi o <b>' + $('#servers option:selected').text() + ' (' + servers.val() + ')</b>, e o jogo escolhido foi <b>' + $('#jogos option:selected').text() + ' (' + jogos.val() + ')</b>.')
}
})
})
</script>
</head>
<body>
<form class="formulario" method="post">
<div class="form-group">
<label for="servers">Server</label>
<select class="form-control" id="servers" name="servers">
<option disabled selected value="">Selecione um server</option>
<? foreach ($servers as $key => $value) { ?>
<option value="<?= $key; ?>"><?= $value; ?></option>
<? } ?>
</select>
</div>
<div class="form-group">
<label for="jogos">Jogos</label>
<select class="form-control" id="jogos" name="jogos">
<option disabled selected value="">Selecione um jogo</option>
</select>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<div class="jumbotron mt-50">
<p class="resultado"></p>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment