Postpone file uploading form submission until it is validated [duplicate]

This question already has answers here: Closed 12 years ago.

Possible Duplicate:

Pause form submission for validation

It's a continuation of this post. So basically I'm uploading a file in an iframe. But before submitting, I grab data from the form and using django's built-in system check their validity (currently it's just a dummy function that takes foo: bar, and returns json result = "true" ). I use two buttons - fake visible, that calls validation and second - hidden, that submits the form. With the code below I'm able to perform validation, then when it's result is positive form is submitted. Now if I hardcode target for form, my alert is not shown and I'm pretty sure that the upload is not performed (unfortunately list of uploads is refreshed each 8h so I'll know if it worked in some time). If the target is not specified, file is uploaded with redirect so the whole 'submit' event listener is omitted. What more, tho whole code doesn't work at all in Chrome. And it takes like 2-3s (looking at firebug) between receiving response from validation, and displaying it which I've never seen before. I'm really desperate on making it work, since I've already wasted 2 days and without any results.

Sample link:

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");
          开发者_StackOverflow  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:

IE's debugger shows Object doesn't support this property or method for:

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

because of using addEventListener, but no more errors. Firebug is clean. In Chrome :

"Failed to load resource" at check-form. This is interesting, since the result at .../check-form/ is :

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

so looks fine to me. Tried also data.message instead of data["message"] but nothing changes.

---

Maybe a little bit of an annoying solution, but that's the joy of working with Javascript. Leave the communication between browser and server completely up to Javascript, and not to HTML. Meaning:

• When you write your HTML, leave out the action; change the submit buttons to regular buttons.
• Run validation via ajax (as is done now), and if the validation is successful call a new function which will manage the form submition.
• This form-submitting function will display the message you wanted, and after that will add the action to the form, and will run form.submit();

Hope this helps

---

Look, you don't have to use fileUploadForm.addEventListener("submit", function (){...}, false). This is exactly what $(fileUploadForm).submit(function (){...}) does, and it has the advantage of working across all browsers.