append a url typed into a input text field to an anchor then allow users to click on it and follow the url they typed

Question

I want to have a text field where people can type in a value. Then I want to have a href open the url they typed.

Very similar to this fiddle but I want the href to be only the input value that the users typed.

Fiddle:

  <a href="/base/url" target="blank"  id="baseUrl">Link Text</a>
  <input type="text" id="appendUrl" />






$(function() {
$('#baseUrl').click( function() {
    window.location = $(this).attr('href') + '/' + $('#appendUrl').val();
    return false;
});
});

score 0 · Answer 1 · edited May 23 '17 at 10:31

0

Edit: To answer your question if they typed an external URL, you're going to use the function found here: Fastest way to detect external URLs?

function isExternal(url) {
    var match = url.match(/^([^:\/?#]+:)?(?:\/\/([^\/?#]*))?([^?#]+)?(\?[^#]*)?(#.*)?/);
    if (typeof match[1] === "string" && match[1].length > 0 && match[1].toLowerCase() !== location.protocol) return true;
    if (typeof match[2] === "string" && match[2].length > 0 && match[2].replace(new RegExp(":("+{"http:":80,"https:":443}[location.protocol]+")?$"), "") !== location.host) return true;
    return false;
}

In combination with out current code, that makes:

function isExternal(url) {
    var match = url.match(/^([^:\/?#]+:)?(?:\/\/([^\/?#]*))?([^?#]+)?(\?[^#]*)?(#.*)?/);
    if (typeof match[1] === "string" && match[1].length > 0 && match[1].toLowerCase() !== location.protocol) return true;
    if (typeof match[2] === "string" && match[2].length > 0 && match[2].replace(new RegExp(":("+{"http:":80,"https:":443}[location.protocol]+")?$"), "") !== location.host) return true;
    return false;
}

$(function () {
    // When the input field changes value
    $('#text').blur(function(){

        // Check if the link is external:
        if(isExternal($('#text').val())){
            // Set the attribute 'href' of the link to the value of the input field
            $('#link').attr('href', $('#text').val());
        }
        else
        {
            // Show an error if it's not external
            alert('Link is not external!');
        }
    });
});

<input type="text" id="text"> <a href="#" id="link">Link</a>

Fiddle: http://jsfiddle.net/BMDKr/6/

edited May 23 '17 at 10:31

Community

1
1

answered Sep 14 '13 at 21:30

Thew

15,789
18
59
100

thank you. how can I get the code to only click to what the users typed in on the inout box. I dont want the script to take the base url at all just what the users typed in. – user2608865 Sep 14 '13 at 21:37
@user2608865 So you want the users to check if they typed an external URL? – Thew Sep 14 '13 at 21:39
@user2608865 http://stackoverflow.com/questions/6238351/fastest-way-to-detect-external-urls – Thew Sep 14 '13 at 21:41
right. I want an external url. For example http://www.espn.com and not http://fiddle.jshell.net/BMDKr/5/show/http://www.espn.com. sorry for the confusion. – user2608865 Sep 14 '13 at 21:41
thanks for sending that link. I dont want to detect if is external. I want the href to click to only to what the users typed in on the input box. http://jsfiddle.net/BMDKr/5/ – user2608865 Sep 14 '13 at 21:53
@user2608865 I don't quite understand what you mean. Isn't the current script doing that already? – Thew Sep 14 '13 at 21:58
no, if you type in www.nba.com and click on the link then it takes you to http://fiddle.jshell.net/_display/www.nba.com but I was hoping it clicked to www.nba.com – user2608865 Sep 14 '13 at 22:08
@user2608865 Here's a link that'll help you out: http://stackoverflow.com/questions/3543187/prepending-http-to-a-url-that-doesnt-already-contain-http – Thew Sep 14 '13 at 22:15

append a url typed into a input text field to an anchor then allow users to click on it and follow the url they typed

1 Answers1