使用javascript提交的暂停表单

Question

我正在尝试使用照片提交表单。在用户加载照片后，他按下提交按钮，我希望表单暂停10秒，为这10秒的进度条设置动画，然后提交表单，你们可以说我做错了什么，看起来不像在10秒后提交表格。 下面是代码：

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; 
} 




?> 

我可以告诉大家，表单不会被提交什么事实上，PHP变量不会显示任何内容，然后页面不会加载。

Answer 1

当一个表单有一个名称和/或id为“submit”的按钮时，它将不再工作（我的旧帖子是错误的）。

所以，你需要做的是改变按钮的名称/ ID：

<input type="submit" name="submit-button" id="submit-button" value="Upload" /> 

记住：你需要改变你的PHP，太：

if ($_POST['submit']) 
{ 
    $title = $_POST['title']; 
    $theme = $_POST['picture_theme']; 
    echo $title," ",$theme; 
} 

到

if ($_POST['submit-button']) 
{ 
    $title = $_POST['title']; 
    $theme = $_POST['picture_theme']; 
    echo $title," ",$theme; 
} 

Answer 2

我想简化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(); 
} 

和 - 当然 - 删除（或更改）的ID名称从提交按钮，如：

<input type="submit" value="Upload" /> 

如：http://jsbin.com/equyit/1/edit