Postpone przesyłanie formularza przesyłania plików, dopóki nie zostanie zatwierdzony

Question

Powiel możliwe:
Pause form submission for validation

Jest to kontynuacja this postu. Tak więc w zasadzie przesyłam plik do elementu iframe. Ale przed przesłaniem, pobieram dane z formularza i używając wbudowanego systemu django sprawdzam ich trafność (obecnie jest to po prostu fikcyjna funkcja, która przyjmuje foo: bar i zwraca json result = "true"). Używam dwóch przycisków - fałszywy widoczny, który wzywa do sprawdzenia poprawności, a drugi - ukryty, który przesyła formularz. Za pomocą poniższego kodu mogę wykonać sprawdzanie poprawności, a kiedy wynik jest pozytywny, zostanie przesłany formularz. Teraz, jeśli ustawiam hardcode dla formularza, mój alert nie zostanie pokazany i jestem prawie pewien, że przesyłanie nie zostało wykonane (niestety lista wysyłanych plików jest odświeżana co 8 godzin, więc wiem, czy to działało przez pewien czas). Jeśli cel nie jest określony, plik jest przesyłany z przekierowaniem, więc cały obiekt nasłuchujący zdarzeń "wyślij" został pominięty. Co więcej, cały ten kod nie działa w ogóle w Chrome. I zajmuje 2-3s (patrząc na firebug) pomiędzy otrzymaniem odpowiedzi z walidacji, a wyświetleniem tego, czego nigdy wcześniej nie widziałem. Naprawdę rozpaczliwie staram się, aby to działało, ponieważ już zmarnowałem 2 dni i bez żadnych rezultatów.

ogniwo próbki:

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:

debugger IE pokazuje Object doesn't support this property or method dla:

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

ponieważ korzystania addEventListener, ale nie więcej błędów. Firebug jest czysty. W przeglądarce Chrome:

"Nie można załadować zasobu" w formularzu kontrolnym. Jest to interesujące, ponieważ wynik na .../check-form/jest:

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

więc wygląda mi dobrze. Próbowałem również data.message zamiast danych ["message"], ale nic się nie zmienia.

Answer 1

Może trochę irytujące rozwiązanie, ale to jest radość z pracy z Javascriptem. Pozostaw komunikację między przeglądarką i serwerem całkowicie do JavaScript, a nie do HTML. Znaczenie:

• Podczas pisania kodu HTML, pomiń działanie; zmień przyciski przesyłania na zwykłe przyciski.
• Przeprowadź walidację przez ajax (tak jak jest teraz), a jeśli walidacja się powiedzie, wywołaj nową funkcję, która będzie zarządzać przesłaniem formularza.
• Funkcja ta forma przedstawiania wyświetli komunikat chciałeś, a potem doda akcję do formy i będzie działać form.submit();

nadzieję, że to pomaga

Answer 2

patrzeć, nie masz używać fileUploadForm.addEventListener("submit", function(){...}, false). Jest to dokładnie to, co robi i ma tę zaletę, że działa we wszystkich przeglądarkach.