• 0
Sign in to follow this  
yukimisakurai

Atualizar um formulário e div de uma página clicando em botão

Question

Tenho uma página que possui um formulário e uma imagem. Este formulário é composto por 3 botões que acessam "dicas", um campo para resposta, e botão para
"Verificar Resposta" e "Próxima Pergunta", e um campo "Pontuação".
Bom, ao clicar nas dicas ele mostra corretamente, e também a função de verificar a resposta está ok. Porém isto só ocorre uma vez e para responder outra
questão é necessário então atualizar a página (este é o meu problema).
Preciso que ao clicar em próxima pergunta o seja atualizada a imagem (volte para a
original) e o formulário, de modo que o usuário possa novamente selecionar dicas e responder.
Tentei de duas maneiras:
1: Atualizar as divs com uma função javascript, mas neste caso volta "visivelmente" ao normal, porém ao clicar nos botões ele não chama mais as funções.
2: Atualizar o formulário, porém assim não tem como verificar a resposta em ajax que é enviada e a figura também não muda.
Códigos javascript:
<script>


    function loadXMLDoc(dicaSel)
    {
    //busca a mostra a dica
    }


    //função para verificar a resposta do usuário
    function verificarResposta(){
    //verifica a resposta 
    }


    function atualizarPontuacao(resultado){
    //Atualiza a pontuação


    }


    //ir para a próxima questão sem atualizar a página (Não funciona)
    function atualizarQuestao(){
        //Atualizar imagem
        var image = document.getElementById('myImage');
        image.src = "img/imagem1.jpg";
        //Atualizar dica 1
        document.getElementById("dica1").innerHTML="<label>Clique no botão para visualizar esta dica</label>";
        //Atualizar dica 2
        document.getElementById("dica2").innerHTML="<label>Clique no botão para visualizar esta dica</label>";
        //Atualizar dica 3
        document.getElementById("dica3").innerHTML="<label>Clique no botão para visualizar esta dica</label>";
        //Atualizar resposta
        //document.getElementById("divResposta").innerHTML="Resposta: <input type="text" size="30"  name="chute"/><";
    }


    function changeImage() {
    //Muda a imagem
    }


    </script>
Trecho do html:
<div class="col-md-6">
      <center>
        <img id="myImage" class="img-responsive img-border-left" src="img/imagem1.jpg" alt="" width="220px" height="220px">
      </center>
      <!--<center><img id="myImage" onclick="changeImage()" src="pic_bulboff.gif" width="100" height="180"></center>-->
    </div>
    <div class="col-md-6">
      <form name="form" onsubmit="verificarResposta()" method="post" action="#">
        <table>
          <div id="divDaDica1">
            <tr>
              <td>
                <input onclick="loadXMLDoc('dica1')" type="button" value="Dica 1" onmouseover="style.color = '#FF0000'" onmouseout="style.color = ''" />&nbsp;&nbsp;
              </td>
              <td>
                <div id="dica1">
                  <label>Clique no botão para visualizar esta dica</label>
                </div>
              </td>
            </tr>


          </div>
          <div id="divDaDica2">
            <tr>
              <td>
                <input onclick="loadXMLDoc('dica2')" type="button" value="Dica 2" onmouseover="style.color = '#FF0000'" onmouseout="style.color = ''" />&nbsp;&nbsp;
              </td>
              <td>
                <div id="dica2">
                  <label>Clique no botão para visualizar esta dica</label>
                </div>
              </td>
            </tr>


          </div>
          <div id="divDaDica3">
            <tr>
              <td>
                <input onclick="loadXMLDoc('dica3')" type="button" value="Dica 3" onmouseover="style.color = '#FF0000'" onmouseout="style.color = ''" />&nbsp;&nbsp;
              </td>
              <td>
                <div id="dica3">
                  <label>Clique no botão para visualizar esta dica</label>
                </div>
              </td>
            </tr>


          </div>
        </table>


        <!--A questão é: enviar o formulário sem atualizar a página!!-->


        <div id="divResposta">Resposta:
          <input type="text" size="30" name="chute" />
        </div>
        </br>
        </br>
        <input onclick="verificarResposta()" type="button" name="arriscar" value="Arriscar!" onmouseover="style.color = '#FF0000'" onmouseout="style.color = ''" />&nbsp;&nbsp;
        <input type="button" value="Desistir!" onmouseover="style.color = '#FF0000'" onclick="alert('O número que eu escolhi foi: ' + numeroSecreto + '. Pena que você desistiu! Tente novamente, eu vou pensar em outro número, OK?'); Pensar()" />
        <div id="divPontuacao">
          <align="right">Pontuação:
            <input type="text" size="10" name="pontuação" placeholder="100" readonly="readonly" />
        </div>
        </br>
        </br>
        </align>
        <input type="button" onclick="atualizarQuestao()" value="Próxima Questão">
      </form>
Obrigado!

Share this post


Link to post
Share on other sites

1 answer to this question

Recommended Posts

  • 0

para o caso 2:

Pode colocar a informação num SESSION e pegar ela quando atualizar a página

Para o caso 1:

Já passei por isso antes, o problema é o lugar do JavaScritpt.

Se ta no final, coloca no inicio.

A função também pode ser criada e executada por uma tag script de dentro do php

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this