Question

I don’t know how to explain this, but I will do my best…
I am trying to submit a form normally, but the request result will be displayed at a iframe. Everything goes fine to here. What I want to do (if it is possible) is to animate the form putting a message into it (like “sending…”) ultil the iframe is load with the respose. I now this is so confuse, but take a look to my files:

index.php

I have ommited the header because is so obvius.

<form enctype="multipart/form-data" method="post" action="upload.php" target="my_iframe" id="form-upload">
    Choose your file here:
    <input name="uploaded_file" type="file"/>
    <input id="send-button" type="submit" value="Subir imagen"/>
</form>


<IFRAME name="my_iframe" SRC="upload.php" width="100%" height="200px" id="iframe1" marginheight="0" frameborder="0"></iframe>

<script type="text/javascript">
    $(document).ready(function(){
        $('#send-button').sendImage({formid: "form-upload"});
    });
</script>

upload.php

Just for testing porpuses.

<?php
if( isset($_FILES['uploaded_file']) )
    echo "image sent";

animate.js

This is where I am dealing with that. Because when I access the index.php always the message sending... is showed instance of the form elements.

var conf;

jQuery.fn.sendImage = function(args) {
    conf = $.extend( {
    }, args);


    this.on('click', function(e){
        e.preventDefault();
        $('#'+conf.formid).submit();
        $('#'+conf.formid).html('sending...');
    });

}

Answer 1

Once a form is submitted, all processing on the current page stops. Anything you do must be BEFORE you actually submit the form. You alternative is to submit via AJAX.