-2

Olá, estou montando um formulário que pegar informações de um pedido e envia para a página processa.php, mas sempre que clico no botão para enviar (<button type="submit" class="botao" name="botao" id="finalizarP" onclick="finalizarPedido()">FINALIZAR PEDIDO</button>) a gente é redirecionado para a página php.

Eu queria usar o php para armazenar informações do pedido que só pode ser acessado através do link (no caso fiz um login com usuário e senha para acessar tal página).

Existe alguma maneira de evitar esse redirecionamento e fica na página index.html?

html:

<html lang="pt-br">
  <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>Pizzaria Yellow Drinks & Bebidas</title>
  </head>
 <form action="processa.php" method="POST">
      <input class="escondeTabela" type= "text" name="escreveMesa" id="esMesa"/>
      <input class="escondeTabela" type= "text" name="informacao1" id="formacao1"/>
      <input class="escondeTabela" type= "text" name="informacao2" id="formacao2"/>
      <input class="escondeTabela" type= "text" name="informacao3" id="formacao3"/>
      <input class="escondeTabela" type= "text" name="informacao4" id="formacao4"/>
      <input class="escondeTabela" type= "text" name="informacao5" id="formacao5"/>
      <input class="escondeTabela" type= "text" name="informacao6" id="formacao6"/>
      <input class="escondeTabela" type= "text" name="informacao7" id="formacao7"/>
      <input class="escondeTabela" type= "text" name="informacao8" id="formacao8"/>
      <input class="escondeTabela" type= "text" name="informacao9" id="formacao9"/>
      <input class="escondeTabela" type= "text" name="informacao10" id="formacao10"/>
      <input class="escondeTabela" type= "text" name="informacao11" id="formacao11"/>
      <input class="escondeTabela" type= "text" name="informacao12" id="formacao12"/>
      <input class="escondeTabela" type= "text" name="informacao13" id="formacao13"/>
      <input class="escondeTabela" type= "text" name="informacao14" id="formacao14"/>
      <input class="escondeTabela" type= "text" name="informacao15" id="formacao15"/>
      <input class="escondeTabela" type= "text" name="informacao16" id="formacao16"/>
      <input class="escondeTabela" type= "text" name="informacao17" id="formacao17"/>
      <input class="escondeTabela" type= "text" name="informacao18" id="formacao18"/>
      <input class="escondeTabela" type= "text" name="informacao19" id="formacao19"/>
      <input class="escondeTabela" type= "text" name="informacao20" id="formacao20"/>
      <input class="escondeTabela" type= "text" name="informacao21" id="formacao21"/>
      <input class="escondeTabela" type= "text" name="linha"/>
      <input class="escondeTabela" type="text" id="result"/>
      <center>
        <button type="submit" class="botao" name="botao" id="finalizarP" onclick="finalizarPedido()">FINALIZAR PEDIDO</button>
      </center>
     </form> 

CSS:

 body {
        background: lightgray;
      }
      h1 {
        margin: 0;
      }
      h2 {
        margin: 5px;
        font-family: Helvetica;
        color: #000;
        -webkit-text-stroke-width: 1px;
        -webkit-text-stroke-color: #fff;
      }
      h3 {
        font-size: 30px;
        margin-bottom: 3px;
      }
      h4 {
        margin-top: 0;
        margin-bottom: 5px;
        font-size: 20px;
      }
    .botao {
        background: green;
        color: white;
        padding: 10px;
        border-radius: 10px;
        margin-top: 10px;
        margin-bottom: 10px;
        font-size: 20px;
        cursor: pointer;
      }
      .escondeTabela{
        display: block;
      }
     </style>

JavaScript:

      function finalizarPedido() {
          alert("Pedido realizado com sucesso!");
        }

Já tentei outros métodos que vi pela internet mas nenhum "enviou" as informações para a página php. Se alguém puder me ajudar agradeceria muito pois é um projeto muito importante para mim pois vai ajudar meus pais no barzinho deles.

PS.: Comecei a mexer com html, css, javascript e php essa semana...

PS2.: Tem muito mais coisa no código, tipo umas 1350 linhas. Então coloquei só a parte que estou em dúvida, se precisar de tudo eu posto o resto.

5
  • 1
    Não sei se entendi corretamente; você precisa que a página não mude, mas seja feita uma requisição em segundo plano para esse script php? Se for o caso, acredito que você precise ler sobre AJAX.
    – Rfroes87
    Commented 16/03/2022 às 4:07
  • É exatamente isso! Quero usar a página php como um "servidor" para guardar os dados dos pedidos. A ideia é fazer um cardápio digital onde o cliente seleciona o que quer e o pedido chegue no balcão pela página php, mas não quero que os clientes tenham acesso a essa página (processa.php). Commented 16/03/2022 às 4:42
  • 1
    O <button type="submit"> envia os dados para o servidor e carrega a resposta no contexto de navegação. Se não deseja esse comportamento use <button type="button"> e faça o envio dos dados por meio de uma solicitação AJAX. Link de pesquisa. Commented 16/03/2022 às 6:32
  • ok, Vou tentar fazer dessa maneira! Commented 16/03/2022 às 15:29
  • Tentei de todas as formas e continuo não recebendo as informações em php... Sempre que eu faço login para acessa a página (php) da um aviso de Undefined array key... Commented 17/03/2022 às 4:11

3 Respostas 3

1

Adicione em sua função:

event.preventDefault()

Isso cancelará o evento sem que pare a propagação do mesmo.

2
  • Sua resposta pode ser melhorada adicionando informações fundamentais. Basta editar para adicionar mais detalhes, como citações ou documentação para que outras pessoas possam confirmar que sua resposta está correta. Você pode encontrar mais informações sobre como escrever boas respostas na Central de Ajuda.
    – Comunidade Bot
    Commented 16/03/2022 às 11:54
  • Já tentei usar isso, mas os dados que coloco no formulário não "envia" para a página php, aparece esses avisos: Warning: Undefined array key "escreveMesa" in C:\xampp\htdocs\Cardapio digital\processa.php on line 2 Warning: Undefined array key "informacao1" in C:\xampp\htdocs\Cardapio digital\processa.php on line 3 Warning: Undefined array key "informacao2" in C:\xampp\htdocs\Cardapio digital\processa.php on line 4 Commented 16/03/2022 às 15:28
0

Reformulei um pouquinho e acho que deve funcionar:

DOMContentLoaded -> Evento de quando a página estiver totalmente carregada

Submit -> Evento de quando o formulário for submetido

e.preventDefault(); -> Evento que cancela o evento principal do alvo, como ele está dentro do event submit com a variável 'e' (e) => sendo o alvo então ele cancelará o submit quando for clicado no botão

<html lang="pt-br">
<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>Pizzaria Yellow Drinks & Bebidas</title>
</head>
<form id="meu_formulario" action="processa.php" method="POST">
<input class="escondeTabela" type= "text" name="escreveMesa" id="esMesa"/>
<input class="escondeTabela" type= "text" name="informacao1" 
id="formacao1"/>
  <input class="escondeTabela" type= "text" name="informacao2" 
id="formacao2"/>
  <input class="escondeTabela" type= "text" name="informacao3" 
id="formacao3"/>
  <input class="escondeTabela" type= "text" name="informacao4" 
id="formacao4"/>
  <input class="escondeTabela" type= "text" name="informacao5" 
id="formacao5"/>
  <input class="escondeTabela" type= "text" name="informacao6" 
id="formacao6"/>
  <input class="escondeTabela" type= "text" name="informacao7" 
id="formacao7"/>
  <input class="escondeTabela" type= "text" name="informacao8" 
id="formacao8"/>
  <input class="escondeTabela" type= "text" name="informacao9" 
id="formacao9"/>
  <input class="escondeTabela" type= "text" name="informacao10" 
id="formacao10"/>
  <input class="escondeTabela" type= "text" name="informacao11" 
id="formacao11"/>
  <input class="escondeTabela" type= "text" name="informacao12" 
id="formacao12"/>
  <input class="escondeTabela" type= "text" name="informacao13" 
id="formacao13"/>
  <input class="escondeTabela" type= "text" name="informacao14" 
id="formacao14"/>
  <input class="escondeTabela" type= "text" name="informacao15" 
id="formacao15"/>
  <input class="escondeTabela" type= "text" name="informacao16" 
id="formacao16"/>
  <input class="escondeTabela" type= "text" name="informacao17" 
id="formacao17"/>
  <input class="escondeTabela" type= "text" name="informacao18" 
id="formacao18"/>
  <input class="escondeTabela" type= "text" name="informacao19" 
id="formacao19"/>
  <input class="escondeTabela" type= "text" name="informacao20" 
id="formacao20"/>
  <input class="escondeTabela" type= "text" name="informacao21" 
id="formacao21"/>
  <input class="escondeTabela" type= "text" name="linha"/>
  <input class="escondeTabela" type="text" id="result"/>
  <center>
    <button type="submit" class="botao" name="botao" id="finalizarP" 
 onclick="finalizarPedido()">FINALIZAR PEDIDO</button>
  </center>
 </form> 
 <script>
  function elid(value){
    return document.getElementById(value);
   }

  document.addEventListener("DOMContentLoaded", ()=>{
    elid("meu_formulario").addEventListener("submit", (e)=>{
      e.preventDefault(); //cancela o envio do formulário
   });
  });
  
   finalizarPedido =() =>{
    let formData = new FormData();
      formData.append('escreveMesa', elid("esMesa").value);
      formData.append('informacao1', elid("formacao1").value);
      formData.append('informacao2', elid("formacao2").value);
        ....... //Continue fazendo os form datas baseado no 'name' e 'id' value

      fetch("processa.php",
          {
              body: formData,
              method: "post"
          }).then(r => r.json())
            .then(data => {
              //aqui vc coloca o retorno do servidor, ou o ser alert
              //Se vc quiser comparar os valores que vem do servidor use o 
'data'
              alert("Pedido realizado com sucesso!");
            })
   };

 </script>
4
  • Sua resposta pode ser melhorada adicionando informações fundamentais. Basta editar para adicionar mais detalhes, como citações ou documentação para que outras pessoas possam confirmar que sua resposta está correta. Você pode encontrar mais informações sobre como escrever boas respostas na Central de Ajuda.
    – Comunidade Bot
    Commented 17/03/2022 às 20:36
  • Assim que eu chegar em casa vou tentar! Mas pelo que vi rapidinho pode dar certo! Obrigada pela resposta :) Commented 18/03/2022 às 18:41
  • Funcionou! Nem acredito kkkkk Ainda coloquei um window.location.href=window.location.href para recarregar a página e deixar o formulário em branco de novo! Commented 18/03/2022 às 19:09
  • Se te ajudou não esqueça e marcar como a resposta certa
    – Froslass
    Commented 20/03/2022 às 1:48
-1

Consegui uma solução provisória, usei echo ("<script language='JavaScript'>window.location.href='index.html';</script>");.

Colocando isso, a página principal ficou com efeito de recarregamento. Acho que vou deixar assim mesmo... kkkkkkk

1
  • Como está escrito atualmente, sua resposta não é clara. Por favor, pode editar para adicionar mais detalhes, que ajudarão outras pessoas a entender como isso resolve a pergunta feita. Você pode encontrar mais informações sobre como escrever boas respostas na Central de Ajuda.
    – Comunidade Bot
    Commented 17/03/2022 às 17:57

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .