How to Add Anchor Tag to a Url from Text Input

How to add anchor tag to a URL from text input

First, a request. Don't do this before writing the data to the database. Instead, do it before displaying the data to the end-user. This will cut down on all confusion, and will allow you more flexibility in the future.

One example found online follows:

$text = preg_replace('@(https?://([-\w\.]+)+(:\d+)?(/([-\w/_\.]*(\?\S+)?)?)?)@', '<a href="$1">$1</a>', $text);

And a much more thorough one from daringfireball.net:

/**
 * Replace links in text with html links
 *
 * @param  string $text
 * @return string
 */
function auto_link_text($text)
{
   $pattern  = '#\b(([\w-]+://?|www[.])[^\s()<>]+(?:\([\w\d]+\)|([^[:punct:]\s]|/)))#';
   $callback = create_function('$matches', '
       $url       = array_shift($matches);
       $url_parts = parse_url($url);

       $text = parse_url($url, PHP_URL_HOST) . parse_url($url, PHP_URL_PATH);
       $text = preg_replace("/^www./", "", $text);

       $last = -(strlen(strrchr($text, "/"))) + 1;
       if ($last < 0) {
           $text = substr($text, 0, $last) . "…";
       }

       return sprintf(\'<a rel="nowfollow" href="%s">%s</a>\', $url, $text);
   ');

   return preg_replace_callback($pattern, $callback, $text);
}

How do I append a url typed into a input text field to an anchor then follow it when anchor is clicked?

I'm assuming that you have some HTML like the following and want to append the contents of the appendUrl input field to the url in the anchor tag when the anchor tag is clicked.

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

Then, using jQuery, it would look something like:

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

The basic idea is to extract the value of the input and append it to the url in the href. Use the value so constructed to set the location of the current window. I return false in the click handler to prevent the default action (the base url alone) from being taken.

Create/Place an anchor A HREF within an INPUT field

This is unfortunately not possible in HTML 4 or below. Even with HTML5 which has several new INPUT TYPEs, including URL, it only does validation and has some other useful functions, but won't give you want you want.

You might look for some jQuery plugins that can help you do this, most use the same principals behind Rich Text or other online/web-based HTML WYSIWYG editors. I've had trouble locating them myself.

These 3 situations (that I can think of right now) are pretty much what you will face natively with HTML4 or below, as text in an actual HTML4 INPUT textbox is pure text. It is not html and therefore NOT clickable. Here are some variations:

The INPUT tag's VALUE attribute, also referenced as the corresponding DOM object's "value" property (which is basically what you've been doing, and the most you can hope for, if you decide that you MUST have the text that's ACTUALLY inside the textbox (because the text inside the textbox is the VALUE attribute, as I have it with "http://yahoo.com" in this example):
```
    <input id="myTxtbox" type="text" value="http://yahoo.com">
```
where the INPUT's VALUE = "http://yahoo.com", which you can retrieve with:
- in pure javascript:
  document.getElementById("myTxtbox").value
- in jQuery:
  $("myTxtBox").val()
When your link/url is the text in between the <INPUT> and </INPUT>, i.e. the text/innerText of the textbox. This is useless for your question/scenario since it's not clickable, and more importantly NOT INSIDE the textbox. However, someone might want to use this to retrieve any text that you may be using as a label (if you're not using the <label> tag itself already that is):
```
<input id="myTxtbox" type="text">
  http://yahoo.com
</input>
```
The textbox's text/innerText is NOT an attribute here, only a DOM object property, but can still be retrieved:
- pure javascript:
  document.getElementById("myTxtbox").innerText
- jQuery:
  $("myTxtBox").text() -- you would use this to capure any text that you may be using as a label (if you're not using the tag).
The result being: http://yahoo.com
When your link/url is the form of an ANCHOR (<A>) with an HREF to your url (and visible link text) in between the <INPUT> and </INPUT>, i.e. the innerHTML of the textbox. This is getting a bit closer to what you want, as the link will appear as, and function as an actual link. However, it will NOT be inside of the textbox. It will be along side it as in example #2. Again, as stated in example #1, you CANNOT have actual working HTML, and therefore a working 'link' inside of a textbox:
```
<input id="myTxtbox" type="text">
  <a href="http://yahoo.com">
    http://yahoo.com
  </a>
</input>
```
Once again, similarly to example #2, the textbox's innerHTML is NOT an attribute here, only a DOM object property, but can still be retrieved:
- pure javascript:
  document.getElementById("myTxtbox").innerHTML
- jQuery:
  $("myTxtBox").html()
The result being: <a href="http://yahoo.com">http://yahoo.com</a>

Add value of input field to anchor/link tag

I'd suggest, with jQuery:

$('input[name="foo"]').on('change', function(){

        var self = this,

            $self = $(self),

            link = $self.next();

        link.prop('href', function(){

            this.href = this.protocol + '//' + this.hostname + '/' + encodeURIComponent(self.value);

        });

    });

a::after {

  content: ' (' attr(href) ')';

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" name="foo">

<a href="http://example.com/{value of foo}">

Add dynamic text to anchor link URL query

To my knowledge, href isn't a setter method but just a getter. You could do it in jQuery using attr as so:

$(this).attr('href', $(this).attr('href') + "&custNote=" + customerData);

or simply omit the jquery wrapper and use setAttribute

this.setAttribute(this.href, this.href + "&custNote=" + customerData);

How would I prevent my code from adding multiple &custNote= values? If I click "Set" twice the value is added twice:
toggle.php?date=2020-01-22&custNote=Horses and cheese&custNote=fielding

For this you could split the href value on the ampersand, grab the first index of this newly formed array, and then append the rest like you did before:

$(this).attr('href', $(this).attr('href').split('&')[0] + "&custNote=" + customerData);

How to Add Anchor Tag to a Url from Text Input