Ir para conteúdo
Fórum Script Brasil
  • 0

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


yukimisakurai

Pergunta

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!
Link para o comentário
Compartilhar em outros sites

1 resposta a esta questão

Posts Recomendados

  • 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

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152k
    • Posts
      651,8k
×
×
  • Criar Novo...