You are viewing limited content. For full access, please sign in.

Question

Question

make text box a hyperlink

asked on February 1, 2021

Hello,


I have a form with a text field in a table that shows a URL. How can I make this URL a clickable hyperlink in the table?

Thanks! 

0 0

Answer

SELECTED ANSWER
replied on February 2, 2021

Here's an example of one way you could do this by using CSS to style the text like a clickable link and JavaScript to add the actual functionality.

In these examples I've given my table a custom class of "myTable" and the column that will contain the URL a class of "urlColumn"

CSS:

.urlColumn input {
  color: blue;
  text-decoration: underline;
  cursor: pointer;
}

JavaScript:

$(document).ready(function(){
  // attach delegated event handler to table
  // using url column as triggering element
  $('.myTable').on('click','.urlColumn input',function(){
    // get url from field value
    var url = $(this).val();
    
    // add http if url is incomplete
    if (!url.startsWith('http')) {
      url = 'http://' + url;
    }
    
    // open in new tab
    window.open(url,'_blank');
  });
});

Note a couple of things about the JavaScript:

  1. If your URLs will always contain https:// or https://, then you don't technically need to include the IF statement, but if a URL doesn't have http:// or https:// then window.open will use the current page as the "root" for the url, which is not what you want.
  2. Attaching an event handler to the parent table and using event filtering is very important if your table uses lookups or rows can be added. New rows won't have any event handlers added on page load, but by attaching the delegated handler to the table and filtering on the specific trigger field you can avoid that problem.

 

1 0
replied on February 2, 2021

Thank you so much!! This is perfect. 

0 0

Replies

You are not allowed to reply in this post.
You are not allowed to follow up in this post.

Sign in to reply to this post.