0

Bom, desculpem a pergunta.

Não sei muita coisa em Javascript, queria saber como eu mostro os resultados do meu formulário dentro da modal, normalmente estou clicando e está redirecionando para outra pagina.

Segue o codigo abaixo:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap Example</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>
        <style>
            <!--DEFINE AS FONTES USADA NAS PERGUNTAS E RESPOSTAS-->
            #center{font-family:arial;font-size:8pt;color:#696969;}
            #pergunta{background-color:#fefefe;font-family:arial;font-size:8pt;color:#696969;}
            #resposta{background-color:#fefefe;font-family:arial;font-size:8pt;color:#696969;}
            #input{border:1px solid #cccccc;background-color:#fefefe;font-family:arial;font-size:8pt;color:#696969;}
            #normal{font-family:arial;font-size:8pt;color:#696969;text-decoration:none;}
            input{font-family:arial;font-size:8pt;color:#1c1c1c;}
        </style>
    </head>
    <body>
        <!-- MODAL -->
        <div class="modal fade" id="myModal" role="dialog">
            <div class="modal-dialog">
                <!-- JANELA MODAL-->
                <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">
                        <p>Resultados exibem aqui dentro</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- FIM MODAL -->

        <!--ABAIXO SEGUE O FORMULÁRIO-->
        <form name=formmail>
            <center><font id=center>Responda as perguntas abaixo</font></center>
            <br>
            <center><font id=normal>cada questão vale 1 ponto</font></center>
            <center><a href=# onClick="vai()"><font id=normal>[ Clique aqui para fazer Novamente ]</font></a></center>
            <center><font id=normal>[ marque somente uma questão por pergunta ]</font></center>
            <div align=center> 
                <table border=0 cellpading=3 cellspacing=3 style="border:1px solid #f8f8f8;background-color:#ffffff;" width=400>
                    <tr>
                        <td>
                            <font id=pergunta> 
                            Coloque ao lado o seu Nome:&nbsp;</font><input type="text" name="onome" value="" size=44 id=input><font color=#0099cc face=verdana size=1><b>&nbsp;*</b><br>
                            <font id=pergunta> 
                            1 - Que número é este [1]?</font>
                            <br><font id=resposta> 
                            <font id=pergunta>(A)</font><input TYPE="checkbox" NAME="question1" VALUE="A"><font id=resposta>Um<br>
                            <font id=pergunta>(B)</font><input TYPE="checkbox" NAME="question1" VALUE="B"><font id=resposta>Dois<br>
                            <font id=pergunta>(C)</font><input TYPE="checkbox" NAME="question1" VALUE="C"><font id=resposta>Três<br>
                            <br>
                            <font id=pergunta> 
                            2 - Que número é este [6]?</font>
                            <br> 
                            <font id=pergunta>(A)</font><input TYPE="checkbox" NAME="question2" VALUE="A"><font id=resposta>Cinco<br>
                            <font id=pergunta>(B)</font><input TYPE="checkbox" NAME="question2" VALUE="B"><font id=resposta>Seis<br>
                            <font id=pergunta>(C)</font><input TYPE="checkbox" NAME="question2" VALUE="C"><font id=resposta>Sete<br>
                            <br>
                            <font id=pergunta> 
                            3 - Que letra é esta [c]?</font>
                            <br> 
                            <font id=pergunta>(A)</font><input TYPE="checkbox" NAME="question3" VALUE="A"><font id=resposta>b<br>
                            <font id=pergunta>(B)</font><input TYPE="checkbox" NAME="question3" VALUE="B"><font id=resposta>c<br>
                            <font id=pergunta>(C)</font><input TYPE="checkbox" NAME="question3" VALUE="C"><font id=resposta>d<br>
                            <br>
                            <center>
                                <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Resultado</button>
                                <input TYPE="button" NAME="valide" VALUE="Resultado" onclick="javascript:solution(this.form);" style="border:1px solid #f8f8f8;background-color:#ffffff;color:#696969;"> 
                            </center>
                        </td>
                    </tr>
                </table> 
            </div>
            <center><a href=# onClick="vai()"><font id=normal>[ Clique aqui para fazer Novamente ]</font></a></center>
        </form>

<script language="JavaScript"> 
/* início do código  */
var pontos = 0;
function reponse(form) {
    for (var i = 0; i < form.length; i++) {
        if (form[i].checked) {
            break
        }
    }
    var answer = ""
    if (i < form.length) {
        answer = form[i].value
    }
    return answer;
}

function solution(form) {
    /* variável para cada pergunta */
    var points = 0;
    var rep = "";
    var comment = "";
    var resposta1 = "";
    var resposta2 = "";
    var resposta3 = "";
    var onome = ""

    /* valor de pontos para as questões */
    if (reponse(form.question1) == "A") {
        pontos += 1
    }
    if (reponse(form.question2) == "B") {
        pontos += 1
    }
    if (reponse(form.question3) == "B") {
        pontos += 1
    }

    /* cada mensagem vai de acordo com o input marcado para resposta */

    /* mensagem para questão 1 */
    if (reponse(form.question1) == "") {
        resposta1 = "<font color=#cccccc>Você não respondeu está resposta!</font>"
    }
    if (reponse(form.question1) == "A") {
        resposta1 = "<font color=#0099cc>correta</font>"
    }
    if (reponse(form.question1) == "B") {
        resposta1 = "<font color=#cccccc>incorreta</font>"
    }
    if (reponse(form.question1) == "C") {
        resposta1 = "<font color=#cccccc>incorreta</font>"
    }

    /* mensagem para questão 2 */
    if (reponse(form.question2) == "") {
        resposta2 = "<font color=#cccccc>Você não respondeu está resposta!</font>"
    }
    if (reponse(form.question2) == "A") {
        resposta2 = "<font color=#cccccc>incorreta</font>"
    }
    if (reponse(form.question2) == "B") {
        resposta2 = "<font color=#0099cc>correta</font>"
    }
    if (reponse(form.question2) == "C") {
        resposta2 = "<font color=#cccccc>incorreta</font>"
    }

    /* mensagem para questão 3 */
    if (reponse(form.question3) == "") {
        resposta3 = "<font color=#cccccc>Você não respondeu está resposta!</font>"
    }
    if (reponse(form.question3) == "A") {
        resposta3 = "<font color=#cccccc>incorreta</font>"
    }
    if (reponse(form.question3) == "B") {
        resposta3 = "<font color=#0099cc>correta</font>"
    }
    if (reponse(form.question3) == "C") {
        resposta3 = "<font color=#cccccc>incorreta</font>"
    }

    /* aqui é exibido a mensagem de acordo com o ponto marcado */
    if (pontos == 0) {
        comment = "você não fez pontos, tente novamente"
    }
    if (pontos == 1) {
        comment = "você fez um ponto, continue assim"
    }
    if (pontos == 2) {
        comment = "você fez 2 pontos, está quase lá"
    }
    if (pontos == 3) {
        comment = "excelente! você acertou todas!<br><br><br><button type='button' class='btn btn-info btn-lg' data-toggle='modal' data-target='#myModal'>Open Modal</button>"
    }

    /* aqui exibo a porcentagem de acordo com o ponto  */
    if (pontos == 0) {
        porcentagem = "0%"
    }
    if (pontos == 1) {
        porcentagem = "33%"
    }
    if (pontos == 2) {
        porcentagem = "66%"
    }
    if (pontos == 3) {
        porcentagem = "100%"
    }

    /* aqui inicio o código mostrado na nova janela */
    chaine = '' +
        '<head><title>Resultado</title>' +
        '<style type=text/css>a{font-family:arial;font-size:8pt;color:#696969;text-decoration:none;}#texto{font-family:verdana,arial;font-size:8pt;color:#696969;}#textos{font-family:verdana,arial;font-size:10px;color:#c7c7c7;}input{border:1px solid #f8f8f8;background-color:fefefe;font-family:arial;font-size:8pt;color:#1c1c1c;}#resultado{font-family:arial;font-size:8pt;color:#696969;}</style>' +
        '</head>' +
        '<center><font id=texto>Você atingiu um total de <font color=#0099cc><b>' + pontos + '</b></font> pontos, acertando ' + porcentagem + ' das questões.<br><br><font color=#696969>' + comment + '<BR>'

        +
        '<br><center><font id=texto>' + formmail.onome.value + ' veja abaixo o resumo das questões:</font></center><br>'

        +
        '<table border=0 cellpading=3 cellspacing=3 style="border:1px solid #f8f8f8;background-color:#ffffff;" width="150">' +
        "<tr><td><font id=textos>1)</td><td><font id=resultado>" + resposta1 + "</font></td></tr>" +
        "<tr><td><font id=textos>2)</td><td><font id=resultado>" + resposta2 + "</font></td></tr>" +
        "<tr><td><font id=textos>3)</td><td><font id=resultado>" + resposta3 + "</font></td></tr>" +
        "</table></form>" +
        '<a href="javascript:void(0)" onclick="javascript:window.close()">FECHAR</a>' +
        '</CENTER></BODY></HTML>'

    solu = open();
    solu.document.write(chaine)
}

function vai() {
    location.reload();
}

</script>
    </body>
</html>

   

2 Respostas 2

2

LeoS isso é mais simples do que parece, quando você aperta o botão resultado (o pequeno) ele já cria um corpo em html, você só precisa jogar isso dentro do seu modal.

Vamos lá, no final do seu código tem essas duas linhas:

solu=open();

solu.document.write(chaine)

O que você precisa fazer é substituir essas linhas pelo seguinte:

$('.modal-body').html(chaine);    #aqui você vai jogar seu conteúdo no corpo do modal
$('#myModal').modal('toggle');    #aqui você vai mandar o modal abrir

*** Importante você precisa tirar todos os códigos desnecessários do corpo do modal ex: as tags <html><body><head> entre outras.

Aqui tem o código que eu editei:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</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>
<style>
<!--DEFINE AS FONTES USADA NAS PERGUNTAS E RESPOSTAS-->
#center{font-family:arial;font-size:8pt;color:#696969;}
#pergunta{background-color:#fefefe;font-family:arial;font-size:8pt;color:#696969;}
#resposta{background-color:#fefefe;font-family:arial;font-size:8pt;color:#696969;}
#input{border:1px solid #cccccc;background-color:#fefefe;font-family:arial;font-size:8pt;color:#696969;}
#normal{font-family:arial;font-size:8pt;color:#696969;text-decoration:none;}
input{font-family:arial;font-size:8pt;color:#1c1c1c;}
</style>
</head>
<body>

  <!-- MODAL -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- JANELA MODAL-->
      <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">
          <p>Resultados exibem aqui dentro</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  <!-- FIM MODAL -->
  

<!--ABAIXO SEGUE O FORMULÁRIO-->
<form name=formmail>
<center><font id=center>Responda as perguntas abaixo</font></center>
<br>
<center><font id=normal>cada questão vale 1 ponto</font></center>
<center><a href=# onClick="vai()"><font id=normal>[ Clique aqui para fazer Novamente ]</font></a></center>
<center><font id=normal>[ marque somente uma questão por pergunta ]</font></center>
<div align=center> 
<table border=0 cellpading=3 cellspacing=3 style="border:1px solid #f8f8f8;background-color:#ffffff;" width=400>
<tr><td>
<font id=pergunta> 
Coloque ao lado o seu Nome:&nbsp;</font><input type="text" name="onome" value="" size=44 id=input><font color=#0099cc face=verdana size=1><b>&nbsp;*</b><br>
<font id=pergunta> 
1 - Que número é este [1]?</font>
<br><font id=resposta> 
<font id=pergunta>(A)</font><input TYPE="checkbox" NAME="question1" VALUE="A"><font id=resposta>Um<br>
<font id=pergunta>(B)</font><input TYPE="checkbox" NAME="question1" VALUE="B"><font id=resposta>Dois<br>
<font id=pergunta>(C)</font><input TYPE="checkbox" NAME="question1" VALUE="C"><font id=resposta>Três<br>
<br>
<font id=pergunta> 
2 - Que número é este [6]?</font>
<br> 
<font id=pergunta>(A)</font><input TYPE="checkbox" NAME="question2" VALUE="A"><font id=resposta>Cinco<br>
<font id=pergunta>(B)</font><input TYPE="checkbox" NAME="question2" VALUE="B"><font id=resposta>Seis<br>
<font id=pergunta>(C)</font><input TYPE="checkbox" NAME="question2" VALUE="C"><font id=resposta>Sete<br>
<br>
<font id=pergunta> 
3 - Que letra é esta [c]?</font>
<br> 
<font id=pergunta>(A)</font><input TYPE="checkbox" NAME="question3" VALUE="A"><font id=resposta>b<br>
<font id=pergunta>(B)</font><input TYPE="checkbox" NAME="question3" VALUE="B"><font id=resposta>c<br>
<font id=pergunta>(C)</font><input TYPE="checkbox" NAME="question3" VALUE="C"><font id=resposta>d<br>
<br>
<center>
<input TYPE="button" NAME="valide" VALUE="Resultado" onclick="javascript:solution(this.form);" style="border:1px solid #f8f8f8;background-color:#ffffff;color:#696969;"> 
</center></td></form></tr>
</table> 
<center><a href=# onClick="vai()"><font id=normal>[ Clique aqui para fazer Novamente ]</font></a></center>

<script language="JavaScript"> 
/* início do código  */
<!-- 
var pontos=0; 
function reponse(form) { 
for (var i=0;i<form.length;i++){ 
 if (form[i].checked){ 
  break 
 } 
} 
var answer="" 
if (i<form.length){ 
 answer = form[i].value 
} 
return answer; 
} 

function solution(form) { 
/* variável para cada pergunta */
var points=0;var rep="";var comment="";var resposta1="";var resposta2="";var resposta3="";var onome=""

/* valor de pontos para as questões */
if (reponse(form.question1)=="A") {pontos+=1} 
if (reponse(form.question2)=="B") {pontos+=1} 
if (reponse(form.question3)=="B") {pontos+=1} 

/* cada mensagem vai de acordo com o input marcado para resposta */

/* mensagem para questão 1 */
if (reponse(form.question1)=="") {resposta1="<font color=#cccccc>Você não respondeu está resposta!</font>"} 
if (reponse(form.question1)=="A") {resposta1="<font color=#0099cc>correta</font>"} 
if (reponse(form.question1)=="B") {resposta1="<font color=#cccccc>incorreta</font>"}
if (reponse(form.question1)=="C") {resposta1="<font color=#cccccc>incorreta</font>"}

/* mensagem para questão 2 */
if (reponse(form.question2)=="") {resposta2="<font color=#cccccc>Você não respondeu está resposta!</font>"} 
if (reponse(form.question2)=="A") {resposta2="<font color=#cccccc>incorreta</font>"} 
if (reponse(form.question2)=="B") {resposta2="<font color=#0099cc>correta</font>"}
if (reponse(form.question2)=="C") {resposta2="<font color=#cccccc>incorreta</font>"}

/* mensagem para questão 3 */
if (reponse(form.question3)=="") {resposta3="<font color=#cccccc>Você não respondeu está resposta!</font>"} 
if (reponse(form.question3)=="A") {resposta3="<font color=#cccccc>incorreta</font>"} 
if (reponse(form.question3)=="B") {resposta3="<font color=#0099cc>correta</font>"}
if (reponse(form.question3)=="C") {resposta3="<font color=#cccccc>incorreta</font>"}

/* aqui é exibido a mensagem de acordo com o ponto marcado */
if (pontos==0) {comment="você não fez pontos, tente novamente"}
if (pontos==1) {comment="você fez um ponto, continue assim"}
if (pontos==2) {comment="você fez 2 pontos, está quase lá"}
if (pontos==3) {comment="excelente! você acertou todas!"}

/* aqui exibo a porcentagem de acordo com o ponto  */
if (pontos==0) {porcentagem="0%"}
if (pontos==1) {porcentagem="33%"}
if (pontos==2) {porcentagem="66%"}
if (pontos==3) {porcentagem="100%"}

/* aqui inicio o código mostrado na nova janela */
chaine='' 
+'<center><font id=texto>Você atingiu um total de <font color=#0099cc><b>'+ pontos +'</b></font> pontos, acertando '+ porcentagem +' das questões.<br><br><font color=#696969>'+comment+'<BR>' 

+'<br><center><font id=texto>'+ formmail.onome.value +' veja abaixo o resumo das questões:</font></center><br>'

+'<table border=0 cellpading=3 cellspacing=3 style="border:1px solid #f8f8f8;background-color:#ffffff;" width="150">'
+"<tr><td><font id=textos>1)</td><td><font id=resultado>"+ resposta1 +"</font></td></tr>"
+"<tr><td><font id=textos>2)</td><td><font id=resultado>"+ resposta2 +"</font></td></tr>"
+"<tr><td><font id=textos>3)</td><td><font id=resultado>"+ resposta3 +"</font></td></tr>"
+"</table></form>"
+'</CENTER>' 

$('.modal-body').html(chaine);
$('#myModal').modal('toggle');

} 
//--> 
</script>
<script>
function vai() {
location.reload()
}
</script> 
</body>
</html>

2
  • Dúvida resolvida, dei uma editada no codigo.. e estou com outra dúvida e se tipo eu quiser fazer um campo <select><option>1, 2, 3.. Como faço pra pegar o resultado dessse option?
    – LeoS
    16/04/2019 às 23:27
  • Esse valor vai ser o mesmo valor do select, se você quer pegar ele pelo js pode ser pelo jquery $('#id_select').val();
    – Lucas
    17/04/2019 às 11:54
1

Vou deixar um exemplo pra que você use como base e adapte as suas necessidades, esta foi a forma que encontrei, mas devem haver outras de chegar a este mesmo resultado.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Example</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>
</head>
<body>
    <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 class="col-md-4 col-md-offset-4">
                <label>Pergunta 1</label>
                <input type="text" id="nome" name="pergunta1" placeholder="Resposta: " class="form-control">
            </div>
            <div class="col-md-4 col-md-offset-4">
                <label>Pergunta 2</label>
                <input type="text" name="pergunta2" placeholder="Resposta: " class="form-control">
            </div>
            <div class="col-md-4 col-md-offset-4">
                <label>Pergunta 3</label>
                <input type="text" name="pergunta3" placeholder="Resposta: " class="form-control">
            </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>
    <!-- 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">
                    <button type="button" class="btn btn-default">Close</button>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
<script type="text/javascript">
    $("#enviar").click(function(e){
        e.preventDefault();
        $("#myModal").modal("show");
        var nome = $("#nome").val();
        $("#conteudo").empty();
        $("#conteudo").append("Nome: " + nome);
    });
</script>

1
  • Sugiro que teste o código fora do SOpt pq por algum motivo está excluindo alguns ids 16/04/2019 às 20:07

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 .