我希望在php脚本运行时显示进度，这样用户就不会在welcome.php中点击两次发送按钮了，但这显示处理不是点击，而是在操作完成后我的意图是这样做在动作执行时onclick。
<html>
<head>
<script>
function myFunction() {
document.getElementById("display").innerHTML = "Processing . . .";
}
</script>
</head>
<body>
<form action="ratings.php" method="post">
Insert URL :
<input type="text" name="id">
<br> Number Of Reviews:
<input type="number" name="number">
<br>
<input type="submit" onclick="myFunction()">
</form>
<p id="display"></p>
</body>
</html>
答案 0 :(得分：2)
要实现这一目标，您可以点击，显示进度条并通过AJAX.提交表单
表单的PHP处理完成后，您可以使用window.location
我认为这是最好的做法。
答案 1 :(得分：1)
Jquery版本。而不是提交按钮使用带有id的span或div。然后单击span触发代码并提交表单。
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
</head>
<body>
<form action="ratings.php" method="post" id="ratings">
Insert URL :
<input type="text" name="id">
<br> Number Of Reviews:
<input type="number" name="number">
<br>
<!-- Add css to make the span look like button -->
<span id="submit_form">Submit</span>
</form>
<span id="display"></span>
<script>
$(document).ready(function(){
// Initialize submitted with false
var submitted = false;
// Onclick Submit span.
$("#submit_form").click(function(){
$("#display").html("Processing....");
// Form is submitted.
if(!submitted)
{
// Submitting the form using its id.
$("#ratings").submit();
}
// On first click submitted will be change to true.
// On the next click the submitted variable will be as true.
// So the above if condition will not be executed after the first time.
if(!submitted)
submitted= true;
});
});
</script>
</body>
</html>
<强>更新
演示：https://jsfiddle.net/mahendranmails/c43e3utx/1/
希望它能帮到你..
<强>更新
根据@ ibad-gore的建议，您可以使用ajax处理php文件而无需重新加载页面。
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
</head>
<body>
<form action="ratings.php" method="post" id="ratings">
Insert URL :
<input type="text" name="id">
<br> Number Of Reviews:
<input type="number" name="number">
<br>
<!-- Add css to make the span look like button -->
<span id="submit_form">Submit</span>
</form>
<span id="display"></span>
<script>
$(document).ready(function(){
// Initialize submitted with false
var submitted = false;
var form=$("#ratings");
$("#submit_form").click(function(){
$("#display").html("Processing....");
// Form is submitted.
if(!submitted)
{
// Submitting the form using ajax.
$.ajax({
type:"POST",
url:form.attr("action"),
data:$("#ratings input").serialize(),//only input
success: function(response, status){
if(status=="success")
{
submitted = false;
$("#display").html("Submitted");
}
}
});
}
// On first click submitted will be change to true.
// On the next click the submitted variable will be as true.
// So the above if condition will not be executed after the first time.
if(!submitted)
submitted= true;
});
});
</script>
</body>
</html>
答案 2 :(得分：1)
试试我的回答，我测试了它并且对我来说很好，让我知道它是否符合你想要的......
@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed);
.box {
padding: 20px;
margin: 0 auto;
display: inline-block;
vertical-align: middle;
text-align: center;
border: #C0C0C0 3px solid;
border-radius: 5px;
min-width: 270px;
height: 240px;
font-family: 'Roboto Condensed', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 15px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
background-color: #006699;
}
.rating {
padding: 10px;
margin: 0 auto;
font-family: 'Roboto Condensed', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 17px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
background-color: darkviolet;
color: black;
border-radius: 5px;
border: #C0C0C0 3px solid;
box-shadow: inset -5px 5px 5px rgba(255, 255, 255, 0.15), inset 5px -5px 5px rgba(0, 0, 0, 0.15);
cursor: pointer;
}
input {
background-color: #C0C0C0;
border: 2px solid gray;
border-radius: 3px;
}
#progress {
padding: 20px;
}
.cleardiv {
clear: both;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ratings</title>
<script type="text/javascript">
function SubmitForm() {
StartProgress();
var rating = document.getElementById("rating");
rating.submit();
}
function StartProgress() {
ProgressImage = document.getElementById('progress_image');
document.getElementById("progress").style.display = "block";
setTimeout("ProgressImage.src = ProgressImage.src", 100);
return true;
}
</script>
</head>
<body>
<div class="box">
<form id="rating" action="ratings.php" method="post">
Insert URL:
<br>
<input type="text" name="id">
<br><br>
Number Of Reviews:
<br>
<input type="number" name="number">
<br><br>
<input class="rating" type="submit" name="rating" onclick="SubmitForm()" value="Rate It">
</form>
<div style="display: none" id="progress">
<img id="progress_image" src="http://www.1sttry.de/files/specials/progressbars/ProgressBar23466666.gif" alt="Task in progress...">
</div>
<div class="cleardiv"></div>
</div>
</body>
</html>
答案 3 :(得分：0)
试试这个版本的js：
<script type="text/javascript">
function ButtonClicked()
{
document.getElementById("formsubmitbutton").style.display = "none"; // to undisplay
document.getElementById("buttonreplacement").style.display = ""; // to display
return true;
}
var FirstLoading = true;
function RestoreSubmitButton()
{
if( FirstLoading )
{
FirstLoading = false;
return;
}
document.getElementById("formsubmitbutton").style.display = ""; // to display
document.getElementById("buttonreplacement").style.display = "none"; // to undisplay
}
document.onfocus = RestoreSubmitButton;
</script>
创建两个按钮并隐藏一个
<input id="buttonreplacement" style="display:none;" type="submit" Value="Processing . . .">
<input id="formsubmitbutton" type="submit" Value="Submit">