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＆lt; 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");
});

这样，提交prev和next按钮的表单就没有延迟了，图像和延迟只会显示在Save按钮上。

按下提交按钮时显示图像

3 个答案:

jsFiddle