Unable To Send Emails With JavaScript

Question

An old thread on Stack Overflow discusses how to use JavaScript to fill in a mailto email:

I was interested in applying the technique, but couldn't get it to work.

In the code below, when I set a breakpoint on return false in the makecontact() method, and look at the URL that it logs, it looks fine.

But the browser does not open the email client.

If I hardcode the same URL in an href in the Submit button, then it launches the email client.

Why doesn't setting the href work?

ANSWER: It was the wrong href.

Fixed version:

<!-- TODO: Validate name and text fields and don't allow submit until they are valid. Limit total mailto URL length to 2000. -->
<form name="contact">
<br/>Reason for contact:
<br/>
<input type="radio" name="reason" value="Product Inquiry/Presales Questions" checked="checked"/>Product Inquiry/Presales Question<br/>
<input type="radio" name="reason" value="Support/Warranty"/>Support/Warranty<br/>
<input type="radio" name="reason" value="Feedback"/>Feedback<br/>
<input type="radio" name="reason" value="Other"/>Other<br/>
<input type="text" name="name" id="name"/>Your name:</div>
<textarea name="contacttext" rows="20" cols="60" id="contacttext"></textarea>
<button id="submit">Submit</button>
</form>
<script type="text/javascript" id="contactjs">

<!--
var submit = document.getElementById("submit");

function getreason() {
    var radios, i, radio;

    radios = document.getElementsByName("reason");

    for (i = 0; i < radios.length; i += 1) {
        radio = radios[i];
        if (radio.checked) {
            break;
        }
    }

    return encodeURIComponent(radio.value);
}

function makecontact(e) {
    var subject, name, text;

    subject = getreason();
    name = document.getElementById("name").value;
    text = document.getElementById("contacttext").value;
    body = "From: '" + name + "', Content: '" + text + "'";
    body = encodeURIComponent(body);

    document.location.href = "mailto:contact@analogperfection.com?Subject=" + subject + "&Body=" + body;
    console.log(document.location.href);

    e.preventDefault();

    return false;
}

if (submit.addEventListener) {
    submit.addEventListener("click", makecontact, true);
} else if (form.attachEvent) {
    submit.attachEvent("onclick", makecontact);
} else {
    submit.click = makecontact;
}
//-->
</script>
</div>

You should add the correct solution as an answer, not edit it into your post. — Emil Vikström, Jun 18 '12 at 13:19

score 3 · Answer 1 · answered Jun 17 '12 at 21:28

3

    body = "From: ' 
" + name + " 
', Content: ' 
" + text + " 
'";

This is not valid JavaScript. It will cause an "Unterminated string constant" error. Try this instead:

    body = "From: '\n" + name + "\n', Content: '\n" + text + "\n'";

answered Jun 17 '12 at 21:28

Niet the Dark Absol

320,036
81
464
592

That is a single line in the original. Stack Overflow's editor munged it. Fixed the example. – Jim Showalter Jun 17 '12 at 23:53
Well, you don't appear to be actually doing anything with the generated `href`. Try setting `location.href` instead of `submit.href`. – Niet the Dark Absol Jun 17 '12 at 23:55

score 1 · Answer 2 · answered Jun 17 '12 at 21:38

You have two main problems:

button elements don’t have hrefs (HTML4, HTML5). Setting one won’t do anything. At the end of your submit handler, you should instead set document.location.href:
```
document.location.href = "mailto:contact@analogperfection.com?Subject=" + subject + "&Body=" + body;
```
You can’t have literal newlines in strings in JavaScript. Use \n instead:
```
body = "From: ' \n" + name + " \n', Content: ' \n" + text + " \n'"; 
```

Also be aware…

You should accept an event object in your event handler, and call event.preventDefault() instead of just returning false from your event handler, to stop the form from being submitted.
There’s no function called resume, but you’re using it if neither addEventListener nor attachEvent exists.

Thanks! Main problem #1 was my attempt to make it work after the code copied from the original article on this topic didn't work. In that code, the OP sets the link in window.location.href. Setting it in document.location.href works. Main problem #2 was caused by the Stack Overflow editor. It's one line in my original. Thank you for thing-to-be-aware-of #1, I didn't know about that and have added it. Remaining thing to be aware of was due to copying the event handling code from another script and not fixing all of the references. Would have caught that in testing. — Jim Showalter, Jun 18 '12 at 00:40

Unable To Send Emails With JavaScript

2 Answers2