1

我有一个 HTML 输入按钮，它在单击时提交一个 PHP 表单。代码如下：

<input class="rg_btn" name="submit" value="Register" type="submit" />

但是，当用户单击该按钮时，我希望它在页面中间显示加载图像 3 秒（我有 gif 文件），然后我希望表单实际处理。

我该怎么做？

就像点击立即购买时http://www.mega.co.nz/#pro所做的一样

4

4 回答 4

1

首先将图像添加到您的 html 并使用 CSS 将其隐藏：

 <img src="3sec.gif" id="gif" style="display: none;">

然后，使用 jQuery：

 $('.rg_btn').submit(function() {
     $('#gif').show(); 
     return true;
 });

如果您还没有 jQuery，也不要忘记在标题标签之间包含它：

 <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
于 2013-10-16T18:05:08.883 回答
0 
<input class="rg_btn" name="submit" value="Register" type="submit" onclick='btnClick' />


function btnClick() {

    var Gif = document.createElement('div');

    Gif.className = "?";

    Gif.innerHTML = "<img src='some_img' />";

    document.appendChild(Gif);


    setTimeout("btnClickfade()", 3000);

}

function btnClickfade() {

     document.removeChild(document.getElementByClassName("?"));

}
于 2013-10-16T18:03:15.520 回答
0

您可以执行以下操作 -

第 1 步：不要创建提交按钮，而是创建一个标准按钮 第 2 步：当用户单击 taht 按钮时，调用一个函数，将其命名为 submitme

第 3 步：

在 Javascript 中： function submitme() { //显示图像所需时间的代码 //隐藏图像并提交表单 }

于 2013-10-16T18:05:33.540 回答
0

为此，您必须创建一个触发 onclick 按钮的函数，该函数使用event.preventDefault(); 取消默认行为（提交表单）；之后，您将设置基本上附加一个 div 到正文，居中加载 gif（通过 CSS）将显示 3 秒，您也可以预先插入 DIV，这样您就不必再附加它了。

有几件事我不明白，从你的问题我可以读到你想显示一个加载 gif 3 秒，这非常长，只有在那之后你才真正想要开始处理表单。

对于这种情况，我强烈建议使用 AJAX 透明地处理您的请求，例如不重新加载页面，提交时不延迟 3 秒。

如果用户禁用了 JS，您可以使用 PHP 回退，表单会立即提交（用户不会希望等待 3 秒相信我）

这可能是最用户友好的方式，如果您对如何使用纯 JS 实现 AJAX 请求有疑问，请评论此问题，我将根据您的需要对其进行编辑。

- 席德

于 2013-10-16T18:07:43.347 回答