Develop Reference

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');
}

How to make link with hidden URL

I was wondering whether it was possible to make a link with <a> tags that doesn't display its URL?
Put into other words, I would like a piece of HTML that either hides or obfuscates the URL that it links to.
I have found this StackOverflow question, but I'd prefer that the link would work in all browsers (not just chrome) and was not a popup. I already have access to jQuery, Bootstrap and PHP 5.5.
Any help would be appreciated.
UPDATE: I feel this needs clarification. I do not want it to be visible in ANY way - i.e. this is a link that must NOT be shared, so I cannot simply use redirects and just hide the URL when it is hovered over - I do not want it visible in the source code either. Sorry for any inconvenience :(
Thanks,
ICT

You can capture the link in a closure to hide it, then point the window there when the <a> is clicked, for example
function hideLink(anchor) {
var href = anchor.getAttribute('href');
anchor.removeAttribute('href');
anchor.className += ' pseudolink';
anchor.addEventListener('click', function (e) {
e.preventDefault();
window.location.href = href;
});
}
window.addEventListener('load', function () {
hideLink(
document.getElementById('my_link')
);
});
.pseudolink {
color: blue;
cursor: pointer;
text-decoration: underline;
}
<a id="my_link" href="http://google.com">Hover over me</a>

It is not possible to completely hide the URL you are attempting to navigate to. The URL must be present in some form - such as the 'href' attribute of the <a> - tag to tell the browser where to navigate to.
However, it is possible to mask the URL with access to your server settings. Using a .htaccess file it is possible to redirect from one entered URL to another, whilst maintaining the entered URL within the address bar of the browser. There are many sources online that explain how to do this.
Simply handling each link using some logic within a PHP file may be suitable to hide the link in the source. For example, you could send every link to handler.php and specify a value for which page to navigate to, ie handler.php?page=1.
handler.php would then contain something along the lines of:
<?php
if ($_GET['page'] == 1) header('Location: /where/you/want/to/go');
if ($_GET['page'] == 2) header('Location: /where/else/you/want/to/go');
?>
This way, the user will not know where the link actually goes and (using the .htaccess settings) unaware of the URL they have navigated to.

You could use an url minifier like this one : https://goo.gl/.

<a data-link="some link here"></a>
$('a').on('click', () => {
window.location.href = $(this).attr('data-link');
});
User won't see the link while hovering it.

Stealing the redirect URL of a button

Is it possibe to change the return URL of a button whose job is submitting a form to the server? The main deal here is that I don't have the script that controls the button, hence the word "stealing."
If you are curious about the use case, I have a Salesforce Visualforce page that has an embedded Flow in it. I want to jump out of the Flow when the user is half way through and a certain condition is met.

Assuming the button is not in an iFrame...
$('#some_button').click(function (e) {
e.preventDefault();
// Do stuff here then submit the form..
$('#some_form').submit();
});
You could also use this method for $('#some_form').submit().... You can read more about it here.

jqm data-rel="back" issue

imagine the following scenario:
i have a jquery-mobile formular, it´s results are linking to its resultpage.
on the resultpage i have this back button:
this works fine to just update the content and keep the submitted form data,
but
what if a user came from a search-engine or similiar extern link, then my back button links back to the searchengine/externLink .
so how do i Differentiate between those who came from my form or anywhere else in a jqm-way ?
i have a "start-search-page" i would love to link to if the user didn´t came from the search and i don´t want to miss the ajax-link from my search to the resultpage, use the same button and idealy i don´t have to set any cookie.
is there any hint or smarter attempt than check the server url from document.referrer ?
thanks in advance

You can check current page url using below code:
var prevUrl = $.mobile.activePage.data('url');
in case u want to perform different actions based on previous URL.
then on save the URL in the global javascript variable and on click of the button check the previous URL and do the your functionality. eg
Before Navigating to page:
var prevUrl = $.mobile.activePage.data('url');
on click of button:
if (prevUrl=="myurl") {
//do something
$.mobile.changePage('#search')
}
else {
$.mobile.changePage('#nothing')
}

Warning when clicking external links and how to add it to a link class

I'm not sure how to do a pop-up that warns when you are clicking on external links, using javascript.
I figured that it would be handy to put a class on my external links as well, but I'm not quite sure it's done correct as it is now either. This is the HTML I'm using at the moment:
<div id="commercial-container">
<img src="picture1.jpg" />
<img src="pciture2.jpg" />
<img src="picture3.jpg" />
<img src="picture4" />
</div>
I'm very new to javascript and very unsure on how to solve my problems. The pretty much only thing I figured out so far is that I will have to use window.onbeforeload but I have no clue on how to figure out how to write the function I need.
I want to keep my javascript in a separated .js document instead of in the HTML as well.

Call the confirm() function from the onClick attribute. This function returns true if the user clicks OK, which will open the link, otherwise it will return false.
<img src="picture1.jpg"/>
Hope this helps.

You can do it by adding a click event handler to each link. This saves having to use a classname.
window.onunload will run even if the user is just trying to close your site, which you may not want.
staying in site
going external
<script>
var a = document.getElementsByTagName('a');
var b = a.length;
while(b--){
a[b].onclick = function(){
if(this.href.indexOf('yourwebsitedomain.com')<0){
//They have clicked an external domain
alert('going external');
}
else{
alert('staying in your site');
}
};
}
</script>

Since you're new to Javascript I advice you to use a javascript framework to do all the "heavy work" for you.
For example with JQuery you can easily bind an onClick event to all external links by doing:
$(".external").click(function(event) {
var confirmation = confirmation("Are you sure you want to leave ?");
if (!confirmation) {
// prevents the default event for the click
// which means that in this case it won't follow the link
event.preventDefault();
}
});
This way every time a user clicks on a link with the external class, a popup message box asking for a confirmation to leave will be prompt to the user and it will only follow the link if the user says "yes".
In case you want only to notify without taking any actions you can replace the confirmation by a simple alert call:
$(".external").click(function(event) {
alert("You are leaving the site");
});

If the user click an image,div,.. you need to look for the parent node. !There could be several elements wrapped with a-tag.
document.addEventListener('click',function(event){
var eT=(event.target||event.srcElement);
if((eT.tagName.toLowerCase()==='a' && eT.href.indexOf('<mydomain>')<0)
|| (eT.parentNode!==null && eT.parentNode.tagName.toLowerCase()==='a'
&& eT.parentNode.href.indexOf('<mydomay>')<0))
{
//do someting
}
else if(eT...){
...
}
},false);
Two side notes:
If you want to keep track a user by cookie or something similar, it's good practice to check external links, set a timeout and make a synchronic get request to renew.
It's better to add the event to the document or a div containing all events and decide on target.