Php 按下提交按钮时显示图像

我有一个为我创建的多页表单。表单上的所有页面都有将数据保存到数据库的“提交”按钮、转到上一页的“上一页”按钮和“下一页”按钮。按下保存按钮（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>

jQuery（文档）.ready（函数（$）{
$（'form'）。提交（函数（e）{
var form=此；
e、 预防默认值（）；
setTimeout（函数（）{
表单提交（）；
}，5000）；//以毫秒为单位
$（“”）。附加到（“#目标”）；
});
});

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
}


?>

---

在您的代码中，所有按钮都有submit类型，因此无论单击哪个按钮，都会导致表单提交

仅将

type=“submit”

设置为要提交表单并显示图像的按钮

演示：

这里是一个快速原型的工作演示，不是使用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以使图像仅显示在保存按钮上，但只需将事件绑定到该按钮，而不绑定到表单的

submit

事件

$（“#保存”）。单击（函数（e）{
e、 预防默认值（）；
var form=$（this）.closest（'form'）；
setTimeout（函数（）{
表单提交（）；
}，5000）；//以毫秒为单位
$（“”）。附加到（“#目标”）；
});

---

这样，就不会延迟提交上一个和下一个按钮的表单，图像和延迟只会显示在“保存”按钮上。

根据您的jQuery代码，在我看来，这三个按钮中的任何一个都会发生同样的情况。应弹出一个图像，延迟5秒，然后提交表单。这不是正在发生的事情吗？而且，让用户等待5秒钟以便他们可以阅读“保存”消息对我来说似乎不是一个好主意。我只想在按下“保存”按钮时图像弹出。我不知道该怎么做。关于你的第二条评论，我是这么想的，但是“老板”想要。看看。它几乎有你的准确代码。三个提交按钮之间应该没有区别。如果它在“上一个”和“下一个”按钮上起作用，则应在“保存”按钮上起作用。您是否要求在“保存”按钮上显示不同的图像？你现在在看什么？好的，我明白了。问题是，这三个按钮都会弹出图像，但您希望它只显示在“保存”按钮上。我将发布一个解决方案。问题中的问题与阻止表单提交无关。听起来他们希望在按下三个按钮中的任何一个时提交表单。按下不同的提交按钮将导致“status”参数的值不同，以便告知服务器按下了哪个提交按钮。我对你提交的小提琴做了修改

$('#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");
});