Update form and div data from the same page by clicking a button

2

I have a page that has a form and an image. This form consists of 3 buttons that access "tips", a field for response, and button for     "Check Answer" and "Next Question", and a "Score" field.

Well, clicking on the tips it shows correctly, and also the check function is OK. But this only happens once and to answer another     issue then you need to refresh the page ( this is my problem ).

I need to update the image when I click next question (go back to the     original) and the form, so that the user can again select tips and respond.

I tried two ways:

  • Refresh the divs with a Javascript function, but in this case it "visibly" returns to normal, but clicking the buttons does not call the functions anymore.
  • Refresh the form, but you can not check the response in Ajax that is sent and the figure also does not change.
  • Javascript Codes:

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

    HTML snippet:

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

    The question is: submit the form without refreshing the page!

    <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>
    
        
    asked by anonymous 09.05.2015 / 07:10

    0 answers