How to open modal with results on the Submit button?

Asked

Viewed 1,547 times

0

Well, excuse the question.

I don’t know much in Javascript, I wanted to know how I show the results of my form inside the modal, I’m usually clicking and is redirecting to another page.

Follow the code below:

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

javascript modal

2 answers

2


Leos this is simpler than it looks, when you push the button resultado (small) it already creates a body in html, you just need to play it within your modal.

Come on, at the end of your code there are these two lines:

Solu=open();

Solu.document.write(chaine)

What you need to do is replace these lines with the following:

$('.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

*** Important you need to take all unnecessary codes from the body of the modal ex: tags <html><body><head> among others.

Here’s the code I edited:

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

  • Doubt solved, I edited one in the code.. and I have another question and if type I want to make a field <select><option>1, 2, 3.. How do I get the result dessse option?

  • This value will be the same value as select, if you want to catch it by js it can be by jquery $('#id_select').val();

1

I’ll leave an example for you to use as a basis and adapt your needs, this is the way I found, but there must be others to reach this same result.

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

  • I suggest testing the code out of Sopt pq for some reason is excluding some ids

Browser other questions tagged javascript modal

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