Menu
I want to show progress while the php script runs so the user doesn't click the send button twice in welcome.php but this displays processing not on click but after the action is completed while my intention is to do it onclick while the action gets executed.
<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>
548
To achieve this, what you can do is on click, show the progress bar and submit your form via AJAX.
After PHP processing of the form is complete, you may move the page to another page using window.location
I guess this is the best practice given the situation.
150
Jquery version. Instead of submit button use a span or div with id. and while click span trigger the code and submit 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 it'll help you..
Update
As per suggestion of @ibad-gore you can able to 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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
