0

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


?>
4

3 回答 3

0

In your code all buttons have the type submit, hence it causes the form to submit irrespective of the button you click.

make type="submit" only to that button for which you want to submit the form and show the image.

于 2013-04-15T13:19:29.880 回答
0

要使图像仅显示在 Save 按钮上，只需将事件绑定到该按钮，而不是表单的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 按钮中显示。

于 2013-04-15T13:51:58.747 回答
0

演示：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

于 2013-04-15T13:39:27.547 回答