CODEWITHSUNDEEP
javascriptjqueryhtmlmailto
brianwantsblood
brianwantsblood

Reputation: 123

Mailto with custom subject, body, etc. using jquery

I'm creating a custom HTML page for my team at work. We are using dropdowns, text fields, and radio buttons to generate the fields of an email. We all use IE and Outlook so that's not a problem. I'm having trouble getting the "generate email" button to fill in the message. I can get the email window to pop up, but all of the fields are blank. I need the subject, to field, CC field, and body to be filled in according to the options they selected on the page. Here's my code:

<script>
    $(function generateEmail() {
        var emailTo = $("#teamName").val();
        var emailCC = $("#CC").val();
        var emailSubject = "Escalation Request - Ticket #: " + $("#ticketNumber").val();
        var emailBody = "Issue: " + $("#issue") + "<br>Contact info: " + $("#contactInformation") + "<br>Requested action: " + $(".requestedAction:checked");
        window.location.href = "mailto:" + emailTo + "&CC=" + emailCC + "&subject=" + emailSubject + "&body=" + emailBody;
    });
</script>

<body>
    <h1>Team</h1>
    <select id="teamName">
        <option value="[email protected]">Team A</option>
        <option value="[email protected]">Team B</option>
        <option value="[email protected]">Team C</option>
    </select><br><br>
    <h1>CC</h1>
    <input type="text" id="CC"><br><br>
    <h1>Issue</h1>
    <input type="text" id="issue"><br><br>
    <h1>Ticket Number</h1>
    <input type="text" id="ticketNumber"><br><br>
    <h1>Customer contact info</h1>
    <input type="text" id="contactInformation"><br><br>
    <h1>Requested action</h1>
    <input type="radio" name="requestedAction" class="requestedAction" value="Expedite service" id="reqActExpediteService" checked>Expedite service<br>
    <input type="radio" name="requestedAction" class="requestedAction" value="Callback" id="reqActCallback">Callback<br><br>
    <input type="submit" value="Generate email" onclick="generateEmail()">
</body>

In addition, I also need to format the body with line breaks and bold letters. The code above doesn't work. I'm pretty sure it won't work because of the less than/greater than symbols, but I dunno how else to put in HTML code. I know its possible because the old tool I'm replacing was able to achieve it, I just don't know how. Go easy on me, I'm new to jQuery and Javascript. Thanks in advance!

Upvotes: 3

Views: 4488

Answers (2)

zeff777
zeff777

Reputation: 21

function generateEmail() {
  var emailTo = $("#teamName").val();
  var emailCC = $("#CC").val();
  var emailSubject = "Escalation Request - Ticket #: " + $("#ticketNumber").val();
  var emailBody = "Issue: " + $("#issue").val() + "%0A%0AContact info: " + $("#contactInformation").val() + "%0A%0ARequested action: " + $(".requestedAction:checked").val();
  location.href = "mailto:" + emailTo + "?" + 
    (emailCC ? "cc=" + emailCC : "") + 
    (emailSubject ? "&subject=" + emailSubject : "") + 
    (emailBody ? "&body=" + emailBody : "");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Team</h1>
<select id="teamName">
	<option value="[email protected]">Team A</option>
	<option value="[email protected]">Team B</option>
	<option value="[email protected]">Team C</option>
</select><br><br>
<h1>CC</h1>
<input type="text" id="CC"><br><br>
<h1>Issue</h1>
<input type="text" id="issue"><br><br>
<h1>Ticket Number</h1>
<input type="text" id="ticketNumber"><br><br>
<h1>Customer contact info</h1>
<input type="text" id="contactInformation"><br><br>
<h1>Requested action</h1>
<input type="radio" name="requestedAction" class="requestedAction" value="Expedite service" id="reqActExpediteService" checked>Expedite service<br>
<input type="radio" name="requestedAction" class="requestedAction" value="Callback" id="reqActCallback">Callback<br><br>
<input type="submit" value="Generate email" onclick="generateEmail()">

Upvotes: 0

muecas
muecas

Reputation: 4335

You are missing the ? in the mailto url so the querystring parameters are not passed in (note the ? before cc=):

window.location.href = "mailto:" + emailTo + "?cc=" + emailCC + "&subject=" + emailSubject + "&body=" + emailBody;

To add line breaks you could use %0A%0A as a line breakers. This will spawn different paragraphs like so:

&body=first line %0A%0A second line

You also have some errors in you code, some missing val() calls, to get the fields values, and missing conditionals to check if fields are set (to build the query string including those values or not).

function generateEmail() {
  var emailTo = $("#teamName").val();
  var emailCC = $("#CC").val();
  var emailSubject = "Escalation Request - Ticket #: " + $("#ticketNumber").val();
  var emailBody = "Issue: " + $("#issue").val() + "%0A%0AContact info: " + $("#contactInformation").val() + "%0A%0ARequested action: " + $(".requestedAction:checked").val();
  location.href = "mailto:" + emailTo + "?" + 
    (emailCC ? "cc=" + emailCC : "") + 
    (emailSubject ? "&subject=" + emailSubject : "") + 
    (emailBody ? "&body=" + emailBody : "");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Team</h1>
<select id="teamName">
	<option value="[email protected]">Team A</option>
	<option value="[email protected]">Team B</option>
	<option value="[email protected]">Team C</option>
</select><br><br>
<h1>CC</h1>
<input type="text" id="CC"><br><br>
<h1>Issue</h1>
<input type="text" id="issue"><br><br>
<h1>Ticket Number</h1>
<input type="text" id="ticketNumber"><br><br>
<h1>Customer contact info</h1>
<input type="text" id="contactInformation"><br><br>
<h1>Requested action</h1>
<input type="radio" name="requestedAction" class="requestedAction" value="Expedite service" id="reqActExpediteService" checked>Expedite service<br>
<input type="radio" name="requestedAction" class="requestedAction" value="Callback" id="reqActCallback">Callback<br><br>
<input type="submit" value="Generate email" onclick="generateEmail()">

Hope it helps.

Upvotes: 2

Related Questions