How to prepend a https to url on click - jquery

Question

I ran into a situation whereby i have to enable https when a user click on a button.

my current url is as follows: myurl.com

i have to do the following:

$(".btn").click(function(){

// change url to https://myurl.com

});

My current button's html:

<button class="btn" data-statsopt_noninteraction="" data-statsopt_value="" data-statsopt_label="login" data-statsaction="account-actions" data-statscategory="header-events">LOG IN</button>

Any help would much be appreciated

Thanks

Do you mean you wish to do a redirect here? Or is your button really a submit input element, and you want to change the form target? — halfer, Mar 18 '14 at 06:54
i dont want any re-direct..my issue is only fixed if the current url is an https when doing the onclick — Wasiim, Mar 18 '14 at 06:59
_i dont want any re-direct_....then you can do it with some tweaking at your serverside. — Jai, Mar 18 '14 at 07:01
Righto, I'd be inclined to swap the button for a link - causing the browser to go to a new page is what links are for! — halfer, Mar 18 '14 at 07:03
i currently have a script in .NET that is supposed to change the http to https..but it doesn't work. The issue seems to be fixed when i manually add the https to the url and then click on the login button — Wasiim, Mar 18 '14 at 07:06
_that is supposed to change the http to https_ - you may need to elaborate on that. Change what http? In the URL of the page? In the URL of a form? In a hidden element? — halfer, Mar 18 '14 at 07:39

Felix · Answer 1 · 2014-03-18T07:00:04.580

2

You can use replace() to replace current protocol http:// with https://:

$(".mybutton").click(function(){
    location.href = location.href.replace("http://", "https://");
});

or better to check if your current URL is https:// or not then redirect the page:

$(".mybutton").click(function(){
    if (location.href.indexOf("https://") == -1) {
        location.href = location.href.replace("http://", "https://");
    }
});

edited Mar 18 '14 at 07:00

answered Mar 18 '14 at 06:53

Felix

37,892
8
43
55

this is causing a re-direct..which i dont want :( – Wasiim Mar 18 '14 at 07:08
A URL redirect is a web server function that sends a user from one URL to another which is your requirement in the question. – Felix Mar 18 '14 at 07:12

score 1 · Answer 2 · answered Mar 18 '14 at 06:54

1

$(".mybutton").click(function(){
        window.location.href = "https://myurl.com";
});

answered Mar 18 '14 at 06:54

slash197

9,028
6
41
70

score 1 · Answer 3 · answered Mar 18 '14 at 07:07

Attaching a JS-only action only to a scriptable element (a button in this case ) is a no-no for accessibility. By doing so you actually prevent people who use a non-supporting user-agent from accessing your content. You should add a noscript element:

<button id="js-http-action">HTTPS</button>
<noscript>
   <a href="https://yoururl/">HTTPS</a>
</noscript>

In a textual browser such as Lynx this will be greatly appreciated by users. :-)

score 0 · Answer 4 · answered Mar 18 '14 at 06:54

0

$(".mybutton").click(function(){

// change url to https://myurl.com
window.location.href='https://myurl.com';

});

answered Mar 18 '14 at 06:54

Bhojendra Rauniyar

83,432
35
168
231

1

Please elaborate the answer. – Bleeding Fingers Mar 18 '14 at 07:15

score 0 · Answer 5 · answered Mar 18 '14 at 06:55

0

$(".mybutton").click(function(){    
  var str = document.URL     
  location.href = str.replace('http','https');
});

answered Mar 18 '14 at 06:55

Ankit Tyagi

2,381
10
19

score 0 · Answer 6 · answered Mar 18 '14 at 06:55

0

You can do this:

$(".btn").click(function(){
    var url = window.location.href.replace(/http/, 'https');
    window.location.href = url;
});

answered Mar 18 '14 at 06:55

Jai

74,255
12
74
103

I'd anchor the protocol regex to the start of the string, otherwise it is possible to have some unintended side-effects `;-)`. – halfer Mar 18 '14 at 06:57

score -1 · Answer 7 · edited Mar 18 '14 at 07:21

-1

$(".mybutton").click(function () {
    url = "www.myurl.com";
    url = 'http://' + url;
});

edited Mar 18 '14 at 07:21

Satpal

132,252
13
159
168

answered Mar 18 '14 at 07:05

Ankit Gupta

1

1

Don't forget to format your code - there's a button for it in the UI. _Personally_ I tend to suggest that there's no value in answering a question that's already got five near-identical answers, unless your contribution adds something new. – halfer Mar 18 '14 at 07:06

How to prepend a https to url on click - jquery

7 Answers7