使用javascript提交的暫停表單

我正在嘗試使用照片提交表單。在用戶加載照片後，他按下提交按鈕，我希望表單暫停10秒，爲這10秒的進度條設置動畫，然後提交表單，你們可以說我做錯了什麼，看起來不像在10秒後提交表格。下面是代碼：使用javascript提交的暫停表單

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變量不會顯示任何內容，然後頁面不會加載。

來源

2012-12-20 southpaw93

看跌'的console.log（形式）'提交表單前，它顯示了什麼？ – Barmar

它什麼也沒有顯示.. – southpaw93

確保在完全加載DOM後分配變量'form'。 – Barmar

當一個表單有一個名稱和/或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; 
}

來源

2012-12-20 09:52:22 looper

「當表單有一個提交按鈕時，form.submit（）不再工作了」 - 你能解釋爲什麼你會這麼想嗎？ – tborychowski

我試過你的方法，但現在當我點擊按鈕什麼都沒有發生......我很困惑.. – southpaw93

@tborychowski我有一部分是錯誤的;我會編輯它 – looper

我想簡化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

來源

2012-12-20 10:15:45 tborychowski

另一個問題，我看到如果我一次返回false，輸入值會丟失，我該如何避免這種情況？ – southpaw93

@CioroianuDenis它必須是別的東西。當表單被提交時，輸入被「讀取」，所以 - 在上面的例子中 - 值應該被正確地發送。「回報錯誤」無關緊要。 – tborychowski

使用javascript提交的暫停表單

回答

相關問題