Button Submit does not open modal

Asked

Viewed 114 times

1

Good morning, excuse the question..

I’m a little slow on Javascript, I’m cracking my head with a code. I wanted to display the data from inside a modal window when you give Submit, only it doesn’t open the window when I give Submit..

If anyone can help me, I’d appreciate it

Code below

/* 
 SITE CRIADO E DESENVOLVIDO POR LEOW!
 QUALQUER PLAGIO DESSE SITE É CONSIDERADO UM CRIME!
*/

body {
  background-image: url("../img/bg.jpg");
 
}
#perguntas {
    z-index: 2;
    width: 500px;
    font-size: 15px;
    color: white;
}

#central {

	width: 800px;
	height: 1000px;
    background: rgb(0, 0, 0) transparent;
    background: rgba(0, 0, 0, 0.7);
}

#centralizando {

	width: 800px;
	height: 600px;
    background: rgb(0, 0, 0) transparent;
    background: rgba(0, 0, 0, 0.7);
}

#testt {
	
position: relative;
    right: -300px;
}

#logozinho {
position: absolute;
    top: -30px;
    left: 30px;
}

/* Add a black background color to the top navigation */
.topnav {
    background-color: #0009;
    overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Add a color to the active/current link */
.topnav a.active {
  background-color: #4CAF50;
  color: white;
}
<!DOCTYPE html>
<!-- INICIO SITE -->
<html lang="en">
<head>
    <title>Formulário whitelist - Primeiro comando RP</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
    <link href="css/site.css" rel="stylesheet">

</head>
<!-- FIM RODAPÉ -->

<!-- SCRIPT ETAPA 1 FORMULARIO OCULTA UMA DIV/MOSTRA OUTRA-->
<script>
function oculta(base, final){
ocultar=document.getElementById(base);
mostrar=document.getElementById(final);
ocultar.style.display="none";
mostrar.style.display="block";

}
</script>

<!-- SCRIPT ABRIR MODAL -->
<script type="text/javascript">
    $("#enviar").click(function(e){
        e.preventDefault();
        $("#myModal").modal("show");
        var nome = $("#nome").val();
        $("#conteudo").empty();
        $("#conteudo").append("Nome: " + nome);
    });
</script>
<!-- FIM SCRIPTS -->
<body>
<!-- MENU BAR -->
<div class="topnav">
   <div id="testt">
  <a href="#home">Início</a>
  <a href="#news">Servidores</a>
  <a href="#contact">Donators</a>
  <a href="#about">Whitelist</a>
  <a href="#about">Equipe</a>
  <a href="#about">Regras</a>
  <a href="#" style=" left: 750px;  position: absolute;"><span class="glyphicon glyphicon-user"></span> Administração</a>
  </div>
  </div>
    <div id="logozinho">
	<img src="img/logo.png" style=" width: 180px;"></img>
	</div>
	<br>
	<!-- FIM MENU -->
	
	<!-- PRIMEIRA ETAPA -->
	<center><div id="centralizando" style="display:block">
	   <div class="row">
	   <br><br>
	   <img src="img/logo.png" style=""></img>
	     <h1><font color="#fFFFFF" style="font-family: fantasy;">PRIMEIRO COMANDO ROLEPLAY</font></h1>
		 <label><font color="#fFFFFF" style="font-family: monospace;"> Seja bem vindo a whitelist do Primeiro Comando RP.</font><br></label>
		 <label><font color="#fFFFFF" style="font-family: monospace;"> Pedimos para que você se conecte ao nosso discord clicando <a href="">aqui</a> e tambem leia as <a href="">regras aqui!</a><br>
		 Para que você não fique perdido na hora de responder a whitelist. <br>
		 Nosso servidor está cada vez melhorando mais para obtermos uma melhor experiencia no nosso roleplay!</font><br><br></label>
		 
		 <div class="botaoum" ><br>
                <input type="button" onclick="javascript:oculta('centralizando','central')" name="enviar1" value="Seguir para a Whitelist" class="btn btn-success">

            </div>
	   </div>
	</div>
	<!-- FIM PRIMEIRA ETAPA -->
	
<!-- SEGUNDA ETAPA FORMULARIO -->
<div id="central" style="display:none">
    <div class="row">
        <form action="link" method="POST" id="formulario">
		<div class="col-md-4 col-md-offset-4">
                <label>Qual é o seu nome?</label>
                <input type="text" name="nome" placeholder="Digite seu nome" class="form-control">
            </div>
		
		
            <div id="perguntas"><br>
                <label>Você leu as regras do servidor?</label>
			<select class="form-control" name="questao10" required="">
			<option name="resposta10" value="">Selecione uma opção</option>
			<option name="resposta10" value="A">Sim, eu realmente lí as regras do servidor!</option>
			<option name="resposta10" value="B">Não, eu não lí as regras do servidor!</option></select>
			</div>
			
			<div id="perguntas"><br>
                <label>Quem são os criadores do servidor?</label>
			<select class="form-control" name="questao1" required="">
			<option name="resposta1" value="">Selecione uma opção</option>
			<option name="resposta1" value="A">Leow e Escobar</option>
			<option name="resposta1" value="B">Whisky e Juca</option>
			<option name="resposta1" value="C">Juca e Leow</option>
			<option name="resposta1" value="B">Escobar e Whisky</option></select>
			</div>
			
            <div id="perguntas"><br>
                <label>O que é PowerGaming?</label>
			<select class="form-control" name="questao2" required="">
			<option name="resposta2" value="">Selecione uma opção</option>
			<option name="resposta2" value="A">Fazer algo no jogo, que pode ser feito na vida real</option>
			<option name="resposta2" value="B">Sair matando as pessoas na cidade</option>
			<option name="resposta2" value="C">Fazer algo no jogo, que não pode ser feito na vida real</option>
			<option name="resposta2" value="D">Atropelar as pessoas na cidade</option></select>
			</div>
			
			
            <div id="perguntas"><br>
                <label>O que é MetaGaming?</label>
			<select class="form-control" name="questao3" required="">
			<option name="resposta3" value="">Selecione uma opção</option>
			<option name="resposta3" value="A">É atropelar e fugir sem prestar ajuda</option>
			<option name="resposta3" value="B">É chamar um personagem pelo seu ID sem ter perguntado o nome</option>
			<option name="resposta3" value="C">É matar pessoas sem algum motivo ou razão</option>
			<option name="resposta3" value="D">É andar sobre montanhas com carros que não fariam isso na vida real</option></select>
			</div>
			
			<div id="perguntas"><br>
                <label>O que é safezone?</label>
			<select class="form-control" name="questao4" required="">
			<option name="resposta4" value="0">Selecione uma opção</option>
			<option name="resposta4" value="A">São lugares para regenerar a vida</option>
			<option name="resposta4" value="B">São lugares onde se vende armas</option>
			<option name="resposta4" value="C">São lugares onde se pode roubar e matar</option>
			<option name="resposta4" value="D">São lugares em que não se pode roubar ou matar</option></select>
			</div>
			
			<div id="perguntas"><br>
                <label>O que é VDM?</label>
			<select class="form-control" name="questao5" required="">
			<option name="resposta5" value="0">Selecione uma opção</option>
			<option name="resposta5" value="A">É matar outro jogador atropelado</option>
			<option name="resposta5" value="B">É cair da moto em movimento</option>
			<option name="resposta5" value="C">É matar em lugares proibidos</option>
			<option name="resposta5" value="D">É dar carona de carro para outro jogador</option></select>
			</div>
			
			<div id="perguntas"><br>
                <label>O que é RDM?</label>
			<select class="form-control" name="questao6" required="">
			<option name="resposta6" value="0">Selecione uma opção</option>
			<option name="resposta6" value="A">É matar um jogador porque ele tentou te matar</option>
			<option name="resposta6" value="B">É matar um jogador porque ele tentou te roubar</option>
			<option name="resposta6" value="C">É matar um jogador porque ele roubou seu carro</option>
			<option name="resposta6" value="D">É matar um jogador sem motivo</option></select>
			</div>
			
			
			<div id="perguntas"><br>
               <label>O que é anti RP?</label>
			<select class="form-control" name="questao7" required="">
			<option name="resposta7" value="0">Selecione uma opção</option>
			<option name="resposta7" value="A">É chamar um amigo seu pelo ID</option>
			<option name="resposta7" value="B">É desenvolver um papel igual da vida real</option>
			<option name="resposta7" value="C">É não desenvolver um papel da vida real</option>
			<option name="resposta7" value="D">É conversar com um jogador chamando pelo ID</option></select>
			</div>
			
			<div id="perguntas"><br>
               <label>Para assaltar as pessoas na cidade necessita ter no mínimo quantos policiais online?</label>
			<select class="form-control" name="questao8" required="">
			<option name="resposta8" value="0">Selecione uma opção</option>
			<option name="resposta8" value="A">1 Policial</option>
			<option name="resposta8" value="B">2 Policiais</option>
			<option name="resposta8" value="C">3 Policiais</option>
			<option name="resposta8" value="D">4 Policiais</option></select>
			</div>
			
			<div id="perguntas"><br>
               <label>Durante uma perseguição policial você perde o controle do veículo e capota, o que você faria em seguida?</label>
			<select class="form-control" name="questao9" required="">
			<option name="resposta9" value="0">Selecione uma opção</option>
			<option name="resposta9" value="A">Deslogaria para não perder minhas armas</option>
			<option name="resposta9" value="B">Tentaria desvirar o veículo para fugir mais rápido</option>
			<option name="resposta9" value="C">Sairia do veículo e tentaria fugir correndo</option>
			<option name="resposta9" value="D">Roubaria outro carro e tentaria fugir</option></select>
			</div>
			
			
            <div class="clearfix">&nbsp </div>
			
            <div class="col-md-4 col-md-offset-4" >
                <input type="submit" id="enviar" name="enviar" value="Enviar" class="btn btn-success">
            </div>
        </form>
	</div>
	</center>
  
 <!-- FIM FORMULARIO -->
	
<!-- RESULTADOS PHP DENTRO DA MODAL -->
<?php
 
$questao1 = $_POST["questao1"];
$questao2 = $_POST["questao2"];
$questao3 = $_POST["questao3"];
$questao4 = $_POST["questao4"];
$questao5 = $_POST["questao5"];
$questao6 = $_POST["questao6"];
$questao7 = $_POST["questao7"];
$questao8 = $_POST["questao8"];
$questao9 = $_POST["questao9"];
$questao10 = $_POST["questao10"];
 
echo "<b>Criadores 1</b> = ".$questao1."<br>";
echo "<b>Questao 2</b>= ".$questao2."<br>";
echo "<b>Questao 3</b> = ".$questao3."<br>";
echo "<b>Questao 4</b> = ".$questao4."<br>";
echo "<b>Questao 5</b> = ".$questao5."<br>";
echo "<b>Questao 6</b> = ".$questao6."<br>";
echo "<b>Questao 7</b> = ".$questao7."<br>";
echo "<b>Questao 8</b>= ".$questao8."<br>";
echo "<b>Questao 9</b>= ".$questao9."<br>";
echo "<b>Questao 10</b> = ".$questao10."<br><br><br>";
 
$resposta1 = "C";
$resposta2 = "C";
$resposta3 = "B";
$resposta4 = "D";
$resposta5 = "A";
$resposta6 = "D";
$resposta7 = "C";
$resposta8 = "B";
$resposta9 = "C";
$resposta10 = "A";
 
$acertou = 0;
$errou = 0;
 
if ($questao1 == $resposta1)
{
    $acertou++;
    echo "<font color = 'blue'><i class='fas fa-times'></i> Obrigado por ler as regras!<br></font>";
}
else
{
    $errou++;
    echo "<font color = red> Questao 1 errada<br></font>";
}
 
if ($questao2 == $resposta2)
{
    $acertou++;
    echo "<font color = blue> Questao 2 correta<br></font>";
}
else
{
    $errou++;
    echo "<font color = red> Questao 2 errada<br></font>";
}
 
if ($questao3 == $resposta3)
{
    $acertou++;
    echo "<font color = blue> Questao 3 correta<br></font>";
}
else
{
    $errou++;
    echo "<font color = red> Questao 3 errada<br></font>";
}
 
if ($questao4 == $resposta4)
{
    $acertou++;
    echo "<font color = blue> Questao 4 correta<br></font>";
}
else
{
    $errou++;
    echo "<font color = red> Questao 4 errada<br></font>";
}
 
if ($questao5 == $resposta5)
{
    $acertou++;
    echo "<font color = blue> Questao 5 correta<br></font>";
}
else
{
    $errou++;
    echo "<font color = red> Questao 5 errada<br></font>";
}
 
if ($questao6 == $resposta6)
{
    $acertou++;
    echo "<font color = blue> Questao 6 correta<br></font>";
}
else
{
    $errou++;
    echo "<font color = red> Questao 6 errada<br></font>";
}
 
if ($questao7 == $resposta7)
{
    $acertou++;
    echo "<font color = blue> Questao 7 correta<br></font>";
}
else
{
    $errou++;
    echo "<font color = red> Questao 7 errada<br></font>";
}
 
if ($questao8 == $resposta8)
{
    $acertou++;
    echo "<font color = blue> Questao 8 correta<br></font>";
}
else
{
    $errou++;
    echo "<font color = red> Questao 8 errada<br></font>";
}
 
if ($questao9 == $resposta9)
{
    $acertou++;
    echo "<font color = blue> Questao 9 correta<br></font>";
}
else
{
    $errou++;
    echo "<font color = red> Questao 9 errada<br></font>";
}
 
if ($questao10 == $resposta10)
{
    $acertou++;
    echo "<font color = blue> Questao 10 correta<br></font>";
}
else
{
    $errou++;
    echo "<font color = red> Questao 10 errada<br></font>";
}
 
$calc = 10;
$porcent = $calc * $acertou;
 
echo "<br><br> Voce <font color = blue>acertou</font> $acertou e <font color = red>errou</font> $errou.";
 
 
if ($acertou >=7)
{
echo "<br><br><b><blink>Muito bem, um total de $porcent % de acerto Clique <button href='http://google.com'>AQUI</button>para prosseguir!</blink></b>";
}
else
{
echo "<br><br><b><blink> Poxa você foi muito mal, teve um total de $porcent% de acerto, tente novamente!</blink></b>";
}
 
?>
<!-- RESULTADOS PHP DENTRO DA MODAL -->

        
    <!-- MODAL -->
    <div class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Resultados</h4>
                </div>
                <div class="modal-body" id="conteudo">
                    <p>Resultados exibem aqui dentro</p>
                </div>
                <div class="modal-footer">
                </div>
            </div>
        </div>
    </div>
	<!-- FIM MODAL -->
	</body>
</html>

php javascript modal

  • Could you elaborate a [mcve]? It seems that there is a lot of PHP code there that should not interfere with the fact that the modal open or not, which ends up inserting noise in the question.

2 answers

3

Friend, put this Javascript code after the body tag. I changed the event, instead of listening to the button click event I put the form Submit event.

<script type="text/javascript">
    $("#formulario").submit(function(e){
        e.preventDefault();
        $("#myModal").modal("show");
        var nome = $("#nome").val();
        $("#conteudo").empty();
        $("#conteudo").append("Nome: " + nome);
    });
</script>

0

All <button> within a <form> acts like a Ubmit, and this reloads the page, to prevent the page from being reloaded you need to PREVENT the default behavior of the browser with the command e.preventDefault(); being the first thing to be executed in its function... otherwise qq thing done later will not be seen because the browser will try to send your form by reloading the page...

The solutions here would be either to use a e.preventDefault(); or not to use a <button> and yes a <a>...

Browser other questions tagged php javascript modal

You are not signed in. Login or sign up in order to post.