Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá, gostaria de fazer o seguinte tenho um código que tem vários botões, que quando clicado redireciona a outra pagina de formulário, gostaria de deixar esses botões ao clicar mudasse pra cor vermelha por exemplo e quando eu clicasse novamente voltasse para cor normal dele e desse uma caixa de mensagem !
Em anexo as telas !
Tela sacola.php
<?php session_start();
include_once 'includes/header.inc.php';
include_once 'includes/menu.inc.php';
?>
<!-- Formulário de Cadastro Cliente -->
<div class="row container">
<p> </p>
<fieldset class="formulario" style="padding: 5px">
<legend><img src="imagens/sacola.png" alt="[imagem]"style="width:80px; height:45px"></legend>
<br>
<?php
if(isset($_SESSION['msg'])):
echo $_SESSION['msg'];
session_unset();
endif;
?>
<!-- Botões -->
<div class="input-field col s12">
<div class="linha1">
<button id="botao" data-numero="01"class="btn blue" style="width:120px; height:37px">01</button>
<button id="botao" data-numero="02"class="btn blue" style="width:120px; height:37px">02</button>
<button id="botao" data-numero="03"class="btn blue" style="width:120px; height:37px">03</button>
<button id="botao" data-numero="04"class="btn blue" style="width:120px; height:37px">04</button>
<button id="botao" data-numero="05"class="btn blue" style="width:120px; height:37px">05</button>
</div>
<div class="linha2">
<button id="botao" data-numero="06"class="btn blue" style="width:120px; height:37px">06</button>
<button id="botao" data-numero="07"class="btn blue" style="width:120px; height:37px">07</button>
<button id="botao" data-numero="08"class="btn blue" style="width:120px; height:37px">08</button>
<button id="botao" data-numero="09"class="btn blue" style="width:120px; height:37px">09</button>
<button id="botao" data-numero="10"class="btn blue" style="width:120px; height:37px">10</button>
</div>
<div class="linha3">
<button id="botao" data-numero="11"class="btn blue" style="width:120px; height:37px">11</button>
<button id="botao" data-numero="12"class="btn blue" style="width:120px; height:37px">12</button>
<button id="botao" data-numero="13"class="btn blue" style="width:120px; height:37px">13</button>
<button id="botao" data-numero="14"class="btn blue" style="width:120px; height:37px">14</button>
<button id="botao" data-numero="15"class="btn blue" style="width:120px; height:37px">15</button>
</div>
<div class="linha4">
<button id="botao" data-numero="16"class="btn blue" style="width:120px; height:37px">16</button>
<button id="botao" data-numero="17"class="btn blue" style="width:120px; height:37px">17</button>
<button id="botao" data-numero="18"class="btn blue" style="width:120px; height:37px">18</button>
<button id="botao" data-numero="19"class="btn blue" style="width:120px; height:37px">19</button>
<button id="botao" data-numero="20"class="btn blue" style="width:120px; height:37px">20</button>
</div>
</div>
</fieldset>
</div>
<?php include_once 'includes/footer.inc.php';?>
<?php include_once 'includes/script.inc.php';
Tela emprestimo.php
<?php session_start();
include_once 'includes/header.inc.php';
include_once 'includes/menu.inc.php';
?>
<!-- Formulário de Cadastro Cliente -->
<div class="row container">
<p> </p>
<form action="banco_de_dados/create.php" method="post" class="col s12">
<fieldset class="formulario" style="padding: 5px">
<legend><img src="imagens/sacola.png" alt="[imagem]"style="width:80px; height:45px"></legend>
<br>
<?php
if(isset($_SESSION['msg'])):
echo $_SESSION['msg'];
session_unset();
endif;
?>
<!-- Campo Nome -->
<div class="input-field col s12">
<i class="material-icons prefix">account_circle</i>
<input type="text" name="nome" id="nome" maxlength="40" required autofocus>
<label for="nome">Nome</label>
</div>
<!-- Campo Telefone -->
<div class="input-field col s12">
<i class="material-icons prefix">phone</i>
<input type="text" name="telefone" id="telefone" maxlength="13" required>
<label for="telefone">Telefone</label>
</div>
<!-- Campo Cpf -->
<div class="input-field col s12">
<i class="material-icons prefix">credit_card</i>
<input type="text" name="cpf" id="cpf" maxlength="14" required>
<label for="cpf"> CPF</label>
</div>
<!-- Campo Sacola -->
<div class="input-field col s12">
<i class="material-icons prefix">mode_edit</i>
<label>Numero da Sacola</label>
<input type="text" value="<?php echo isset($_GET['numeroSacola']) ? $_GET['numeroSacola'] : null; ?>">
</div>
<div class="input-field col s12">
<i class="material-icons prefix">timelapse</i>
<select>
<option value="" disabled selected>Período</option>
<option value="1">Manhã</option>
<option value="2">Tarde</option>
<option value="3">Noite</option>
</select>
</div>
<!-- Botões -->
<div class="input-field col s12">
<input type="submit"style="width:120px; height:37px" value="Empréstimo" class="btn blue">
<input type="submit"style="width:120px; height:37px" value="Devolução" class="btn red">
<input type="reset" style="width:120px; height:37px" value="limpar" class="btn lilac">
</div>
</fieldset>
</form>
</div>
<?php include_once 'includes/script.inc.php';?>
Código javascript
<!-- Arquivos Jquery e JavaScrip -->
<script type="text/javascript" src="materialize/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="materialize/js/materialize.min.js"></script>
<script type="text/javascript" src="materialize/js/jquery.mask.min"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.3.1/jquery.maskedinput.min.js"></script>
<!-- Inicialização Jquery -->
<script type="text/javascript">
$(document).ready(function(){
$('.sidenav').sidenav();
$('.dropdown-trigger').dropdown();
});
</script>
<!-- Inicialização Jquery Mascaras -->
<script type="text/javascript">
jQuery.noConflict();
jQuery(function($){
//$("#datanasc").mask("99/99/9999");
//$("#telefone").mask("(099)99999-9999");
$("#cpf").mask("999.999.999-99");
$("#cpfDono").mask("999.999.999-99");
});
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('select');
var instances = M.FormSelect.init(elems, options);
});
// Or with jQuery
$(document).ready(function(){
$('select').formSelect();
});
</script>
<script>
//pega todos os botoes
const botoes = document.querySelectorAll('#botao');
for (let i = 0; i < botoes.length; i++) {
//escuta o evento de click em cada botao
botoes[i].addEventListener('click', function (e) {
//pega o numero do botao clicado
const numeroSacola = this.dataset.numero;
//redireciona para emprestimos.php passando o numero do botao
window.location.href = `emprestimo.php?numeroSacola=${numeroSacola}`;
});
}
</script>
</body>
</html>
Carregando comentários...