[Resolvido] Executar form action sem sair da página

zppinto · July 18, 2012

Boas,

Estou a tentar implementar um sistema que me associe determinadas tags num determinado timecode do vídeo. Mas cada vez que o faço, o ficheiro insert.php que escreve na base de dados os valores de tag e timecode, é executado, e o visionamento do vídeo termina tenho que retroceder para o continuar a ver.

Eu gostaria de saber qual a melhor forma para inserir esses dados sem sair página html, e como o faço.

Obrigado.

<!DOCTYPE html>
<html>
<body>
<video id="video1" controls="controls">
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
O browser não suporta HTMl5.
<div id="time"></div>
</video>
<script type="text/javascript">
myVid=document.getElementById("video1");
function getCurTime()
{
var aux = myVid.currentTime;
document.forms['form'].timecode.value = aux.toFixed(0);
document.forms['form'].submit();
}
</script>

<form name='form' action="insert.php" method="post">
Tag: <input type="text" name="tag" />
<input type="hidden" name="timecode" value=""/><p>
<button onclick="getCurTime()" type="button">Submeter</button>
</form>
</body>
</html>

Edited July 18, 2012 by zppinto

KiNgPiTo · July 18, 2012

O teu problema pode ser resolvido com javascript+ajax, facilmente com jquery:

$("#iddoform").submit(function(){

  // O form foi submetido...

  $.ajax({
    type: "POST",
    url: "insert.php",
    data: $(this).serializeArray(),
    }).done(function( msg ) {
      // Recebes aqui o output do teu insert.php
      alert("Recebido: " + msg);

      // Fazes o que quiseres com os dados que recebes (se precisares de
         retornar vários dados, sugiro que os retornas com json

    });

  return false; // Impede a mudança de página

});

Os dados do lado do insert.php são normalmente recebidos pelo post...

Edit: Para este código funcionar deves receber o jquery, insere isto no head:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

Edited July 18, 2012 by KiNgPiTo

zppinto · July 19, 2012

Obrigado pela ajuda. Contudo resolvi o problema de uma forma bem mais simples... iframe 🙂

HappyHippyHippo · July 19, 2012

Obrigado pela ajuda. Contudo resolvi o problema de uma forma bem mais simples... iframe 🙂

nãoooooooooooooooooooooooooooooooooooooo

zppinto · July 19, 2012

😕 Que fiz eu?

HappyHippyHippo · July 19, 2012

iframe

zppinto · July 19, 2012

Pois, mas o código do KingPito não resulta. O refresh é feito e eu perco o timecode onde me encontrava e o vídeo é reiniciado.

O iframe resolvia-me este problema e estava funcional... Mas já agora qual o problema de usar iframe?

HappyHippyHippo · July 20, 2012

se tens refresh é por uma de duas razões : ou não tens o return false ou tens um erro no javascript que para a execução e segue o submit do formulário ... agora escolhe

zppinto · July 20, 2012

Desculpem a ignorância, mas não consigo descobrir o gato 😞

<!DOCTYPE html>
<html>
<body>
<video id="video1" controls="controls">
 <source src="movie.mp4" type="video/mp4" />
 <source src="movie.ogg" type="video/ogg" />
 O browser não suporta HTMl5.
<div id="time"></div>
</video>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript">
$("form").submit(function(){
  // O form foi submetido...
  $.ajax({
 type: "POST",
 url: "insert.php",
 data: $(this).serializeArray(),
 }).done(function( msg ) {
   // Recebes aqui o output do teu insert.php
   alert("Recebido: " + msg);
 });
  return false; // Impede a mudança de página
});
</script>
<script type="text/javascript">
myVid=document.getElementById("video1");
function getCurTime()
 {
 var aux = myVid.currentTime;
 document.forms['form'].timecode.value = aux.toFixed(0);
 document.forms['form'].submit();
 }
</script>
<form id='form' name='form' method="post">
Tag: <input type="text" name="tag" />
<input type="hidden" name="timecode" value=""/><p>
<button onclick="getCurTime()" type="button">Submeter</button>
</form>
</body>
</html>

HappyHippyHippo · July 20, 2012

assim de repente (acho que somente o IE é que não come isto)

        data: $(this).serializeArray(), /* tens uma virgula a mais */
        }).done(function( msg ) {

KiNgPiTo · July 20, 2012

Os gatos são tantos, mas fica aqui algumas modificações...

@HappyHippyHippo: Com a ultima versão do IE (talvez ultimas) nunca tive problemas com o serializeArray(), mas fica directamente então...

<!DOCTYPE html>
<html>
<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">

$(document).ready(function() {

   function getCurTime(){
        var myVid=document.getElementById("video1");
        return myVid.currentTime;
   }

   $("#form").submit(function(){

      /* Isto para que não precises do hidden, do outro lado recebes na mesma
         pelo post o valor do campo timecode pelo $_POST["timecode"]
      */
      var curTime = getCurTime();

      $.ajax({
            type: "POST",
            url: "insert.php",
            data: {
                tag: $("#tag").val(),
                timecode: curTime
                }
            }).done(function( msg ) {
              // Recebes aqui o output do teu insert.php
              alert("Recebido: " + msg);
            });

      return false; // Impede a mudança de página
   });

});

</script>

</head>
<body>

   <video id="video1" controls="controls">
         <source src="movie.mp4" type="video/mp4" />
         <source src="movie.ogg" type="video/ogg" />
         O browser não suporta HTMl5.
       <div id="time"></div>
   </video>

   <form id='form' name='form' method="post">
         Tag: <input type="text" name="tag" id="tag" />
         <p><input type="submit" value="Submeter" /></p>
   </form>

</body>
</html>

HappyHippyHippo · July 20, 2012

@HappyHippyHippo: Com a ultima versão do IE (talvez ultimas) nunca tive problemas com o serializeArray(), mas fica directamente então...

o que eu disse foi que o IE não gosta de virgulas extra

exemplo:

/* erro so no IE */
var array = {1, 2, 3, 4,};

ps : nunca usei o $.ajax().done() ... isso corre bem quando existe erro de resposta ??

não seria melhor usar isto:

$.ajax({
 url: url,
 success: function(data, textStatus, jqXHR) {
   /* success action */
 },
 error: function(jqXHR, textStatus, errorThrown) {
   /* error action */
 }
});

Edited July 20, 2012 by HappyHippyHippo

KiNgPiTo · July 20, 2012

Ah ok, my bad 🙂

zppinto · July 20, 2012

Muito obrigado pela ajuda 😉

[Resolvido] Executar form action sem sair da página

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Important Information