按下提交按鈕時顯示圖像

Question

我有一個為我創建的多頁表單。 表單上的所有頁面都有“提交”按鈕（將數據保存到數據庫），“上一個”按鈕轉到上一頁和“下一個”按鈕。 按下保存按鈕（id =“ save”）時如何顯示圖像？ 現在，當按下任一按鈕時，圖像彈出。 我是jQuery新手，因此非常感謝您的幫助。 謝謝！

jQuery的

<script>
jQuery(document).ready(function($) {
  $('form').submit(function (e) {
   var form = this;
   e.preventDefault();
   setTimeout(function () {
    form.submit();
  }, 5000); // in milliseconds

  $("<img src='/wp-content/uploads/2013/04/saving.gif'>").appendTo("#target");
   });
});
</script>

的PHP

<div id="target"></div>
<input type="submit" name="status" value="Prev" />
<input type="submit" name="status" id="save" value="Save" />
<input type="submit" name="status" value="Next" />

<?php

if(!empty($_REQUEST['status']) && $_REQUEST['status'] == 'Prev'){
  //save data and redirect to previous page using header();
}

if(!empty($_REQUEST['status']) && $_REQUEST['status'] == 'Next'){
  //save data and redirect to next page using header();
}

if(!empty($_REQUEST['status']) && $_REQUEST['status'] == 'Save'){
  //save data and do whatever you want
}


?>

Answer 1

在您的代碼中，所有按鈕的類型均為“提交”，因此無論您單擊的按鈕如何，都會導致表單提交。

僅對要提交表單並顯示圖像的按鈕執行type="submit" 。

Answer 2

演示： http ： //jsfiddle.net/esMn2/1/

這是一個快速樣機的工作演示，不使用jQuery，而是讓您了解如何完成此工作。

prev = document.getElementById('prev');
save = document.getElementById('save');
next = document.getElementById('next');
form = document.getElementById('form');

prev.addEventListener('mousedown', function(e) {
    e.preventDefault();
    alert('Did nothing');
});

save.addEventListener('mousedown', function(e) {
    e.preventDefault();
    showLoading();
});

next.addEventListener('mousedown', function(e) {
    e.preventDefault();
    alert('Did Nothing');
});

function showLoading() {
    var load = document.createElement('img');
    load.src = "http://www.henley-putnam.edu/Portals/_default/Skins/henley/images/loading.gif";

    document.getElementById('target').appendChild(load);

    setTimeout(function() {
        form.submit();
    }, 5000);
}

使用jQuery盡管您將支持IE <9，因為他們知道使用attachEvent而不是addEventListener

Answer 3

要使圖像僅顯示在“保存”按鈕上，只需將事件綁定到該按鈕，而不綁定到表單的submit事件。

jsFiddle

$('#save').click(function(e) {
    e.preventDefault();
    var form = $(this).closest('form');

    setTimeout(function () {
        form.submit();
    }, 5000); // in milliseconds

    $("<img src='/wp-content/uploads/2013/04/saving.gif'>").appendTo("#target");
});

這樣，提交上一個和下一個按鈕的表單將不會有任何延遲，並且圖像和延遲將僅對於“保存”按鈕顯示。