如何在提交表单时使用javascript显示隐藏的div？

我并不十分熟悉jquery，但我试图获得一个简单的动画gif来显示表单何时提交。点击“提交”上传图片时，我想显示gif，以便用户知道图片正在上传。提交按钮有一个id =“提交”，并且还一个onClick =“返回确认（‘信息’）”如何在提交表单时使用javascript显示隐藏的div？

我有含有GIF股利代码：

<div id="loading" style="display:none"> 

    <img src="images/hand_timer2.gif" alt="loading" /> 

</div>

这是隐藏的。它确实表明我是否删除了这种风格。很公平。但是，当我尝试用下面的JavaScript来显示它并不显示：

<script type="text/javascript"> 

    $(function(){ 
     $('#submit').click(function(){ 
     $('#loading').show(); 

     }); 
    });

我在一个单独的PHP头文件有

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"  
type="text/javascript"></script>

。据我可以看到它是jQuery库的唯一参考，但我确实有其他JavaScript代码都可以工作。我只是无法让这个工作。任何人都可以指出我做错了什么，为什么我点击提交时无法让div显示gif？

来源

2012-12-13 user1022772

仅供参考。你正在使用一个非常旧的jQuery版本。目前的版本是1.8.3。 –

你是什么样的html？ – bobthyasian

你可以显示你的HTML代码吗？在提交函数中放置日志或警报，以便在提交表单时确保正确调用该函数。如果是，则检查以确保您的加载元素在相同范围内是正确的。 – DigTheDoug

我相信问题可能是你的内联onClick="return confirm('message')"阻止点击事件到达你的jQuery附带的点击事件监听器 - 但不确定。无论如何，我不会倾听提交按钮上的点击事件，而是倾听表单上的提交事件，当表单实际提交时会触发此事件（表单通常可以通过其他方式发布，而不是单击提交按钮 - 例如通过Enter键）。

$('#idOfYourForm').on("submit", function() { 
    $('#loading').show(); 
});

旁注：

你没有正确关闭样式属性上的负载DIV（注意到>为蓝色）：

<div id="loading" style="display:none>

来源

2012-12-13 22:49:35

这不会显示div太长时间，因为submit是向服务器发送请求，所以你需要'return false'或'e.preventDefault（）' –

谢谢Christofer。而已。这是onClick online。您的更改将其排序。谢谢。我非常感谢帮助。 – user1022772

@JuanMendes实际上，由于OP说他想要显示div，因此用户正在上传文件，因此在文件上传时可能会显示一段时间。此外，他不应该肯定不会返回false或e.preventDefault（），因为这会阻止表单被发布（我不相信OP正在做Ajax请求）。 –

如何在提交表单时使用javascript显示隐藏的div？

回答

相关问题