Use javascript to replace input value into mailto

Question

I have to email some information and I can't use PHP unfortunately. I've set up an input to get the email address of a user.

<form name="email-form">
    <div class="email">
        Enter your email:
        <input type="email" name="email-value">
    </div>
    <a type="submit" class="email-link" value="Email Results"></a>
</form>

What I thought I could do is set up an onClick event like this and append the user input to the end of the mailto: part.

var emailAddy = $("email-value").val();
    $(".email-link").on("click", function(){
        $(".email-link").prop("href", "mailto:").append( emailAddy );

    });

In don't get any errors running this code, but when the mail client comes up, the "to:" section is blank. Is this even possible?

When you say `append` are you talking about DOM elements or string concatenation? — PM 77-1, Dec 27 '17 at 21:53
`$("email-value")` is looking for an element, `.append( emailAddy );` is adding text to the node, and I don't think changing the href inside of a click handler does anything useful. — rlemon, Dec 27 '17 at 21:57
My mistake, I wasn't aware that append added DOM elements and not strings. So yes, it makes more sense to concatenate the email onto mailto: However 'attr' in the correct answer is fine before a certain Jquery point, but I'm using the most recent and .prop works with it. Thanks for your questions and input. — Nick0989, Dec 28 '17 at 15:09

Daniel Beck · Accepted Answer · 2017-12-27T22:20:08.970

There's a lot going on here.

$("email-value") doesn't match anything. You want $('input[name="email-value"]').
You're trying to capture the email address in a global variable on page load, before the user has an opportunity to enter anything, so it'll always be empty. Instead, you should capture that value inside the function that uses it.
.append adds a text node to the document. What you want is to concatenate the email address to the string "mailto:", so just use concatenation (+).
<a> tags don't have a value attribute. Use a text node inside the tag instead.
<a> tags don't have a type attribute, and aren't a submit button for a form. Fortunately, what you're doing is constructing a regular anchor link, so it doesn't need to be a submit button; the only use for the form is for the input field.
There's no href attribute on the anchor to begin with, so the browser won't style it as a link.
href is an attribute, not a prop: use .attr(). prop is for booleans such as checked or disabled.
You're altering the link's href during the same click event that would fire that link. That does seem to work -- somewhat unexpectedly -- but means the hover indicator on the link will be incorrect (since the href doesn't exist until the user clicks the link.) I'd use a change event on the input field instead (and ideally validate the email address before altering the link href.)

Here's a corrected version of your code:

$('input[name="email-value"]').on("change", function() {
  var emailAddress = $(this).val();
  // validate the address here
  $(".email-link").attr("href", "mailto:" + emailAddress);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="email-form">
  <div class="email">
    Enter your email:
    <input type="email" name="email-value">
  </div>
</form>
<a href="#" class="email-link">Email Results</a>

Thank you. I thought that attr was deprecated and the Jquery docs said to use prop instead. I've tried this and understand it except for why there are quotes around [name="email-value"] I thought this is just input[name=email-value]. However this actually isn't working for me. It could be because I'm using jquery3.2.1 — Nick0989, Dec 28 '17 at 14:47
I also am able to use .prop, as stated I believe attr is deprecated — Nick0989, Dec 28 '17 at 15:10
Where did you form the belief that `attr` is deprecated? Nothing in the [docs](http://api.jquery.com/attr/) suggests that that is the case (in fact it contains a lengthy discussion about the difference between `attr` and `prop`.) — Daniel Beck, Dec 28 '17 at 15:34
After a bit of googling I think I see the source of your confusion: use of `.attr()` is deprecated as of jQuery 1.9 *for properties*. It should still be used for attributes. [See also](https://stackoverflow.com/a/15070342/3412322) — Daniel Beck, Dec 28 '17 at 15:45
That's good to know. I don't know how I came to the conclusion that it was. — Nick0989, Dec 28 '17 at 16:03

The_Death_Raw · Answer 2 · 2017-12-27T22:02:02.817

You need to use attr instend of append to set attribut value

$(".email-link").on("click", function(){
  var emailAddy = $("input[name='email-value']").val();
  $(this).attr("href", "mailto:" + emailAddy);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="email-form">
    <div class="email">
        Enter your email:
        <input type="email" name="email-value">
    </div>
    <a type="submit" class="email-link" value="Email Results">Submit</a>
</form>

Edit : your selector for the value was undefined, target by class, name, id, etc...

Use javascript to replace input value into mailto

2 Answers2