Question

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

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

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

我该怎么做？

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

Answer 1

<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("?"));

}

Answer 2

首先将图像添加到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>

Answer 3

您可以执行以下操作 -

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

STep 3：

在Javascript中：功能提交（） { //用于显示所需时间图像的代码 //隐藏图片并提交表单 }

Answer 4

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

有一些我不明白的东西，从你的问题我可以读到你想要显示加载gif 3秒，这是非常长的，只有在那之后你才真正想要开始处理表格。 / p>

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

如果用户已禁用JS，您可以使用表单即时提交的PHP回退（用户不想等待3秒钟信任我）

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

- Sid

用JavaScript点击gif loader show

4 个答案: