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とname：

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

例えば：http://jsbin.com/equyit/1/edit