Javascript variable into href="mailto:" string

Question

I am trying to create a simple page that can take some user inputs and print them back out, and I have found a way that is working fine. But there is one thing I can not manage to do, and that is to take the E-post input from the user and add it into the "mailto" string so that when the entered mail is clicked it will open in the users e-mail program with the entered mail preentered.

Here is the code

<!DOCTYPE html>
<html>
<head>
<title>HTML JavaScript output on same page</title>
<script type="text/JavaScript">
    function showMessage(){
        var navn = document.getElementById("navn").value;
        display_navn.innerHTML= navn;

        var mail = document.getElementById("mail").value;
        display_mail.innerHTML= mail;

        var tlf = document.getElementById("tlf").value;
        display_tlf.innerHTML= tlf;
    }
</script>
</head>
<body>
<form>
Navn: <br>
<input type="text" id = "navn"><br>
E-post: <br>
<input type="text" id = "mail"><br>
Mobil: <br>
<input type="text" id = "tlf"><br>

<br>
<br>
<input type="button" onclick="showMessage()" value="submit" />
</form>

<br>
<br>

<span id = "display_navn"></span><br>
<br>
<a href="mailto:" + mail><span id = "display_mail"></a></span><br>
<br>
<span id = "display_tlf"></span>


</body>
</html>

And here is a screenshot of what it looks like.

And I want to make it so that when I click on TestEmail the e-mail client I have opens, and the adress is entered already. Is this something that can be done? If it would be hard to do it on the same site, I could consider having the inputs on a single site, and then open a new site with the generated content when clicking on the submit button if that would be easyer.

myanchor.href = 'mailto:' + navn + mail + tlf - you'll have to format the message properly though — evolutionxbox
– evolutionxbox, Commented Oct 3, 2016 at 13:58
@ZakariaAcharki No buddy. Not at all. That's something that takes from the query string and this is totally different mate. Both the solution and the question doesn't have any similarities. Check my answer, and check the answer provided. — Praveen Kumar Purushothaman
– Praveen Kumar Purushothaman, Commented Oct 3, 2016 at 14:14

Praveen Kumar Purushothaman · Accepted Answer · 2016-10-03 13:59:04Z

3

You just need this extra line of code:

display_mail.parentNode.setAttribute("href", "mailto:" + mail);

And don't forget to close the </form> tag.

Fiddle: http://output.jsbin.com/revahabowe

answered Oct 3, 2016 at 13:59

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

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

2 Comments

Siesta Over a year ago

It worked perfectly. Thanks! Could you give a quick explaination how it worked?

Praveen Kumar Purushothaman Over a year ago

@Siesta You need to set the href attribute. You didn't do that at all. And JavaScript is not there when you use that inside HTML tag. It was invalid.

Collectives™ on Stack Overflow

Javascript variable into href="mailto:" string

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related