Ir para conteúdo
  • 0
Rick Chantres

Botão para adicionar numeral na mesma pagina PHP

Pergunta

Olá, tenho uma duvida muito forte no PHP, sou iniciante e não sei quase nada ainda

mas tenho uma missão de fazer um contador por botões para uma pequena pizzaria

eu preciso fazer da seguinte forma 1 botão para cada tamanho de pizza e do lado um 

eco com o numero de clicks ja feitos. e ao final um botão para ir com todo o resultado 

a uma pagina de resumo no final da noite.

 

eu ate to tentando mas acho que to indo num caminho muito errado

vou postar meu progresso para ver se conseguem me ajudar.

 

<!DOCTYPE html>
<html>
<head>
    <title>Contador</title>
</head>
    <body>
        <?php
            <form method="POST">    
            <button type="submit" value="mini">mini</button><br>
            <button type="submit" value="pequena">pequena</button><br>
            <button type="submit" value="nedia">Media</button><br>
            <button type="submit" value="grande">Grande</button><br>
            <button type="submit" value="gigante">Gugante</button><br>
            <button type="submit" value="outras">Outras</button><br>
            </form>

$mini = $_POST "mini"
$pequena =    $_POST "pequena"
$media = $_POST "media"
$grande = $_POST "grande"
$gigante = $_POST "gigante"
$outras = $_POST "outras"

        if(!$POST[submit])
        
        {
            echo(mini)
            echo(pequena)
            echo(media)
            echo(grande)
            echo(gigante)
            echo(outras)
        }

        ?>
    </body>
</html>

 

 

Editado por quintelab
Adicionado BBCode

Compartilhar este post


Link para o post
Compartilhar em outros sites

10 respostas a esta questão

Recommended Posts

  • 0

tente assim:


 

<form method="POST">
  <label>
  <input name="tamanho" type="submit" id="pequena" value="pequena" />
  </label>    
   <br />
  <label>
  <input name="tamanho" type="submit" id="media" value="media" />
  </label>
  <br />
  <label>
  <input name="tamanho" type="submit" id="grande" value="grande" />
  </label>
  <br />
</form>

<?php
if(isset($_POST['tamanho']))
echo $_POST['tamanho'];
?>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites
  • 0

Quase isso.... na verdade, da mesma forma que como uma calculadora apresenta a tecla que foi clicada, eu preciso exibir não o tamanho que foi clicado mas sim a quantidade de vezes que cada tamanho foi clicado, e exibir isso em uma so pagina, sem envio para uma pagina de resultados.

 

Ta tenso..... mas é tipo assim

 

(botão1)  ---> click = ultimo valor = 0 + 1 {se clicar de novo / (botão1)  ---> click   =  ultimo valor + 1 (1+1=2)

 

(botão)                                          -------------                               ( resultado dos clicks do dia)

 

 

 

porque ai depois vou fazer um submit pra poder fazer um relatório.

Compartilhar este post


Link para o post
Compartilhar em outros sites
  • 0

Você pode fazer algo do tipo com:

<form method="POST">    
  <button class="tamanho" type="button" name="mini" value="0">mini <span>0</span></button><br>
  <button class="tamanho" type="button" name="pequena" value="0">pequena <span>0</span></button><br>
  <button class="tamanho" type="button" name="media" value="0">Media <span>0</span></button><br>
  <button class="tamanho" type="button" name="grande" value="0">Grande <span>0</span></button><br>
  <button class="tamanho" type="button" name="gigante" value="0">Gugante <span>0</span></button><br>
  <button class="tamanho" type="button" name="outras" value="0">Outras <span>0</span></button><br>
  <button type="submit">Enviar</button>
</form>

<script>
function incrementarValor() {
  this.value++;//Incrementa o valor
  this.querySelector('span').textContent = this.value;//Exibe o valor
}

var botoes = document.querySelectorAll('.tamanho');//Pega os botões que devem ter a função de incrementar

for(var i = 0; i < botoes.length; i++)
  botoes[i].onclick = incrementarValor;//Anexa a função de incremento ao evento de click.
</script>

Ao clicar em enviar você ira receber no servidor os campos(mini, pequena, media, ...) com a quantidade de cliques que cada um recebeu.

 

Você pode testar o código acima em https://jsfiddle.net/qkg9p5h8/15/.

Compartilhar este post


Link para o post
Compartilhar em outros sites
  • 0
Em 31/03/2018 at 04:35, HwapX disse:

Você pode fazer algo do tipo com:


<form method="POST">    
  <button class="tamanho" type="button" name="mini" value="0">mini <span>0</span></button><br>
  <button class="tamanho" type="button" name="pequena" value="0">pequena <span>0</span></button><br>
  <button class="tamanho" type="button" name="media" value="0">Media <span>0</span></button><br>
  <button class="tamanho" type="button" name="grande" value="0">Grande <span>0</span></button><br>
  <button class="tamanho" type="button" name="gigante" value="0">Gugante <span>0</span></button><br>
  <button class="tamanho" type="button" name="outras" value="0">Outras <span>0</span></button><br>
  <button type="submit">Enviar</button>
</form>

<script>
function incrementarValor() {
  this.value++;//Incrementa o valor
  this.querySelector('span').textContent = this.value;//Exibe o valor
}

var botoes = document.querySelectorAll('.tamanho');//Pega os botões que devem ter a função de incrementar

for(var i = 0; i < botoes.length; i++)
  botoes[i].onclick = incrementarValor;//Anexa a função de incremento ao evento de click.
</script>

Ao clicar em enviar você ira receber no servidor os campos(mini, pequena, media, ...) com a quantidade de cliques que cada um recebeu.

 

Você pode testar o código acima em https://jsfiddle.net/qkg9p5h8/15/.

 

Caramba cara.... tu manja mesmo em, nem sabia que dava pra fazer isso com botões. 

Obrigado a todos, vou continuar tentando aqui.

É que me ocorreu depois de ver que meu mouse ta meio ruim, que se eu der dois clicks não tem como eu tirar um.

Compartilhar este post


Link para o post
Compartilhar em outros sites
  • 0

Nesse caso você poderia poderia usar um <input type="number"> nos navegadores mais recentes ele já possui os botões para incrementar e decrementar seu valor além de permitir definir o máximo e o mínimo.

<label>
  Mini: 
  <input type="number" min="0" max="20" name="mini">
</label>

 

Porem caso queira algo mais robusto, você pode fazer algo como:

<form method="POST">
  <div class="opcoes">
    <label for="mini">Mini:</label>
    <input type="button" class="decrementar" value="-">
    <input type="text" class="tamanho" name="mini" id="mini" value="0" readonly>
    <input type="button" class="incrementar" value="+">
  </div>
  <div class="opcoes">
    <label for="pequena">Pequena:</label>
    <input type="button" class="decrementar" value="-">
    <input type="text" class="tamanho" name="pequena" id="pequena" value="0" readonly>
    <input type="button" class="incrementar" value="+">
  </div>
  <!-- ... -->
  <button type="submit">Enviar</button>
</form>

<script>
function alterarValor(valor) {
  //https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/parseInt
  this.value = parseInt(this.value, 10) + valor;//Aplica o valor ao valor atual
}

var opcoes = document.querySelectorAll('.opcoes');//Pega os grupos de elementos de cada tamanho

for(var i = 0; i < opcoes.length; i++) {
  var opcao    = opcoes[i];
  var botaoInc = opcao.querySelector('.incrementar'); //Pega o botão de incremento deste grupo
  var tamanho  = opcao.querySelector('.tamanho'); //Pega o campo que armazena o valor
  var botaoDec = opcao.querySelector('.decrementar'); //Pega o botão de decremento deste grupo
  
  //https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Function/bind
  botaoInc.onclick = alterarValor.bind(tamanho, 1);//Anexa a função de incremento ao evento de click.
  botaoDec.onclick = alterarValor.bind(tamanho, -1);//Anexa a função de decremento ao evento de click.
}
</script>

Você pode testar o código acima em https://jsfiddle.net/qkg9p5h8/45/.

 

O método bind do objeto função permite no primeiro argumento definir o contexto em que ela será executada(basicamente permite definir qual será o valor da variável this) e nos demais predefinir os argumentos que ela recebera quando for chamada, no código acima estou definindo this como sendo o campo que armazena o valor e o primeiro argumento como sendo o valor a ser aplicado a cada clique.

 

Algo a se notar é que o método bind só é suportado no Internet Explorer a partir da versão 9.

Compartilhar este post


Link para o post
Compartilhar em outros sites
  • 0

Deu quase certo aqui.... ta do jeitinho que eu to tentando fazer, depois só vou incrementar o CSS.

Mas algo deu errado pois só a primeira tabela com o nome de mini ta rodando a contagem.

Da uma olhada no código, tem algo errado mas não sei dizer o que é.

 

<!DOCTYPE html>
<html>
<head>
  <title>Constador de Pizzas</title>
</head>
<body>
        <!-- Metodo de envio -->
  <form method="POST">
  <div class="opcoes">
        <!-- inicio da tabela -->
<table>
        <thead>
                <tr>
                        <th>
                            <label for="mini">Mini:</label>
                        </th>
                        <th><input type="button" class="decrementar" value="-">
                            <input type="button" class="incrementar" value="+"></th>
                        <th><input type="text" size="3" class="tamanho" name="mini" id="mini" value="0" readonly></th>
                </tr>
                <tr>
                        <th>
                            <label for="pequena">Pequena:</label>
                        </th>
                        <th><input type="button" class="decrementar" value="-">
                            <input type="button" class="incrementar" value="+"></th>
                        <th><input type="text" size="3" class="tamanho" name="pequena" id="pequena" value="0" readonly></th>
                </tr>
                <tr>
                        <th>
                            <label for="media">Media:</label>
                        </th>
                        <th><input type="button" class="decrementar" value="-">
                            <input type="button" class="incrementar" value="+"></th>
                        <th><input type="text" size="3" class="tamanho" name="media" id="media" value="0" readonly></th>
                </tr>
                <tr>
                        <th>
                            <label for="grande">Grande:</label>
                        </th>
                        <th><input type="button" class="decrementar" value="-">
                            <input type="button" class="incrementar" value="+"></th>
                        <th><input type="text" size="3" class="tamanho" name="grande" id="grande" value="0" readonly></th>
                </tr>
                <tr>
                        <th>
                            <label for="gigante">Gigante:</label>
                        </th>
                        <th><input type="button" class="decrementar" value="-">
                            <input type="button" class="incrementar" value="+"></th>
                        <th><input type="text" size="3" class="tamanho" name="gigante" id="gigante" value="0" readonly></th>
                </tr>
        </thead>
</table>
<!-- Botão para enviar -->
        <button type="submit">Enviar</button>
        <!-- Fim da tabela -->
        <!-- Inicio do js -->
<script>
function alterarValor(valor) {
  //https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/parseInt
  this.value = parseInt(this.value, 10) + valor;//Aplica o valor ao valor atual
}

var opcoes = document.querySelectorAll('.opcoes');//Pega os grupos de elementos de cada tamanho

for(var i = 0; i < opcoes.length; i++) {
  var opcao    = opcoes[i];
  var botaoInc = opcao.querySelector('.incrementar'); //Pega o botão de incremento deste grupo
  var tamanho  = opcao.querySelector('.tamanho'); //Pega o campo que armazena o valor
  var botaoDec = opcao.querySelector('.decrementar'); //Pega o botão de decremento deste grupo
  
  //https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Function/bind
  botaoInc.onclick = alterarValor.bind(tamanho, 1);//Anexa a função de incremento ao evento de click.
  botaoDec.onclick = alterarValor.bind(tamanho, -1);//Anexa a função de decremento ao evento de click.
}
</script>
        <!-- Fim do js -->
</body>
</html>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites
  • 0
Em 02/04/2018 at 05:06, HwapX disse:

Nesse caso você poderia poderia usar um <input type="number"> nos navegadores mais recentes ele já possui os botões para incrementar e decrementar seu valor além de permitir definir o máximo e o mínimo.


<label>
  Mini: 
  <input type="number" min="0" max="20" name="mini">
</label>

 

Porem caso queira algo mais robusto, você pode fazer algo como:


<form method="POST">
  <div class="opcoes">
    <label for="mini">Mini:</label>
    <input type="button" class="decrementar" value="-">
    <input type="text" class="tamanho" name="mini" id="mini" value="0" readonly>
    <input type="button" class="incrementar" value="+">
  </div>
  <div class="opcoes">
    <label for="pequena">Pequena:</label>
    <input type="button" class="decrementar" value="-">
    <input type="text" class="tamanho" name="pequena" id="pequena" value="0" readonly>
    <input type="button" class="incrementar" value="+">
  </div>
  <!-- ... -->
  <button type="submit">Enviar</button>
</form>

<script>
function alterarValor(valor) {
  //https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/parseInt
  this.value = parseInt(this.value, 10) + valor;//Aplica o valor ao valor atual
}

var opcoes = document.querySelectorAll('.opcoes');//Pega os grupos de elementos de cada tamanho

for(var i = 0; i < opcoes.length; i++) {
  var opcao    = opcoes[i];
  var botaoInc = opcao.querySelector('.incrementar'); //Pega o botão de incremento deste grupo
  var tamanho  = opcao.querySelector('.tamanho'); //Pega o campo que armazena o valor
  var botaoDec = opcao.querySelector('.decrementar'); //Pega o botão de decremento deste grupo
  
  //https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Function/bind
  botaoInc.onclick = alterarValor.bind(tamanho, 1);//Anexa a função de incremento ao evento de click.
  botaoDec.onclick = alterarValor.bind(tamanho, -1);//Anexa a função de decremento ao evento de click.
}
</script>

Você pode testar o código acima em https://jsfiddle.net/qkg9p5h8/45/.

 

O método bind do objeto função permite no primeiro argumento definir o contexto em que ela será executada(basicamente permite definir qual será o valor da variável this) e nos demais predefinir os argumentos que ela recebera quando for chamada, no código acima estou definindo this como sendo o campo que armazena o valor e o primeiro argumento como sendo o valor a ser aplicado a cada clique.

 

Algo a se notar é que o método bind só é suportado no Internet Explorer a partir da versão 9.

 

 

Foi o que funcionou melhor ate agora. tu manda de JS de mais.

Compartilhar este post


Link para o post
Compartilhar em outros sites
  • 0

É que o script espera que cada grupo de botões esteja de dentro de um contêiner class="opcoes" distinto, para corrigir o problema basta remover o class="opcoes" da div e adicioná-lo em todos os tr.

Compartilhar este post


Link para o post
Compartilhar em outros sites
  • 0
Em 13/04/2018 at 18:56, HwapX disse:

É que o script espera que cada grupo de botões esteja de dentro de um contêiner class="opcoes" distinto, para corrigir o problema basta remover o class="opcoes" da div e adicioná-lo em todos os tr.

tentei... mas por algum motivo não deu.

Fica funcionando só a primeira.

Compartilhar este post


Link para o post
Compartilhar em outros sites
  • 0

Ajustei seu código, verifique.

<!DOCTYPE html>
<html>
<head>
  <title>Constador de Pizzas</title>
</head>
<body>
<!-- Metodo de envio -->
<form method="POST">
  <!-- inicio da tabela -->
  <table>
    <thead>
      <tr class="opcoes">
        <th>
          <label for="mini">Mini:</label>
        </th>
        <th>
          <input type="button" class="decrementar" value="-">
          <input type="button" class="incrementar" value="+"></th>
        <th>
        <input type="text" size="3" class="tamanho" name="mini" id="mini" value="0" readonly></th>
      </tr>
      <tr class="opcoes">
        <th>
          <label for="pequena">Pequena:</label>
        </th>
        <th>
          <input type="button" class="decrementar" value="-">
          <input type="button" class="incrementar" value="+"></th>
        <th>
        <input type="text" size="3" class="tamanho" name="pequena" id="pequena" value="0" readonly></th>
      </tr>
      <tr class="opcoes">
        <th>
          <label for="media">Media:</label>
        </th>
        <th>
          <input type="button" class="decrementar" value="-">
          <input type="button" class="incrementar" value="+"></th>
        <th>
        <input type="text" size="3" class="tamanho" name="media" id="media" value="0" readonly></th>
      </tr>
      <tr class="opcoes">
        <th>
          <label for="grande">Grande:</label>
        </th>
        <th>
          <input type="button" class="decrementar" value="-">
          <input type="button" class="incrementar" value="+"></th>
        <th>
        <input type="text" size="3" class="tamanho" name="grande" id="grande" value="0" readonly></th>
      </tr>
      <tr class="opcoes">
        <th>
          <label for="gigante">Gigante:</label>
        </th>
        <th>
          <input type="button" class="decrementar" value="-">
          <input type="button" class="incrementar" value="+">
         </th>
        <th>
        <input type="text" size="3" class="tamanho" name="gigante" id="gigante" value="0" readonly></th>
      </tr>
    </thead>
  </table>
  <!-- Botão para enviar -->
  <button type="submit">Enviar</button>
  <!-- Fim da tabela -->
</form>

<script>
function alterarValor(valor) {
  //https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/parseInt
  this.value = parseInt(this.value, 10) + valor;//Aplica o valor ao valor atual
}

var opcoes = document.querySelectorAll('.opcoes');//Pega os grupos de elementos de cada tamanho

for(var i = 0; i < opcoes.length; i++) {
  var opcao    = opcoes[i];
  var botaoInc = opcao.querySelector('.incrementar'); //Pega o botão de incremento deste grupo
  var tamanho  = opcao.querySelector('.tamanho'); //Pega o campo que armazena o valor
  var botaoDec = opcao.querySelector('.decrementar'); //Pega o botão de decremento deste grupo
  
  //https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Function/bind
  botaoInc.onclick = alterarValor.bind(tamanho, 1);//Anexa a função de incremento ao evento de click.
  botaoDec.onclick = alterarValor.bind(tamanho, -1);//Anexa a função de decremento ao evento de click.
}
</script>
</body>
</html>

Você pode testar em https://jsfiddle.net/c11mepxq/.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por VCastilho
      Bom Dia

      Desenvolvi um filtro HTML e estou com dificuldades em criar o JavaScript para o funcionamento do mesmo, poderiam em ajudar a criar esse JS?
      Segue o código:
       
      <div id = "filtro"> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style disabled> #filtro { border-style:double; } #button1 { width: 120px; position: inherit; right: 10px; background-color: #e00505; font-size: 12px; FLOAT: right } h4 { font-size: 18px; border-style: inset; } select { border: 1px solid #000; box-sizing: border-box; width: 124px; border-radius: 5px; height: 25px; padding: 3px; } section label { width: calc(100% / 4); color: red; text-align: center; } section { display: flex; flex-wrap: wrap; } h4/ { border-style:double; } @media screen and (max-width:768px) { section label { margin-bottom: 20px; width: 100%; } } </style> <h4 style="text-align: center;">Personalize o seu Kit de Segurança</h4><br><br> <form action="#" id="form"> <section> <label> <b> Tipo do seu Kit </b><br> <select name="speed" id="speed" style=" "> <option desable>Selecione</option> <option>Residencial</option> <option>Comercial</option> </select> </label> <label> <b>Qualidade de Seu Kit</b><br> <select name="files" id="files" style=" "> <option desable> Selecione </option> <option value="HD">HD</option> <option value="Full HD">Full HD</option> <option value="Analógica">Analógica</option> </select> </label> <label> <b> Quantidade de Câmeras </b><br> <select name="number" id="number" style=" "> <option desable> Selecione </option> <option>1 Câmera</option> <option>2 Câmeras</option> <option>3 Câmeras</option> <option>4 Câmeras</option> <option>5 Câmeras</option> <option>6 Câmeras</option> <option>7 Câmeras</option> <option>8 Câmeras</option> <option>9 Câmeras</option> <option>10 Câmeras</option> <option>11 Câmeras</option> <option>12 Câmeras</option> <option>13 Câmeras</option> <option>14 Câmeras</option> <option>15 Câmeras</option> <option>16 Câmeras</option> </select> </label> <label> <b> Selecione a Marca </b><br> <select name="salutation" id="salutation"> <option desable selected>Selecione</option> <option>Intelbras</option> <option>Hikvision</option> <option>Outras</option> </select> </label> </section> <BR> <BR> </form> </div> <br> <br> <button class="kd-filter-button" id="button1">Ver resultados</button> Seria bom, se possível o botão funcionar fora da tag "form" pois para personalizar fica melhor

       
    • Por jaquelss
      Os erros estão na imagem anexada. Não sei exatamente o que colocar quanto o conteúdo no menu, mas quanto ao botão segue abaixo:
       
      <div class="col-md-2 col-sm-6 col-6">
      <button class="button button-rounded btn-block nomargin"
      style="margin-top: 29px !important;"><a href="http://localhost/xavier/#/imovel"></style>Encontrar</a></button>
      </div>
       
      Tenho certeza que é uma bobagem minha, mas perdi a tarde tentando resolver.
      Ainda sou estudante, não tenho conhecimento total quanto a isso (apesar de que acho que ninguém tem né kk).
      Enfim,
      Agradeço desde já.

    • Por mytools
      Boa noite,
      Podem me ajudar com o botão comprar da minha loja?
      Gostaria de deixar um pouco menor, mas não sei onde alterar no html/css
       
      http://style-theme.lojavirtualnuvem.com.br/br/
       
    • Por mytools
      Boa noite,
      Podem me ajudar com o botão comprar da minha loja?
      Gostaria de deixar um pouco menor, mas não sei onde alterar no html/css
       
      http://style-theme.lojavirtualnuvem.com.br/br/
    • Por kerven
      eae pessoal
      queria um javascript para associar a um botão.
      seria para usar em botoes de próximo e anterior, esse script tem que levar a uma pagina html q está na pasta do html atual
      as paginas são numeradas, por exemplo: 0.html, 1.html, 2.html, 3html...
       
      eu queria uma variável, que quando estivesse, por exemplo na numero 2.html, o botao "anterior" vá para a 1.html e o botao " próximo" vá para 3.html, 
       
      algo do tipo 
       
       Anterior= valor da pagina atual.html - valor da pagina atual -1.html e redirecionar para ela
      proximo= valor da pagina atual.html + valor da pagina atual + 1.html e redirecionar para ela
       
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.