setInterval and form submit

Question

I am trying to get setInterval working while a file uploads.

My html:

<form action="test.php" method="POST" enctype="multipart/form-data" id='jimbo'>
   <input type="hidden" name="<?=ini_get('session.upload_progress.name'); ?>" value="myupload" />
   <input type="file" name="file1" />
   <input type="submit" id='submitme' />
</form>

Please ignore the php session upload part of this question, that is all functioning correctly. My problem is with the jQuery. I want the setInterval() to run whilst the form is uploading. But I cannot figure out how to write that in jQuery. This is what I have:

$(document).ready(function () {
    $("#jimbo").submit(function () {
        setInterval(function() {
            $.ajax({
                url: "ajx.php",
                success: function (data) {
                    $("#feedback").html(data + Math.random(999));
                }
            });
            //$("#feedback").html("hello " + Math.random(999));
        },500);
        //return false;
    });
});

If I leave return false; in there, i get the output but no file uploading. If I remove it, I get the file uploading but no output. How can I have both ?

on success of your ajax request , submit the form with jquery — Dimag Kharab, Apr 02 '14 at 10:57

score 1 · Answer 1 · answered Apr 02 '14 at 10:59

The problem is because the browser is being redirected due to the form being submit before the file upload has completed. This is why the return false make things work - it prevents the form submission. Try hooking the event to a button click instead.

<form action="test.php" method="POST" enctype="multipart/form-data" id='jimbo'>
   <input type="hidden" name="<?=ini_get('session.upload_progress.name'); ?>" value="myupload" />
   <input type="file" name="file1" />
   <input type="button" id='submitme' />
</form>

$("#submitme").click(function () {
    setInterval(function() {
        $.ajax({
            url: "ajx.php",
            success: function (data) {
                $("#feedback").html(data + Math.random(999));
            }
        });
    }, 500);
    $('#jimbo').submit(); // submit the form manually
});

Thank you, but I'm still getting the same results :( – Chud37 Apr 02 '14 at 11:02 — Chud37, Apr 02 '14 at 11:02

score -2 · Answer 2 · edited Apr 02 '14 at 10:58

-2

Try this.

$(document).ready(function () {
       $("#submitme").click(function () {

             var refreshId = setInterval( function() 
             {
                   $.ajax({
                    url: "ajx.php",
                    success: function (data) {
                        $("#feedback").html(data + Math.random(999));
                    }
                });

             }, 500);

          });
    });

edited Apr 02 '14 at 10:58

Rakesh Sharma

13,680
5
37
44

answered Apr 02 '14 at 10:57

sajan

1,355
1
14
19

@Chud37 As you mentioned you want to run setInterval while the form is uploading. Above code would do that. – sajan Apr 02 '14 at 11:03
@sajankumar - Have you tested this code? It doesnt work. It has the same results. – Chud37 Apr 02 '14 at 11:07
@Chud37 after you got success response it should work. I want you to check the response. Are you sure you got "success" function triggered ? – sajan Apr 02 '14 at 11:17
@sajankumar - Yes I used your code above as all the vars and filenames were the same, and I got the same result. – Chud37 Apr 02 '14 at 12:46

setInterval and form submit

2 Answers2