Job Job - 6 months ago 10
HTML Question

User Input to HTML Tag output

Ok an example of what i am trying.

User input: http://google.com

I want the output to be:



<script>
$(document).ready(function() {
// Handler for .ready() called.

$("#change-it").click(function() {
var userLink = $('#usr-input').val().replace(/.*?:\/\//g, "");
$('#users-text').text('<a href="' + userLink + '" ><img src="rainbow.gif"></a>');
$('#user-link').attr('href', 'http://' + userLink);
});

});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<input type="text" class="form-control" id="usr-input">
<br>
<button id="change-it" type="button">Update Text</button>
<br>
<div id="users-text"></div>
<br>
<a id="user-link" href="#" target="_blank">
<img src="http://orig09.deviantart.net/8364/f/2014/053/f/9/free_space_galaxy_texture_by_lyshastra-d77gofi.png" />
</a>





How can i do this with Javascript?

Regards.

Answer

So you want the users input to be set as the href on the link as below?

$(document).ready(function() {
  // Handler for .ready() called.

  $("#change-it").click(function() {
    var userLink = $('#usr-input').val().replace(/.*?:\/\//g, "");
    $('#users-text').text('<a href="' + userLink + '" ><img src="rainbow.gif"></a>');
    $('#user-link').attr('href', 'http://' + userLink);
  });


});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<input type="text" class="form-control" id="usr-input">
<br>
<button id="change-it" type="button">Update Text</button> 
<br>
<div id="users-text"></div>
<br>
<a id="user-link" href="#" target="_blank">
  <img src="http://orig09.deviantart.net/8364/f/2014/053/f/9/free_space_galaxy_texture_by_lyshastra-d77gofi.png" />
</a>

Comments