Pause form from submitting with javascript - php

Question

I am trying to do a submit form with photos. After the user loads the photos he presses the submit button, I want the form to pause for 10 seconds, animate a progress bar for those 10 seconds and then submit the form, can you guys say what I did wrong, it doesn't seem to submit the form after 10 seconds.
Here is the code:
HTML:
<form action="uploadpic.php" method="post" id="upload_form">
<input type="text" name="title" id="title">
<p id="title_p">Title</p>
<hr />
<input type="text" name="theme" id="picture_theme" size="40"/>
<p id="theme">Picture Theme<img src="../simages/info.gif" id="info" width="12" height="12" style="margin-left:10px;"></p>
<hr />
<div class="custom-upload">
<input type="file" name="picture" id="true_pic" />
<div class="fake-file">
<input disabled="disabled" >
</div>
</div>
<p id="upload_pic">Upload picture</p>​
<input type="submit" name="submit" id="submit" value="Upload" />
</form>
JAVASCRIPT:
form = document.getElementById("upload_form");
size=1;
form.onsubmit = function()
{
if (size < 10)
{
setTimeout(delayedSubmit,1000);
}
return false;
}
function delayedSubmit() {
size++;
if (size<5)
{
setTimeout(delayedSubmit,1000);
alert("Counting "+size);
}
else
{
alert("Form submitted");
form.submit();
}
}
PHP :
<?php
if ($_POST['submit'])
{
$title = $_POST['title'];
$theme = $_POST['picture_theme'];
echo $title," ",$theme;
}
?>
I can tell that the form won't submit anything by the fact that the php variables won't show anything, and then page doesn't load.

Answer 1

When a form has a button with the name and/or id "submit", it won't work anymore (my old post was wrong).
So what you need to do is to change the name/id of the button:
<input type="submit" name="submit-button" id="submit-button" value="Upload" />
Remember: You need to change your PHP, too:
if ($_POST['submit'])
{
$title = $_POST['title'];
$theme = $_POST['picture_theme'];
echo $title," ",$theme;
}
to
if ($_POST['submit-button'])
{
$title = $_POST['title'];
$theme = $_POST['picture_theme'];
echo $title," ",$theme;
}

Answer 2

I'd simplify the javascript:
form = document.getElementById("upload_form");
size=0;
form.onsubmit = delayedSubmit;
function delayedSubmit () {
if (++size < 5) {
alert("Counting "+size);
setTimeout(delayedSubmit,1000);
return false;
}
alert("Form submitted");
form.submit();
}
And - of course - remove (or change) id and name from the submit button, e.g:
<input type="submit" value="Upload" />
e.g.: http://jsbin.com/equyit/1/edit