javascript - 如何在提交表单后禁用 php 刷新？
问题描述
我在 html、js 和 php 中得到了这段代码，当单击选择选项时#eassociado，它会重定向到#chkveg页面。但是当我提交表单时，页面看起来像刷新并且电子邮件已提交但按钮不会重定向到页面。
我试图做到这一点的唯一方法是删除e.preventDefault，但表单不随它一起提交。
html
<form id="formulario" action="<? $PHP_SELF; ?>" method="POST">
<select id="eassociado" name="eassociado" >
<option disabled selected value> -- Selecione uma opção -- </option>
<option class="lista">ABRAPP</option>
<option class="lista">ABAAI</option>
<option class="lista">IBGC</option>
<option class="lista">ABRACAM</option>
<option class="lista">ABBC</option>
<option class="aAncord">Associados Ancord</option>
<option class="naoLista">Não Associados</option>
</select>
<select name="ingresso" id="chkveg" >
<option value="https://pag.ae/7ULKPL7TH">Associados Ancord + C.Dados = R$700,00</option>
<option value="https://pag.ae/7ULKQ8Zm2">Associados Ancord Normal = R$800,00</option>
<option value="https://pag.ae/7UTdp8_CG">Associados Entidades Apoiadoras + C.Dados = R$875,00</option>
<option value="https://pag.ae/7UTdpwWem">Associados Entidades Apoiadoras Normal = R$1.000,00</option>
<option value="https://pag.ae/7UTdpPZjn">Não Associados + C.Dados = R$1.100,00</option>
<option value="https://pag.ae/7UTdq2JsG">Não Associados Normal = R$1.250,00</option>
</select>
<button name="envia" id="btnget" class="submit-btn" type="submit">Enviar</button>
</form>
JS
var ingressoBloco = document.getElementById('ingresso-bloco');
var eassociado = document.getElementById('eassociado');
var chkveg = document.getElementById('chkveg');
chkveg.style.display = 'none';
ingressoBloco.style.display = 'none';
eassociado.addEventListener('change', function() {
var escolhido = eassociado.options[eassociado.selectedIndex].index;
if(escolhido == 1) {
chkveg.style.display = 'inline-block';
ingressoBloco.style.display = 'inline-block';
chkveg.options[0].style.display = 'none';
chkveg.options[1].style.display = 'none';
chkveg.options[2].style.display = 'inline-block';
chkveg.options[3].style.display = 'inline-block';
chkveg.options[4].style.display = 'none';
chkveg.options[5].style.display = 'none';
$(document).ready(function() {
$(document).on('click', '#btnget', function(e){
e.preventDefault();
let formValido = document.getElementById("formulario").checkValidity();
if (formValido) {
$(location).attr('href', $('#chkveg').val())
}
});
});
}
else if(escolhido == 2) {
chkveg.style.display = 'inline-block';
ingressoBloco.style.display = 'inline-block';
chkveg.selectedIndex = 2;
chkveg.options[0].style.display = 'none';
chkveg.options[1].style.display = 'none';
chkveg.options[2].style.display = 'inline-block';
chkveg.options[3].style.display = 'inline-block';
chkveg.options[4].style.display = 'none';
chkveg.options[5].style.display = 'none';
$(document).ready(function() {
$(document).on('click', '#btnget', function(e){
e.preventDefault();
let formValido = document.getElementById("formulario").checkValidity();
if (formValido) {
$(location).attr('href', $('#chkveg').val())
}
});
} // Asssim por diante
else if(escolhido == 3) {
chkveg.style.display = 'inline-block';
ingressoBloco.style.display = 'inline-block';
chkveg.selectedIndex = 2;
chkveg.options[0].style.display = 'none';
chkveg.options[1].style.display = 'none';
chkveg.options[2].style.display = 'inline-block';
chkveg.options[3].style.display = 'inline-block';
chkveg.options[4].style.display = 'none';
chkveg.options[5].style.display = 'none';
$(document).ready(function() {
$(document).on('click', '#btnget', function(e){
e.preventDefault();
let formValido = document.getElementById("formulario").checkValidity();
if (formValido) {
$(location).attr('href', $('#chkveg').val())
}
});
} // Asssim por diante
else if(escolhido == 4) {
chkveg.style.display = 'inline-block';
ingressoBloco.style.display = 'inline-block';
chkveg.selectedIndex = 2;
chkveg.options[0].style.display = 'none';
chkveg.options[1].style.display = 'none';
chkveg.options[2].style.display = 'inline-block';
chkveg.options[3].style.display = 'inline-block';
chkveg.options[4].style.display = 'none';
chkveg.options[5].style.display = 'none';
$(document).ready(function() {
$(document).on('click', '#btnget', function(e){
e.preventDefault();
let formValido = document.getElementById("formulario").checkValidity();
if (formValido) {
$(location).attr('href', $('#chkveg').val())
}
});
} // Asssim por diante
else if(escolhido == 5) {
chkveg.style.display = 'inline-block';
ingressoBloco.style.display = 'inline-block';
chkveg.selectedIndex = 2;
chkveg.options[0].style.display = 'none';
chkveg.options[1].style.display = 'none';
chkveg.options[2].style.display = 'inline-block';
chkveg.options[3].style.display = 'inline-block';
chkveg.options[4].style.display = 'none';
chkveg.options[5].style.display = 'none';
$(document).ready(function() {
$(document).on('click', '#btnget', function(e){
e.preventDefault();
let formValido = document.getElementById("formulario").checkValidity();
if (formValido) {
$(location).attr('href', $('#chkveg').val())
}
});
} // Asssim por diante
else if(escolhido == 6) {
chkveg.style.display = 'inline-block';
ingressoBloco.style.display = 'inline-block';
chkveg.selectedIndex = 0;
chkveg.options[0].style.display = 'inline-block';
chkveg.options[1].style.display = 'inline-block';
chkveg.options[2].style.display = 'none';
chkveg.options[3].style.display = 'none';
chkveg.options[4].style.display = 'none';
chkveg.options[5].style.display = 'none';
$(document).ready(function() {
$(document).on('click', '#btnget', function(e){
e.preventDefault();
let formValido = document.getElementById("formulario").checkValidity();
if (formValido) {
$(location).attr('href', $('#chkveg').val())
}
});
} // Asssim por diante
else if(escolhido == 7) {
chkveg.style.display = 'inline-block';
ingressoBloco.style.display = 'inline-block';
chkveg.selectedIndex = 4;
chkveg.options[0].style.display = 'none';
chkveg.options[1].style.display = 'none';
chkveg.options[2].style.display = 'none';
chkveg.options[3].style.display = 'none';
chkveg.options[4].style.display = 'inline-block';
chkveg.options[5].style.display = 'inline-block';
$(document).ready(function() {
$(document).on('click', '#btnget', function(e){
e.preventDefault();
let formValido = document.getElementById("formulario").checkValidity();
if (formValido) {
$(location).attr('href', $('#chkveg').val())
}
});
} // Asssim por diante
});
php
<?php
if (isset($_POST['envia'])) {
$nome = $_POST['nome'];
$cpf = $_POST['cpf'];
$nascimento = $_POST['nascimento'];
$celular = $_POST['celular'];
$email = $_POST['email'];
$cargo = $_POST['cargo'];
$empresa = $_POST['empresa'];
$endereco = $_POST['endereco'];
$numero = $_POST['numero'];
$complemento = $_POST['complemento'];
$bairro = $_POST['bairro'];
$estado = $_POST['estado'];
$corretoradevalores = $_POST['corretoradevalores'];
$corretoradecambio = $_POST['corretoradecambio'];
$banco = $_POST['banco'];
$estado = $_POST['estado'];
$cracha = $_POST['cracha'];
$empresacracha = $_POST['empresacracha'];
$ingresso = $_POST['ingresso'];
$comosoube = $_POST['comosoube'];
$eassociado = $_POST['eassociado'];
$setordaempresa = $_POST['setordaempresa'];
//====================================================
//REMETENTE --> ESTE EMAIL TEM QUE SER VALIDO DO DOMINIO
//====================================================
$email_remetente = "contato@congressoprotecaodados.com.br"; // deve ser uma conta de email do seu dominio
//====================================================
//Configurações do email, ajustar conforme necessidade
//====================================================
$email_destinatario = "lmorato@gmail.com"; // pode ser qualquer email que receberá as mensagens
$email_reply = "$email";
$email_assunto = "Inscrição 1º Congresso Proteção de dados"; // Este será o assunto da mensagem
//====================================================
//Monta o Corpo da Mensagem
//====================================================
$email_conteudo = "Nome = $nome \n";
$email_conteudo .= "Cpf = $cpf \n";
$email_conteudo .= "Data de Nascimento = $nascimento \n";
$email_conteudo .= "Celular = $celular \n";
$email_conteudo .= "Email = $email \n";
$email_conteudo .= "Cargo = $cargo \n";
$email_conteudo .= "Empresa = $empresa \n";
$email_conteudo .= "Endereço = $endereco \n";
$email_conteudo .= "Número = $numero \n";
$email_conteudo .= "Complemento = $complemento \n";
$email_conteudo .= "Bairro = $bairro \n";
$email_conteudo .= "Estado = $estado \n";
$email_conteudo .= "Nome da empresa para crachá = $empresacracha \n";
$email_conteudo .= "Setor da empresa = $setordaempresa \n";
$email_conteudo .= "Como Soube = $comosoube \n";
$email_conteudo .= "É associado = $eassociado \n";
$email_conteudo .= "Tipo do ingresso = $ingresso \n";
//====================================================
//Seta os Headers (Alterar somente caso necessario)
//====================================================
$email_headers = implode ( "\n",array ( "From: $email_remetente", "Reply-To: $email_reply", "Return-Path: $email_remetente","MIME-Version: 1.0","X-Priority: 3","Content-Type: text/html; charset=UTF-8" ) );
//====================================================
//Enviando o email
//====================================================
(mail ($email_destinatario, $email_assunto, nl2br($email_conteudo), $email_headers));
//====================================================
}
?>
解决方案
推荐阅读
- python - 如何将 dataprep.eda 安装到 Anaconda
- python - 遍历python字典并从列表中返回匹配值
- kotlin - Uncaught TypeError: this.resultContinuation_0 is undefined 当试图在 Kotlin JS 浏览器 onclick 中运行挂起函数时
- javascript - 将对象推送到数组
- reactjs - 无法在反应中将一个js文件导入另一个文件中
- node.js - 为什么我暂停的可读流没有保持暂停状态？
- html - HTML 电子邮件中的 Css 类
- android - 无法为类创建转换器，需要显式注册 JsonAdapter
- react-native - React Navigation v5：如何使用 redux thunk/redux saga 进行导航？
- python - 在python中评估稀疏矩阵的每个元素