Develop Reference

Adding additional function to exit page popup message

I want to add an additional function to a basic plain javascript exit page popup. Basically, I have my page set up so when a user tries to exit the page a message will appear saying "do you really want to leave" with the options "OK" and "Cancel". I want to set it up so when the user clicks OK it will redirect them to another website. I don't have a lot of experience coding so I'm not sure if this is possible. Here is the code that I'm using:
<h1 id="home">Warn before leaving the page</h1>
<script>
// Warning before leaving the page (back button, or outgoinglink)
window.onbeforeunload = function() {
return "Do you really want to leave?";
//if we return nothing here (just calling return;) then there will be no pop-up question at all
//return;
};
</script>
<a href="http://google.com/</a>
Any help will be appreciated, Thanks!

This is something you should avoid doing because it is bad user experience. Also this is a repeat of this post.

How can I prevent the JavaScript Prompt Leaving site From Appearing

Hey guys I am trying my best to figure it out how to remove the Javascript prompt/confirm that says "Do you want to leave this site?" like this:
https://prnt.sc/famast
Basically what's happening here is that when a modal got opened and the user click on "YES" it will redirect to a page. But I don't want the JavaScript confirmation but just redirect it to that page.
Any idea if you know some scripts that could make it happen?
Please help!

As other said above me, you can do it with onbeforeunload:
window.onbeforeunload = function() {
return '';
// The browser shows a pre-defined message so you don't have to write your own
}
You can also use addEventListener, in this way:
window.addEventListener('beforeunload', function() {
return '';
});
See an example (Link updated)

Detect if tag is in URL and then remove hidden class

I have a form on my contract form, which submits to a third party site and then I can define a URL to return the user to. I currently return the user to the same /contact page but I wanted to give them a message that it had submitted (since ajax forms don't work with the third party) and I don't want to have a whole page for it.
Therefore I had the idea to return the user to /contact#thanks
I have some code on my site which goes like this:
<div id="alert" class="hidden">Form Submitted. We will reply soon.</div>
Now I want a small bit of javascript on my page which detects if the URL has the #thanks tag on it, as above, and then removes the hidden class from my alert div. Is javascript able to detect this and if so, how do I go about it?

Include jquery and script. I test and work
$(document).ready(function(){
if(window.location.hash) {
$("#alert").show()
}
});
Siii = Yes use hash

I'm not totally sure that I've understood what are you trying to achieve, but this might help you:
if (window.location.hash === '#thanks') {
document.getElementById('alert').classList.remove('hidden');
}

Automatically Click Search Results

This may be a very rookie error I am making, but my situation is this. I have successfully made a script that when entered into a Google Chrome bookmark, it will bring up a prompt box upon the user clicking on the bookmark. From there, after they hit enter, it brings said user to a list of search results. What I want to do is put another piece of code in this same bookmark so that it automatically clicks on the first result on the search results page after it loads. Any ideas?
javascript: (function MCC() {
var feature = prompt('What is your search query?', '');
if (feature != null) {
window.open('https://www.google.com/#q=' + encodeURIComponent(feature));
window.onload = function MyClient() {
document.getElementById('mHSB').click();
}
}})();

I don't think there is a way to interact with a page inside of another window/frame. Your code snippet would run the function in the current window when the new window loaded.
If you are searching with google you could change the URL, something like
http://www.google.com/search?q=searchTerm&btnI
This should be the same as entering the search term and clicking Im feelin lucky (which should load the first result)
I got that link from
Is there a consistent way to link to Google "I Feel Lucky" result?
If you are searching on your own site/ a site where you can add code maybe a query-string switch would be a good idea.

Javascript alert popup form

i have search this whole site and google but cannot find it so, here goes!
i would like a way to show a form when using alert.
for example, when user click post, a dialog pop with asking user a few question like a html form and allow user to click submit or reset or cancel, without loading a new page.
i have seen this done but cannot find the same site again.
i have tried putting htm to alert with little success of posting.
any Help is Highly Appreciated!

What you are looking for is a Prompt Box:
<script type="text/javascript">
function show_prompt() {
var name = prompt('Please enter your name','Poppy');
if (name != null && name != "") {
alert(name);
}
}
</script>
example taken from here: http://www.w3schools.com/js/js_popup.asp

you can do this with jQuery dialogs -- load the dialog on user click and have a form presented in the dialog. have a look at the demos here: http://jqueryui.com/demos/dialog/

To complete #Liv's answer you can use jQuery's UI
Reference: Modal Form
The example shows how to create a new user. It will pop up a dialog where you complete a form and you can submit it or you can cancel it.
Use a modal dialog to require that the user enter data during a multi-step process. Embed form markup in the content area, set the modal option to true, and specify primary and secondary user actions with the buttons option.
It pretty much what I understood you need.
Good luck!

HTML can't be placed in system dialogs generated by alert(), confirm() or prompt(). However, you can download jQuery UI and set it up on your Website. (Make sure you have the "dialog" component chosen on the download page.) Then in your JavaScript:
$("<div>Place your HTML here</div>").appendTo("body").dialog({
modal: true,
title: "Enter a title here"
});
Make sure you run this code after the page has loaded by using either window.onload or $(document).ready().
Ad#m

You will not be able to do this with alert, but you should take a look at how to create modal windows.

I recommend you to use a div popup. What you have to do is setting a background on top of all other elements except the div where your form is. The css property display will be set to 'none' until the form is then activated, by setting display = "block". That can be performed using javascript.