Prevent accidental close of browser window while submitting - javascript

I have a page, on which a user can submit a form, containing a video. I've placed a "please wait, uploading now" message while the video is uploading, but apparently, that isn't enough.
SO: I want to make sure that the user doesn't accidentally navigate away from the page, so I've used this code:
window.onbeforeunload = function() {
return "Please make sure, the video has finished uploading before closing this window";
};
There's just a problem: The system contains two separate .php files; a form and a upload/thank-you page. This means that if I place the code on the form, it executes the code too early (when the submit-button is pressed) and if I place it on in the send.php-file, it executes too late since the video has to upload before the head-tag is run.
Any good ideas?
P.S. A possible solution could be to place the code on the form page and call the page using AJAX and the file handling ability workaround, but I have a feeling that this workaround might have caused dropped videos - so I play it safe.

Situation solved!
I removed the submit-functionality of the button and replaced it with this:
<input type="button" name="button" id="button" value="Send video" onclick="sendInformation();" />
I then created a javascript, which was submitting the information, but at the same time, initializing the onbeforeunload-code.
document.getElementById("pleasewait").style.visibility = 'visible';
document.getElementById("myForm").submit();
window.onbeforeunload = function(e) {
return "Please make sure, the video has finished uploading before closing this window.";
};
It also has the undesired effect, that the onbeforeunload-code is invalidated, the moment the upload.php page has loaded completely - so the user isn't asked twice when closing a succesful upload.
It works flawlessly.

Can you add the JS code when the user submits the form?
<form action="upload.php">
<input type="file" name="myfile" />
<input type="submit" />
</form>
upload.php
<?php
// Validate the data, copy the file, etc.
echo '<script>window.onbeforeunload = function(e) { return "Please make sure, the video has finished uploading before closing this window"; }</script>';
?>
That should work. However, I think you should give the option to leave:
<?php
echo '<script>window.onbeforeunload = function(e) { return confirm("Do you want to leave?"); }</script>';
?>

Related

Redirect to a SubDirectory via Form Input in JavaScript

When this project was first started we thought it would be super easy but after two days of failure, we are stumped.
Environment: MacBookPro - WordPress with Thrive Themes Architect
Goal: Create a simple form that allows visitors to input the name of a subdirectory into a form that instantly redirects them to that subdirectory upon clicking on the submit button.
Purpose: When a partner gives out their website URL which includes a subdirectory name sometimes the person fails to put in the subdirectory name and they go to the main site instead. This form would make it easy for them to get to the right place so that the right partner gets proper credit.
Theories: Could the redirect be being blocked by Browser security protocols or something? Is the coding off in some way? Is the method flawed?
Three of Many Failed Coding Attempts:
<script type="text/javascript">
function Redirect(){
var subDirectory= document.getElementById("sub_directory").value;
window.location.href= "https://www.thewatercoach.com/" + subDirectory;
}
</script>
<form>
<label>www.theWaterCoach.com/</label>
<input type="text" id="sub_directory">
<button onclick="Redirect()">Submit</button>
</form>
Results: The page simply refreshes or reloads the pre-existing URL, but doesn't work at all.
<script type="text/javascript">
function Redirect(){
var subDirectory= document.getElementById("sub_directory").value;
window.location.replace(subDirectory);
}
</script>
<form>
<label>www.theWaterCoach.com/</label>
<input type="text" id="sub_directory">
<button onclick="Redirect()">Submit</button>
</form>
Results: The page simply refreshes or reloads the pre-existing URL, but doesn't work at all.
<script type="text/javascript">
function Redirect(){
var subLink = document.getElementById("sub_Link");
var subDirectory= document.getElementById("sub_directory").value;
subLink.href = "https://www.theWaterCoach.com/" + subDirectory;
subLink.click();
}
</script>
<form>
<label>www.theWaterCoach.com/</label>
<input type="text" id="sub_directory">
<button onclick="Redirect()">Submit</button>
</form>
<a id="sub_Link" href="https://www.theWaterCoach.com/">.</a>
Results: This Coding Example did work reliably with FireFox but not on Chrome or Safari. It does not work via Chrome on a PC either. For testing purposes, you can enter Becca into the text box.
Any ideas or solutions will be greatly appreciated!
The submit button is located inside a form tag. Therefore, when you click submit, the browser simply sends a GET request to your homepage. The Javascript code to redirect got executed, but then it is terminated right before the GET request is sent.
Solution: You have to prevent the form from being submitted. Find out how: read this stackoverflow question.

Including imagegrabscreen php function to a button onclick without refreshing the page

I'm trying to create a button with an onclick function that activates the imggrabscreen php function. Problem is, I've done several codes and so far the only function that I was able to use was a submit input type in which this refreshes the page. I tried using button as an input type but unfortunately, it does not save any screenshots upon clicking the button. Here's the code that I'm using so far.
if(isset($_POST['btnscreen']))
{
$im = imagegrabscreen();
imagepng($im, "screenshot.png");
}
ob_end_flush();
?>
<form method="post" action="" enctype="multipart/form-data">
<br>
<input type="submit" value="Click to Screenshot" id="btnscreen" name="btnscreen"></center>
<br><br>
</form>
php is parsed and executed server side (pre-processing) so you cannot call any php functions after the page has been sent to the browser. The only way to do this is to make a new request to the server (ajax).
I can't quite grasp what your function does (php cannot make a screenshot of what your browser is displaying as it has no information of how it has been rendered - please note different browsers may display the page differently).
I would try reading up on html5 canvas element which can achieve that (e.g. https://html2canvas.hertzen.com/).
Hope this helps

Submitting an image to Facebook with Javascript and HTML form

I’m going crazy with image upload to Facebook. I’ve tried HTML5 drag and drop methods, Dropzone.js, as well as uploading to my own server before submitting the image via PHP. But the only one I can make work (because of my inexperience, I’ll admit) and that doesn't involve uploading the image to my own server, is by using a HTML form as shown in the Facebook documentation:
<form id=“upload_form” enctype="multipart/form-data" action=“https://graph.facebook.com/event_id/photos?access_token=an_access_token” method="POST">
Please choose a photo
<input name="source" type="file"><br/><br/>
Say something about this photo:
<input name="message" type="text" value=""><br/><br/>
<input type="submit" value="Upload"/><br/>
</form>
I dynamically generate it in Javascript and use var’s to fill in event_id and access_token.
This works fine, so all my permissions and authorising are correct. Now what I’d like to do is handle the response because the browser does as you’d expect when the user clicks submit and displays basic text showing the post id and whatnot.
So, I created a button and bound the following to it’s click event:
var fd = document.getElementById('upload_form');
if (fd) {
console.log('Sending');
var XHR = new XMLHttpRequest();
XHR.addEventListener('load', function(data) {
console.log('XHR finished:');
console.log(data);
});
XHR.addEventListener('error', function(data) {
console.log('XHR ERROR:');
console.log(data);
});
var graph_url = 'https://graph.facebook.com/'+event_id+'/photos?access_token=' + access_token;
XHR.open('POST', graph_url);
XHR.send(fd);
}
Once the user has selected an image and clicks my button to execute the above XHR completes the send and reports as finished, but Facebook replies with:
(#324)Requires upload file.
Please can someone show me where I’ve gone wrong - it’s been a problem for days now!
If you willing to use jquery and jquery.ajaxForm plugin
<!-- You form code stay Make sure your form.action url is valid ajaxForm use that as url -->
<form id=“upload_form” enctype="multipart/form-data" action=“https://graph.facebook.com/event_id/photos?access_token=an_access_token” method="POST">
Please choose a photo
<input name="source" type="file"><br/><br/>
Say something about this photo:
<input name="message" type="text" value=""><br/><br/>
<input type="submit" value="Upload"/><br/>
</form>
//your javascript to upload the image togather with message
// put this in a button, not submit button
$('#upload_form').ajaxForm({
complete: function(data) {
//process fb response
}
});
I suggest you use Fiddler to catch both connections, with and without XMLHttpRequest and see which is the actual difference between both request, I don't actually know what XHR.send(fd); does, but maybe it's sending the form content itself, not submitting it?
Fiddler is a very useful tool when connecting to external APIs

How to clear a server-side html file's content, from input type button

I'm new to PHP. I want to use a (HTML) input type = button to make the content of a HTML empty.
I searched the web, if I use fopen(file.html,w+), it will clear the files content:
"w+" (Read/Write. Opens and clears the contents of file; or creates a new file if it doesn't exist)".
Source: http://www.w3schools.com/php/func_filesystem_fopen.asp
My problem is that there is probably a bit of code missing or syntax mistakes, because when I press the button nothing happens.
I really don't know and couldn't find anything on the world wide web, it's probably really simple. Sorry in advance if I wrote the question wrong.
HTML code
<input type="button" name="clearlog" id="clearlog" value="Clearlog" class="btn btn-default">
PHP code:
<?php
// clear log
if(isset($_POST['clearlog']))
{
function cleartlog()
{
$fp = fopen("log.html", 'w+');
fwrite($fp, "");
fclose($fp);
}
}
?>
The PHP code is in an external file, but is required it in my index.php.
PS: is it better to use the ftruncate function?
Source: http://www.w3schools.com/php/func_filesystem_ftruncate.asp
What you're trying to do here is far beyond the scope of your current understanding. You don't have anything associating that button to any code. Either the button needs to be part of a form that submits to a php file, or you need a javascript click event listener added to it which will then send an ajax request to the server (php) to call your php code.
Form submission directly to a php file (requires a page load) is a mostly outdated practice. Using Ajax is preferred.
The logic is simple:
Attach a javascript click event listener to the button.
The click function will send an ajax request to a page where your php code to run.
jQuery is not necessary, but with jQuery, the ajax call could be as simple as $.get('foo.php). and then whatever php code on foo.php will be executed.
You should use a form which will connect to the server and the PHP should clear the log.html file.
<form action="wipeFileContents.php">
<input type="submit" value="Clear Log File">
</form>
It will be the simplest solution, although you can go the harder AJAX way which is theoretically faster, but requires you to learn javascript.
you could try the following:
HTML
<form action='myfile.php'>
<input type="submit" value="clear">
</form>
PHP
if(isset($_POST['clear']))
{
file_put_contents("log.html", "");
}

Display confirmation popup with JavaScript upon clicking on a link

How do I make one of those hyperlinks where when you click it, it will display a popup asking "are you sure?"
<INPUT TYPE="Button" NAME="confirm" VALUE="???" onClick="message()">
I already have a message() function working. I just need to know what the input type for a hyperlink would be.
<a href="http://somewhere_else" onclick="return confirm()">
When the user clicks the link, the confirm function will be called. If the confirm function returns false, the link traversal is cancelled, if true is returned, the link is traversed.
try to click, I dare you
with the function
function confirmAction(){
var confirmed = confirm("Are you sure? This will remove this entry forever.");
return confirmed;
}
(you can also return the confirm right away, I separated it for the sake of readability)
Tested in FF, Chrome and IE
As Nahom said, except I would put the javascript:message() call directly in the href part (no need for onclik then).
Note: leaving the JavaScript call in the onClick has a benefit: in the href attribute, you can put a URL to go to if the user doesn't have JavaScript enabled. That way, if they do have JS, your code gets run. If they don't, they go somewhere where they are instructed to enable it (perhaps).
Now, your message routine must not only ask the question, but also use the answer: if positive, it must call submit() on the form to post the form. You can pass this in the call to ease the fetching of the form.
Personally, I would go for a button (input tag as you show) instead of a simple link to do the process: it would use a more familiar paradigm for the users.
[EDIT] Since I prefer to verify answers I give, I wrote a simple test:
<script type="text/javascript" language="JavaScript">
function AskAndSubmit(t)
{
var answer = confirm("Are you sure you want to do this?");
if (answer)
{
t.form.submit();
}
}
</script>
<form action="Tests/Test.html" method="GET" name="subscriberAddForm">
<input type="hidden" name="locationId" value="2721"/>
<input type="text" name="text" value="3.1415926535897732384"/>
<input type="button" name="Confirm" value="Submit this form" onclick="AskAndSubmit(this)"/>
</form>
Yes, the submit just reload the page here... Tested only in FF3.
[EDIT] Followed suggestion in the comments... :-)
???
This answer would be OK only when the click need NOT navigate the user to another page.

Categories