Created
August 1, 2019 14:36
-
-
Save tghelere/9f8c10d4aa902246752f5fad065df0a4 to your computer and use it in GitHub Desktop.
Just a simple example
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<? | |
$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