How to stop JavaScript alert from refreshing page? - javascript

I am teaching myself, so I apologize in advance if this is a 'newbie' question, but I have searched the internet and cannot find a solution.
So I've created a HTML form, and in that form I have added a Dropzone.js where people upload a file. When finished they click a button which saves it into a MySQL form, that all works great. The issue is when people click the button before the file finishes uploading. To counteract this issue, I've created an 'If Statement' that checks if the uploaded file exists. If it hasn't uploaded, then a JavaScript alert is triggered, which all works, but it refreshes the page, which erases all the imputed data.
// This is when the button is clicked
if(isset($_POST['Upload'])){
if (file_exists(blah blah) {
//All my MySQL stuff is in here
//If it isn't uploaded
} else {
echo '<script language="javascript">';
echo 'alert("Please upload at least one file")';
echo 'return false';
echo '</script>';
}}
Despite the 'return false'; it still resets the page?
Any help would be appreciated, thanks!

Can you show me the all code. You can do it with lots of methods i do it with validation. you can set a variable which increase on file upload. if variable value zero then return false form will not submit.
Php does not support like this echo 'return false'. you have to use JavaScript validation for this purpose.

Related

insert php into javascript

I write some html, javascript and php code that normally have to execute php code when a html button is pressed if you click on "ok" on the "confirm box", so there is my html code :
<input onclick="logout()" name="logout" type="submit" value="Logout me" />
Javascript and php code :
function logout() {
if (confirm("Are you sure you want to logout ?") == true) {
<?php echo "Hello world !"; ?>
} else {
<?php echo "Goodbye world !"; ?>
}
}
I think that the javascript code work because when i click on the html button the confirm box appear like it has to appear, but the php code is not executed.
Please if someone would help me it will be greatfull.
You can't use php in javascript because php is a serverside programming lenguage and javascript is a client side programming lenguage, so php is executed (by the server) before javascript (that is executed by the browser of the user).
You have to use Ajax requests for your needs.
Quickstart Ajax guide: https://www.w3schools.com/xml/ajax_intro.asp
Even though it is possible to write JS inside of PHP, I don't think this is the way to solve this problem. You can only (as far as I know) echo PHP values inside JS that is executed inside tags, when you write HTML inside .php files.
PHP is indeed server side and the Javascript is in this situation client side. You're thinking wrong.
First you should extract your logout functionality to a logout.php file for example. Then you could do either one of the two:
When you really want to use the logout function as a direct event listener to the onClick event on your input, your logout callback function should make an AJAX call to logout.php, which logs out your user. See the answer from #Helio to see more about AJAX.
Your input should be placed inside a <form>, which has an action attribute, that calls to your logout.php. Then when submit is called, it is available to you through the $_POST superglobal, and you can check if it is pressed. Then you simply log out the user.
That doesn't appear to be valid Javascript.
Within the Javacript function, you are dropping a PHP statement as if you were writing it to the HTML, this will not work. I'm surprised you got the dialog to popup.
PHP is a server side language and Javascript is not, therefore you should not even call PHP code like that from any kind of Javascript.
To help your curiosity, you could get away with using the document.write() function, but don't use this.
I would recommend rewriting your function to redirect to a specific PHP page.
function logout() {
if (confirm("Are you sure you want to logout ?") == true)
{
// try to avoid this....but still works
document.write('<?php echo "Hello world !"; ?>');
// try this instead
window.location.href = '/helloworld.php';
}
else
{
// try to avoid this....but still works
document.write('<?php echo "Goodbye world !"; ?>');
// try this instead
window.location.href = '/goodbyeworld.php';
}
}

how to execute a php function from a separate php file onClick

I have two php files (1.php and 2.php) linked with require
php.1 has a qr <img src="http://chart.googleapis.com/chart?chs=125x125&cht=qr&chl=<?php echo $_jattu; ?>" width="50%"> which gets its value from a string variable in 2.php $_jattu;
What I want is for <?php echo $_jattu; ?> to only echo when <a class="w3-button2 w3-black2"></a> is clicked and not when the page is loaded or refreshed, what can I do to achieve this?
This is imposible to do on the server side. Because the "onClick" event jumps on the client side when de user do the action.
You have few options.
Enable another URL for load the content of $_jattu and when the user click load it with an AJAX request. Is the best way to do it and the result is more smooth and user friendly
As you say you want to do it refreshing. So, slightly refresh the page with a new parameter on your url that tolds you that the "onClick" event has jump. Like:
.../your/path?hasClick=true
And in your php code:
if(isset($_GET["hasClick"]) && $_GET["hasClick"]){
echo $_jetty;
}
http://php.net/manual/en/reserved.variables.get.php
if you want to remember that the user has clicked "forever" you can setup a cookie.
http://php.net/manual/en/function.setcookie.php
You can use ajax. Make a request to whatever php script you want which will return $_jattu when clicking on the link. Then update your img link in javascript using the return of the ajax request.

Materializecss Toasts with PHP

So I'm making this web control panel but I'm not good with JS. I'm using MaterializeCSS + HTML + PHP for the DB login and so on.
I would like to have the following simple functionality but for some reason I'm failing.
I'd like to fill in the username and password in my form and press Log in. Since I'm not sure how Toasts work, I suppose once I switch the page the Toast actually disappears so maybe it's better to display the toast in the new Account page that opens instead of the Login page itself. I tried both but it doesn't appear.
Code to show Toast:
echo "<script> Materialize.toast('Login successful!', 3000, 'rounded') </script>";
I found a topic somewhere in Russian saying this has a problem with DOM and used its solution without success again.
Note: I already use other JS-dependent components such as Modals and Tooltips.
Console error: Uncaught ReferenceError: Materialize is not defined
I had 2 problems. Most importantly, I was testing the code in an IF that wasn't even executed. Stupid me. Secondly, I wasn't using onDocumentReady - $(function(){});
The document referrer is just to check which page sent me there but here's my working code to create a MaterializeCSS Toast from PHP:
echo "
<script>
$(function(){
if (document.referrer == 'http://yourdomain/index.php?p=Login'){
Materialize.toast('Login successful', 2200, 'rounded')
}
});
</script>";
I had the same problem with one of my PHP scripts. In the end after a lot of research I found that I had not included JQuery. Materialize CSS needs JQuery loaded before materialize.js file. Make sure that jquery is loaded. The console error shows up because JQuery is not loaded.
I tested this code on my localhost without jquery toast doesn't work but when loaded it works fine.
<?php
if (isset($_GET['msg'])){
$msg = $_GET['msg'];
echo "<script>Materialize.toast('$msg', 3000, 'rounded');</script>";
}
?>
you can put your if condition in php like this
<?php
`if (document.referrer == 'http://yourdomain/index.php?p=Login')
{
echo "
<script>
Materialize.toast('Login successful', 2200, 'rounded');
</script>";
}`
?>

Calling multiple html page from php consecutively

I am not well versed in php. I tried different answer from stackoverflow but was not successful in solving the problem.
I got a HTML form with a submit button. After submitting I call a php script and which in turn calls an executable file which runs some algorithms on the submitted data from the html. At the end I echo the result of the analysis through the php.
<?php
$ex=shell_exec("...");
if($ex == "Run Successfully\n"){
echo"<html>
<meta http-equiv= refresh content='0.1;URL=--.txt'>
</html>";
}
?>
Till this works fine but my algorithm takes 30-40 sec to run and all that time my original html page remains in screen which looks like nothing is happening there. So I created a new html page with a progress bar animation. Now I want to show the progress bar while the executable is running and when the result is available I want to replace the progress bar page with the result page as before.
I tried echo file_get_contents("waiting.html");
header ("location: waiting.html");
But none of them works as I planned. All the time they are coming up only after the executable finish working and not before that.
If someone can help me with some suggestion I shall be grateful.
Thanks in advance.
This is where jQuery and AJAX would work very nicely. What you could do is start with the loading animation, and use jQuery to call the php file with the shell_exec with ajax. Once the ajax is .done(), then you can replace the text with the results. If you need me to clarify, just let me know.
However, if you don't want to use AJAX, PHP is run line by line. Therefore, you would want to put your progress bar before the shell_exec. This would mean that you would not be able to use header location since headers have already been sent.
Edit (AJAX Example):
This would be a quick example of how to make this happen.
Create two php files:
progress.php
Load jQuery
<script type="text/javascript">
$(document).ready(function() {
$.ajax({
url:'algorithm.php',
type: 'post',
cache: false,
success: function(data) {
//Replace with how you want to format the page
}
});
});
</script>
Loading Bar
algorithm.php
<?php
$ex=shell_exec("...");
if($ex == "Run Successfully\n"){
die('{"status":"success"}');
}
?>
Now you don't have to use json as an output. You can also have html output. Let me know if I should clarify anything.

Reload parent page after submit in iframe

I have the same issue as in this question. (which has no correct answer, I just test all of them):
Reload page after submit in iframe (javascript/jquery)
What I need is very well explained there.
I have a button in a form, all this inside an iframe (same domain) and I need to reload the parent page, just after the iframe has made the whole submit process, I do not want to "cut" it or interrupt it.
UPDATE:
I kept searching and I found this. But I can't understand the code in the correct answer, is that for asp? I'm on PHP.
Reload page after submit in iframe (javascript/jquery)
http://dotnetspidor.blogspot.mx/2011/07/refresh-parent-page-partially-from.html
Once the form has been submitted in the iframe
<form method="POST" action="getForm.php">
The page reloads into getForm.php, and in that file you do:
<?php
$input = $_POST['input'];
// process form and do your stuff etc
echo "<!DOCTYPE html>";
echo "<head>";
echo "<title>Form submitted</title>";
echo "<script type='text/javascript'>window.parent.location.reload()</script>";
echo "</head>";
echo "<body></body></html>";
?>
and that would reload the parent page after the form has submitted, now the only question is, why are you submitting through an iFrame if you're going to reload the parent page anyway.
all that you need to do is add the below line,
window.parent.location.reload();
at the end of the function that is called onclick of your submit button.

Categories