Posponer archivo de formulario carga presentación hasta que se valida

Question

Duplicar posible:
Pause form submission for validation

Es una continuación de this puesto. Básicamente, estoy cargando un archivo en un iframe. Pero antes de enviar, tomo datos del formulario y usando el sistema incorporado de django compruebo su validez (actualmente solo es una función ficticia que toma foo: bar, y devuelve json result = "true"). Uso dos botones: falso visible, que valida las llamadas y segundo oculto, que envía el formulario. Con el código a continuación, puedo realizar la validación, y luego, cuando el resultado es positivo, se envía la forma. Ahora si codigo el objetivo para el formulario, mi alerta no se muestra y estoy bastante seguro de que no se realiza la carga (desafortunadamente la lista de cargas se actualiza cada 8h, así sabré si funcionó en algún momento). Si no se especifica el objetivo, el archivo se carga con la redirección de modo que se omite todo el proceso de escucha 'de envío'. Además, todo el código no funciona en absoluto en Chrome. Y toma como 2-3s (mirar firebug) entre la recepción de la respuesta de la validación, y mostrarlo que nunca he visto antes. Estoy realmente desesperado por hacer que funcione, ya que he perdido 2 días y sin ningún resultado.

enlace de la muestra:

http://ntt.vipserv.org/artifact/

JS:

<script> 
    $('#fake_upload_submit').click(function(e){ 
     e.preventDefault(); 

     var fileUploadForm = document.getElementById('file_upload_form'); 
     fileUploadForm.addEventListener("submit", function() { 
      alert("sent in iframe"); 
      fileUploadForm.target = 'upload_target'; 
     }, false);  

     $.ajax({ 
      type: "POST", 
      url: '/artifact/upload/check-form/', 
      data: 'foo=bar', 
      dataType: "json", 
      success: function(data){ 
       if(data['result'] == "true"){ 
        $("#message").show(); 
        $("#message").fadeIn(400).html('<span>'+data["message"]+'</span>'); 
        setTimeout(function(){ 
         $("#message").fadeOut("slow", function() { 
          $("#message").hide(); 
         }); 
        }, 1500); 

        fileUploadForm.submit(); 

       } 
       else{ 
        $("#message").show(); 
        $("#message").fadeIn(400).html('<span">Response false</span>'); 
        setTimeout(function(){ 
         $("#message").fadeOut("slow", function() { 
          $("#message").hide(); 
         }); 
        }, 1500);      
        return false; 
       } 
      } 
     }); 
     return false;   
    }); 
</script> 

html:

<div id="message" style="background:black; width:400px; height:80px; display:none; color:white;"> 
</div> 
<h1>Submit</h1> 
<form action="{{upload_url}}" method="POST" target="" id="file_upload_form" enctype="multipart/form-data"> 
    {% render_upload_data upload_data %} 
    <table>{{ form }}</table>  
    <p> 
     <input type="hidden" maxlength="64" name="myfileid" value="{{ myfileid }}" > 
    </p> 
    <p> 
     <input type="submit" style="display:none" id="true_upload_submit" value="Submit" /> 
    </p>  
    <iframe id="upload_target" name="upload_target" src="" style="width:0;height:0;border:0px solid #fff;"></iframe> 
</form> 
    <p> 
     <input type="submit" id="fake_upload_submit" value="Submit" /> 
    </p> 

---

EDIT:

depurador de IE muestra Object doesn't support this property or method para:

fileUploadForm.addEventListener("submit", function() { 
     alert("sent in iframe"); 
     fileUploadForm.target = 'upload_target'; 
    }, false); 

debido mediante addEventListener, pero no hay más errores. Firebug está limpio. En Chrome:

"No se pudo cargar el recurso" en el formulario de verificación. Esto es interesante, ya que el resultado al .../check-forma/es:

{ 
message: "Response = True" 
result: "true" 
} 

así se ve muy bien a mí. Probé también data.message en lugar de data ["mensaje"] pero nada cambia.

Answer 1

Quizás sea una solución un poco molesta, pero esa es la alegría de trabajar con Javascript. Deje la comunicación entre el navegador y el servidor completamente a Javascript y no a HTML. Significado:

• Cuando escribe su código HTML, omita la acción; cambie los botones de enviar a botones normales.
• Ejecute la validación mediante ajax (como se hace ahora), y si la validación es exitosa, llame a una nueva función que administrará la submición de formulario.
• Esta función forma de presentación mostrará el mensaje que quería, y después de que se sumará a la acción de la forma, y ​​se ejecutará form.submit();

Esperanza esto ayuda

Answer 2

Mire, usted no tiene para usar fileUploadForm.addEventListener("submit", function(){...}, false). Esto es exactamente lo que $(fileUploadForm).submit(function(){...}) hace, y tiene la ventaja de funcionar en todos los navegadores.