Ver Mensaje Individual
  #1 (permalink)  
Antiguo 10/04/2014, 16:47
Avatar de OWNED91
OWNED91
 
Fecha de Ingreso: abril-2010
Ubicación: Guatemala
Mensajes: 34
Antigüedad: 14 años, 7 meses
Puntos: 0
Problema Ajax con Formularios

Que tal compañeros, tengo un problema con el AJAX en los formularios... Ya que cuando le doy click al botón para enviar el formulario, no me funciona el AJAX ya que en vez de solo refrescarme la parte de resultados, actualiza toda la página por completo.

este es mi index.php

Código HTML:
Ver original
  1. <!DOCTYPE html>
  2. <html itemscope itemtype="http://schema.org/WebApplication">
  3.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  4.     <meta itemprop="name" content="MD5" />
  5.     <meta itemprop="description" content="" />
  6.     <meta itemprop="applicationCategory" content="Tool" />
  7.  
  8.     <title>MD5 Hash</title>
  9.    
  10.     <link type="text/css" href="css/ui-lightness/jquery-ui-1.8.22.custom.css" rel="stylesheet" />
  11.     <link type="text/css" href="html5hash.css" rel="stylesheet" />
  12.  
  13.     <script type="text/javascript" src="js/md5.js"></script>
  14.     <script type="text/javascript" src="js/jquery.min.js"></script>
  15.     <script type="text/javascript" src="js/jquery-ui.min.js"></script>
  16.     <script type="text/javascript" src="js/jquery.form.js"></script>
  17.     <script type="text/javascript" src="html5hash.js"></script>
  18.    
  19.  
  20.     <script>
  21.         // wait for the DOM to be loaded
  22.         $(document).ready(function() {
  23.             // bind 'myForm' and provide a simple callback function
  24.             $('#myForm').ajaxForm(function() {
  25.                 type: "POST",
  26.                  target: "#resultados"
  27.             });
  28.         });
  29.     </script>
  30.            
  31.   </head>
  32.  
  33. <body id="drop_zone">
  34.  
  35. function limpiar(id)
  36.         {
  37.             var li;
  38.  
  39.                 li = document.getElementById(id);
  40.  
  41.                 while(li.hasChildNodes())
  42.                 {
  43.                     li.removeChild(li.lastChild);
  44.                     document.getElementById(id).className = "ocultar";
  45.                 }
  46.         }    
  47.     <div id="centerfield">
  48.  
  49.         <header>
  50.             <fieldset id="algo_selection">
  51.                 <legend>Algorithm selection</legend>
  52.                 <form>
  53.                      <input type="checkbox" name="md5switch" checked="checked" />MD5
  54.  
  55.                 </form>
  56.             </fieldset>
  57.        
  58.             <h1>MD5</h1>
  59.  
  60.         </header>
  61.  
  62.         <article>
  63.             <ul id="list">
  64.                 <li>
  65.                     <b>File selection</b>
  66.                     <div id="placeholder">
  67.                         <b>Drop</b> files here or <b>click to browse.</b>
  68.                     </div>
  69.                     <input type="file" id="hiddenFilesSelector" multiple />
  70.                 </li>
  71.             </ul>
  72.         </article>
  73. <div id="respuesta"></div>
  74.         <aside id="explanation">
  75.             <span itemprop="description">Hashes are computed locally. No files or information on files will be uploaded.</span>
  76.         </aside>
  77.  
  78.     </div>
  79.  
  80.     <footer>
  81.     </footer>

Este genera el formulario, esta es una parte del código que se encuentra en html5jash.js...

Código Javascript:
Ver original
  1. function (file) {
  2.                     // Done
  3.                     var took = ((new Date).getTime() - start) / 1000;
  4.                     var xid = Math.random().toString(36).substr(2, 5);
  5.                     var results = '<div id="'+ xid +'" class="resultdiv">';
  6.                
  7.                     results += '<form id="myForm" action="hash.php" method="post">';                                                       
  8.                     if (doMD5){
  9.                         var md5r = md5proc.finalize();
  10.                             results +=   'MD5:'+ md5r +'<input type="hidden" name="md5" value="' + md5r + '"/></br>';
  11.                     }
  12.  
  13.                     results += '<input type="submit" class="btn_send" id="btn_enviar" value="Enviar" name="Enviar" />';
  14.                     results += '&nbsp;&nbsp;&nbsp;';
  15.                     results += "<button class='btn_remove' onclick=\"limpiar('"+uid+"')\">Remover</button>";
  16.                     results += '</form>';
  17.                     results += "</div>";
  18.                     results += '<div id="resultados"></div>';
  19.                     results += '<span class="resulttaken">Time taken: ' + digits(took, 2) + 's @ ' + bytes2si(file.size / took, 2) + '/s</span><br />';
  20.                    
  21.                     $("#" + uid).append(results);
  22.  
  23.                     $("#" + uid + " .progress")
  24.                         .hide('slow');
  25.  
  26.                     $("#" + uid)
  27.                         .css('background-color', '#F0FFF0');
  28.                 });
  29.             })();
  30.         };
  31.  
  32.     }

y lo único que me devuelve el hash.php es esto:
Código PHP:
Ver original
  1. echo ("El MD5 ha sido guardado en la BD");