在 php 脚本完成后恢复提交按钮
Restoring submit button after php script finishes
我正在使用带有PHP的Ajax将数据发布到PHP并将输出发送到我的当前页面而不加载它,我使用提交按钮发送数据,当单击此按钮时,我将此按钮替换为加载.gif。现在,在 php 脚本完成后,我得到了输出,加载.gif继续显示。我的问题是如何在 PHP 脚本完成后恢复提交按钮,并且我想在不刷新页面的情况下提交更多数据?
编辑:
形式.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>JQuery Form Example</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#myform").validate({
submitHandler: function(form) {
// do other stuff for a valid form
$.post('process.php', $("#myform").serialize(), function(data) {
$('#results').html(data);
});
}
});
});
</script>
<script type="text/javascript">
function ButtonClicked(){
document.getElementById("formsubmitbutton").style.display = "none"; // to undisplay
document.getElementById("buttonreplacement").style.display = ""; // to display
return true;
}
</script>
</head>
<body>
<form name="myform" id="myform" action="" method="POST">
<!-- The Name form field -->
<label for="name" id="name_label">Name</label>
<input type="text" name="name" id="name" size="30" value=""/>
<br>
<!-- The Email form field -->
<label for="email" id="email_label">Email</label>
<input type="text" name="email" id="email" size="30" value=""/>
<br>
<!-- The Submit button -->
<div align="center" style="margin-bottom:-100px;" id="formsubmitbutton"><input type="submit" value="Submit" onclick="ButtonClicked()" /></div>
<center><div id="buttonreplacement" style="display:none;">
<img src="http://redscopestudios.com/wp-content/uploads/edge_suite/project/red-scope_6/images/red_loader.gif"alt="loading..."></div></center>
</form>
<!-- We will output the results from process.php here -->
<div id="results"><div>
</body>
</html>
过程.php
<?php
print "Form submitted successfully: <br>Your name is <b>".$_POST['name']."</b> and your email is <b>".$_POST['email']."</b><br>";
?>
因此,
如果我正确理解您想要什么,您可以执行以下操作:
submitHandler: function(form) {
// do other stuff for a valid form
$("#formsubmitbutton").hide();
$("#buttonreplacement").show();
$.post('process.php', $("#myform").serialize(), function(data) {
$('#results').html(data);
$("#formsubmitbutton").show();
$("#buttonreplacement").hide();
});
}
然后删除 ButtonClicked 方法,如果您已经挂接到表单提交事件,则不需要它。
$('button').fadeOut();
然后在 ajax 完成后(在回调中)
$('button').fadeIn();
这会淡化我们的按钮,然后将其淡入。更换按钮不是必需的,也不应该这样做。
相关文章:
- Javascript生成的表单未提交
- 将输入字段中的文本提交到我的数据库,同时将其添加到我的列表中
- HTML表单提交时未执行外部函数
- 在POST中将html表作为csv提交
- 我应该使用Ng提交还是点击表格
- 为什么不是't窗口.恢复正常工作吗?(javascript/jquery)
- 我想使用模态通过php文件发送邮件,并且我希望在提交关闭后关闭pop
- 提交后保留下拉选择的值
- 如何临时暂停浏览器渲染,然后恢复整个页面
- 键入最后一位数字后自动提交
- 阻止表单元素提交
- JS表单提交"无法使用Chrome数据保护程序加载此页面.尝试重新加载页面.调试信息:POST CISmtuK
- Jquery提交表单而不刷新
- 将图像上传ajax与表单提交ajax相结合
- NodeJS-readline暂停和恢复事件发射器(逐行读取)
- 在 php 脚本完成后恢复提交按钮
- 通过按钮/类型=“提交”行为恢复默认表单提交
- 如何防止在提交表单后恢复到上一个选项卡
- form获胜't通过jQuery正确提交,并恢复到默认行为
- 关于javascript调用表单提交和恢复按钮