Javascript/HTML URL input convert to Hyperlink

Question

I am working in ServiceNow using a catalog request UI macro so I cannot call a PHP file. I want to have users enter an URL into an input field and automatically convert that to a hyperlink without hitting submit (basically when user leaves field).

I tried to put this together using javascript but I'm finding that I am having trouble with the code. The input field isn't even appearing on the page

 <?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
<script>
<input type="text" id="myAwesomeIdName"></input>
    var val = document.getElementById('myAwesomeIdName').value;
    <a href="&val;&" target="_blank">Link</a>
    </script>
</j:jelly>

why do you think input field is not appearing?

Jejun
– Jejun

2021-04-15 00:31:26 +00:00
Commented Apr 15, 2021 at 0:31 — Jejun
– Jejun, Commented Apr 15, 2021 at 0:31

David Pierson · Accepted Answer · 2021-04-15 00:51:46Z

2

One thing i noticed was your

<input type="text" id="myAwesomeIdName"></input>

is inside the script tags. Try moving it up a line so it is not inside (script).

btw I would have suggested this via a comment, as it is not a complete answer to your question but may assist, but could not because SO will not permit to comment as I have only 41 reputation. Hope I have not upset anyone. Mods if you are able to change this to a comment, or suggest a better way, please feel free.

answered Apr 15, 2021 at 0:51

David Pierson

3274 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Daniel Dogeanu Over a year ago

It is actually a complete answer! One thing I would add is that the input tag is a self-closing tag.

Azeem Aslam · Accepted Answer · 2021-04-15 20:08:54Z

0

You can add event listener on input field of your choice e.g. enter or just on change. Get the value and add it to DOM or what ever you want to do with it. If you have something else leme know I will update answer.

const input = document.querySelector('input');
const log = document.getElementById('log');

input.addEventListener('change', updateValue);

function updateValue(e) {
  const yourLink = e.target.value
  const mydiv = document.getElementById("log");
  const aTag = document.createElement('a');
  aTag.setAttribute('href', yourLink);
  aTag.textContent = "link text";
  mydiv.appendChild(aTag)

}

<input placeholder="Enter some text" name="name" />
<div id="log"></div>

answered Apr 15, 2021 at 20:08

Azeem Aslam

5445 silver badges19 bronze badges

Collectives™ on Stack Overflow

Javascript/HTML URL input convert to Hyperlink

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related