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.
<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.