How to load on-click progress bar using php
I want to show the progress while the php script is executing, so the user doesn't hit the submit button twice in the .php greeter, but this displays the processing not on click, but after the action is completed, while I intend to do it onclick while the action is running.
<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>
+3
source to share
4 answers
JQuery version. Use a range or div with an id instead of a submit button. and while the click run runs the code and submits the form.
<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>
Update
Demo: https://jsfiddle.net/mahendranmails/c43e3utx/1/
Hope this helps you.
Update
As suggested by @ ibad-gore, you can use ajax to process the php file without reloading the page.
<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>
+1
source to share
Try my answer, I tested it and worked great for me, let me know if this is how you wanted ...
@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>
+1
source to share
Try this js version:
<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>
Create two buttons and hide one
<input id="buttonreplacement" style="display:none;" type="submit" Value="Processing . . .">
<input id="formsubmitbutton" type="submit" Value="Submit">
0
source to share