0

In a simple webpage, I am trying to grab the value of an input field as it's being typed and display it simultaneously within the context of code.

So a user could past an URL into the input field and it immediately update the code displayed, so he can easily copy the update code. For example:

<input type='text' name='typedURL'>
Here is your code: <a href="value of typedURL">copy this</a>

I searched all over the internet and am under the impression that the best solution is using this:

<form onsubmit="return false" onkeyup="o.value = a.value">
<input name="a" id="a" type="text" step="any">
<br>
Here is your code:
<code>
<a href="<output name="o" for="a b"></output>">Copy this code</a>
</form>

But I can't get it to output the value PLUS the surrounding code.

djechlin
  • 54,898
  • 29
  • 144
  • 264
Daniel
  • 3
  • 5
  • The code seems to do what I would expect it to do: https://jsfiddle.net/vtm5yrm7/ Am I misunderstanding something in the question? – David Jun 22 '16 at 16:28
  • Perhaps my example was unclear. The problem is how to make the output display code, for example: `

    Here is your code: ">copy this
    ` In other words, the output show up in the context of code.     – Daniel Jun 22 '16 at 16:31
  • That's making even less sense to me now. What is that `href` value even supposed to *do*? – David Jun 22 '16 at 16:33
  • It's supposed to display the full a href code for the user to copy and paste elsewhere. So someone who doesn't know how to code a link, can just paste the URL in the input field and the code is automatically generated (displayed) below. Pretty sure I'm approaching this from the most complicated angle. Thanks for the help. – Daniel Jun 22 '16 at 16:38
  • I was able to get close using this: `
    ` But again, how would I add the code to the output?     – Daniel Jun 22 '16 at 16:39
  • Do you want do that if I input put www.google.it the link will is: – Blind Jun 22 '16 at 16:40
  • Yes Blind, exactly. – Daniel Jun 22 '16 at 16:40
  • I can create your code, Can you wait any minute? – Blind Jun 22 '16 at 16:42
  • Yes, certainly, thank you! – Daniel Jun 22 '16 at 16:42

1 Answers1

0

You can do selecting input value (with querySelector and .value), and change attribute href in JS replacing with .value. Here the code: 

  var input = document.querySelector(".valore");
  var link = document.getElementById("href");
  input.addEventListener("keydown", function() {
       link.innerHTML = input.value;
       link.href = link.innerHTML;
  });
  <input type="text" class="valore">
  <a href="#" id="href"></a>
Blind
  • 85
  • 1
  • 9