Jump to content

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


zppinto

Recommended Posts

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 by zppinto
Link to comment
Share on other sites

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 by KiNgPiTo
Link to comment
Share on other sites

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>
Link to comment
Share on other sites

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>
  • Vote 1
Link to comment
Share on other sites

@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 by HappyHippyHippo
IRC : sim, é algo que ainda existe >> #p@p
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.