javascript - Make HTML 'value' attribute a link
Get the solution ↓↓↓I'd like to turn the output of the HTML input value into a clickable link.
Currently, it looks like:<input type="email" class="form-control" name="contactEmail" value="<?php echo $row_rsContactDetails['contactEmail']; ?>">
I've tried using PHP and JavaScript to create the link but this just ended up displaying the HTML code verbatim.
Can it be done, and if so, how?
Answer
Solution:
You don't need to enter the link to output as value, you need a workaround here is my suggestion:
https://jsfiddle.net/4w58ed3o/1/
HTML:
<div class="box">
<input type="email" id="myinput" value="[email protected]">
<a href="#" id="mylink"></a>
</div>
<button id="myswitcher">Edit</button>
JS:
let input = document.querySelector('#myinput');
let link = document.querySelector('#mylink');
let myswitcher = document.querySelector('#myswitcher');
let setLink = () => {
link.innerHTML = input.value;
link.setAttribute('href', 'mailto:' + input.value);
}
input.addEventListener('input', () => {
setLink();
});
setLink();
myswitcher.addEventListener('click', () => {
document.querySelector('.box').classList.add('editable');
input.focus();
});
input.addEventListener('blur', () => {
document.querySelector('.box').classList.remove('editable');
});
CSS
input, a {
display: inline-block;
padding: 0;
padding: 10px;
margin: 0;
text-decoration: none;
font-size: 16px;
font-family: inherit;
box-shadow: none;
border: none;
line-height: 1.2;
background-color: transparent;
}
input:focus, a:focus {
outline: 1px solid #000;
}
.box {
position: relative;
display: inline-block;
}
input {
position: absolute;
box-sizing: border-box;
top: 0;
left: 0;
width: 100%;
}
.box input {
opacity: 0;
pointer-events: none;
}
.box.editable a {
opacity: 0;
pointer-events: none;
}
.box.editable input {
opacity: 1;
pointer-events: auto;
}
I made a working example of implementation for you, substitute data from the server and be inspired by my solution.
Answer
Solution:
You could use javascript/jquery to achieve the same.
<html>
<body>
<input type="email" class="form-control" name="contactEmail" value="LINK HERE">
<span id="output"></span>
<script>
$(document).ready(function(){
var str = "LINK TITLE HERE";
var valueToLink = $(".form-control").val() //fetches the string to be converted to
//link
var result = str.link(valueToLink);
document.getElementById("output").innerHTML = result;
})
</script>
</body>
</html>
You could also hook up the above logic to an event call, e.g, button click.
Answer
Solution:
I don't think it is possible, but you can try this. And you can put<?php echo $row_rsContactDetails['contactEmail']; ?>
in place to "SOME TEXT" as well.
<a href="<?php echo $row_rsContactDetails['contactEmail']; ?>">SOME TEXT</a>
Share solution ↓
Additional Information:
Link To Answer People are also looking for solutions of the problem: call to undefined function mysqli_connect()
Didn't find the answer?
Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.
Similar questions
Find the answer in similar questions on our website.
Write quick answer
Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.