Sending html emails with JavaScript [duplicate] - javascript

This question already has answers here:
Is it possible to add an HTML link in the body of a MAILTO link [duplicate]
(7 answers)
Closed 10 years ago.
I'm creating a form (using only HTML and JavaScript) that sends emails. I want to insert a simple HTML table inside the body of the email. Something like this:
<table border=1>
<tr><td>blabla</td></tr>
</table>
After I click on the "Send" button a JavaScript function is called which sends the email via URL and the POST data appears in my email client - Outlook (which is okay for me) but there is a problem with the formatting. The data in body of the email is in plain text.
Is there any other way to do this only with JavaScript?
Is it necessary to use some kind of server-side scripts (like PHP or others) to format it properly?

You can use JavaScript mailto function. Try this, hope it'll help you
<div id="mailBody"><table border=1> <tr><td>blabla</td></tr> </table></div>
<input type="button" onclick="sendMail();">
Under the script tag
function sendMail()
{
var mailBody=document.getElementById('mailBody').innerHTML;
window.location="mailto:yourmail#domain.com?subject=hii&body="+mailBody;
}

If you want to use only the java script to send HTML email try like below...
But i have NOT Recommended this type of Mail sending....
Sending HTML Email by Javascript :
function SendEmail()
{
var outlookApp = new ActiveXObject("Outlook.Application");
var nameSpace = outlookApp.getNameSpace("MAPI");
mailFolder = nameSpace.getDefaultFolder(6);
mailItem = mailFolder.Items.add('IPM.Note.FormA');
mailItem.Subject = "Me";
mailItem.To = "me#me.com";
mailItem.HTMLBody = "<table border=1> <tr><td>blabla</td></tr> </table>";
mailItem.display(0);
}
if you want to just send a email as plain text by javascript then try like below...
Sending Plain Text by Javascript :
window.open('mailto:test#example.com?subject=subject&body=Testing Email');
Better you use a Server Side Coding to Send a email

What are the < characters are like in if you look at the source? if they are like < or < then you need to disable encoding on these. Also, you need to set formatting to HTML mail. Sorry I am not a PHP guy but I guess you will need server side code for that.

Related

Send Form with MailApp after fetching html. Embed Google Form into email. Generated email contains only text

I want to embed a Google form in an email and send it with MailApp. I'm attempting to use code found at: https://stackoverflow.com/a/23671529/4305236:
var form = FormApp.create('New Form');
....
var url = form.getPublishedUrl();
var response = UrlFetchApp.fetch(url);
var htmlBody = HtmlService.createHtmlOutput(response).getContent();
MailApp.sendEmail({
to: email,
subject: subject,
htmlBody: htmlBody,
});
...
The logs show all the html for the form.
However, when I run the code, the email just looks like text, with the links at bottom. When I "show original" in the email, though, all that html for the form seems to be there, like in the log...
Would greatly appreciate any help.
What generated form looks like, want this to be embedded in email:
What they are getting instead:
Answered here: https://stackoverflow.com/a/60749897/3383907.
Copy/pasting for history purposes:
When Google sends the form to folks directly and embeds the form in the email they are using their new offering called AMP. You can read more about it here:
https://developers.google.com/amp/
https://www.blog.google/products/g-suite/bringing-power-amp-gmail/
https://developers.google.com/gmail/ampemail/
The code you're using gets the raw HTML of the form as it would be rendered for a user in a browser. This code is not in AMP format. Ergo it will not do what you want.
If you want that AMP experience you will need to create the AMP email yourself.
I don't think FormApp has a programatic way to send the form to folks, like you can from https://docs.google.com/forms/.
I hope that helps.

Embedding a link in an email using MailApp

I am working on a project to embed a link (that will activate a function in my script when clicked) into an E-mail using JavaScript in the Google Sheet script editor. I'm not sure if my code is just wrong or if Google just doesn't allow links. Here is my code:
function doStuff(){
var email = "email#emai.com"
var subject = "hi"
var message = "lets hope this works"
MailApp.sendEmail(email, subject, message)
}
MailApp.sendEmail(email, subject,Run JavaScript Code);
First of all there is a syntax error. I do not know what is MailApp but I doubt is gonna work as it is, you should add quotes to handle as a string like this:
MailApp.sendEmail(email, subject,"<a href='javascript:doStuff' onclick='doStuff();'>Run JavaScript Code</a>");
Anyway I agree with #Szymon DziewoƄski, it is very unlikely that an email client interprets javascript. Actually the same email provider could strip it from the body of the email. Take a look to this guide, you will notice that they do not mention javascript at all. Only HTML and CSS.

How to Call Variable from Java to HTML?

I would like to call some variable (code and name -- String) from java class on html class (<label>). And I wonder whether it can be directly applied (without using jsp)? Or it necessary to use javascript?
And if it requires javascript I have added the code below, but it's not working.
<script type="text/javascript">
document.getElementById("lists").innerHTML = name;
</script>
And also this is my java file that store variable code and name.
List<Names> nameList = Common.getNameList(data.getName());
for (int i = 0; i < nameList.size(); i++) {
System.out.println(nameList.get(i).code + "=" + whsList.get(i).name);
}
And in HTML I had,
<div id="lists">
<label>Code<label>
<label>Name<label>
</div>
Please help. Thank you.
No, you can't directly. JavaScript is executed on the client side (browser)
JavaScript is client side scripting lang. and 'Java' run on server side. so you need to send request to server . if you want to use java lang on server side then we need to use servlet or framework like a spring, struts etc.
if you want to use java variable in client side JavaScript then send request to server. you can send request using ajax and send nameList in JSON type from servlet as response then all list available to use in JavaScript ... so you need to refer some example like ...
new link i hope this help
http://www.technicalkeeda.com/jquery/spring-framework-jquery-ajax-request-and-json-response-example

Accessing headers of a google spreadsheet using HTTP GET and Google App Script

I'm trying to return the header row of a Google spreadsheet using doGet() in a Google App Script that's running as a WebApp. I'm using a HTML form to send the GET request to the WebApp and it's all working except I don't know how to return the headers to my javascript. I'll post my code:
HTML:
<form id="getForm" method="get" action="My URL for WebApp">
<label for="sheetGetID">SheetID</label>
<input type="text" name="sheetGetID" id="sheetGetID" value="">
<button class="ui-btn" onclick='submitGET()'>Submit</button>
</form>
Javascript:
function submitGET() {
var headers = $("getForm").submit();
alert(headers);
}
Google App Script:
function doGet(e) {
//Trying To: Get headers from sheetID and then return to app, then have correct labels for the inputs, then use POST to post.
var ss = SpreadsheetApp.openById(ScriptProperties.getProperty('active'));
var sheet = ss.getSheetByName(e.parameter["sheetGetID"]);
//Return the first 3 cells, A1:C1,
var headers = sheet.getRange(1,1,1,sheet.getLastColumn()).getValues()[0];
return ContentService.createTextOutput(JSON.stringify(headers))
.setMimeType(ContentService.MimeType.JSON);
}
I'm getting a JSON object returned but it's just a text output. My question is how would/could I get the JSON returned and stored as the headers variable?
The return of doGet method must be an HTML.
Build another html page and use the call HtmlService.createTemplateFromFile('newPag.html').evaluate()
Inside your page use the tags and put your server side code manipulating the json object. This way you will create a good look and feel and a good maintanable code.
I got this to work a while ago, I forgot to post the answer just in case anyone else needed it.
You need to output it as a JSON object like the API demo. You also need to append "?prefix=?" to the url when you're doing a $.getJSON() call. The prefix part is to tell the JQuery that it is a JSON object you're receiving.
If anyone has troubles with this just comment and this and I'll post all the code I used.
So on your client end, I'm using JQuery Mobile, I'm not sure how to do it without it, you would do something like:
sheetID = $("#sheetGetID").val();
$.getJSON("https://script.google.com/macros/s/YOUR_KEY_GOES_HERE/exec?prefix=?",
{ sheetGetID: sheetID},
function(results) {
var fields = results.split(",");
//Do something with fields
}
);
}
Where #sheetGetID is the textbox where the user can enter the sheet id for headers.
Note the ?prefix=? appended to the URL, that part is for JQuery to know it's receiving JSON. That part is necessary. The URL is your deployed WebApp.
On the Google App Script side, ie Server side, you'd have something like:
function doGet(request) {
var ss = SpreadsheetApp.openById(ScriptProperties.getProperty('active'));
var sheet = ss.getSheetByName(request.parameter["sheetGetID"]);
//Return the first 3 cells, A1:C1,
var headers = sheet.getRange(1,1,1,sheet.getLastColumn()).getValues()[0];
var result = headers.join();
var content = request.parameters.prefix + '(' +JSON.stringify(result) + ')';
return ContentService.createTextOutput(content)
.setMimeType(ContentService.MimeType.JSON);
}
If you have any questions on how the spreadsheet part works theres plenty of documentation on Google's API's. doGet() is called when you use the $.getJSON(), the return from the G.A.S. needs to be JSON. Most of this is covered in the documentation Google has, some of it I found watching Google Developers Live on youtube. If you are trying to do more stuff I highly recommend checking those sources out.
If you have any more questions about what's being called or parameters you can find it easily enough on Google.

Servlet calling from window.showModalDialog(...)

I am calling another application context from window.showModalDialog but confused with following work. Same code to pass parameter within showModalDialg.
var myArguments = new Object();
myArguments.param1 = "Hello World :)";
window.showModalDialog("java2sTarget.html", myArguments, '');
and i can read these myArguments(parameters) in generated HTML using following code:
<script>
document.write(window.dialogArguments.param1);//Hello World :)
</script>
I can't use query string & i am sending myArguments(parameter) because i want to hide parameter from Application user.
Now i am calling servlet from showModalDialog(..)
onclick="window.showModelDialog('http://localhost:7778/app/servlet/test',myArguments,'');"
onclick="window.showModelDialog('http://localhost:7778/app/servlet/test',myArguments,'');"
But as per my knowledge
Servlet --> Servlet container --> HTML+JS+CSS
so JS will be available at last phase, but i want to use in first phase(Servlet).
Now, i need to make some Decision in servelt code based on myArguments(parameter).
is there any way to read these myArguments(parameters) in servlet code?
Pass it as a request parameter in the query string.
var queryString = "param1=" + encodeURIComponent("Hello World :)");
onclick="window.showModelDialog('http://localhost:7778/app/servlet/test?' + queryString, myArguments, '');"
No, there's no other alternative. The request URL is not visible in the modal dialog anyway.
As main objective is to hide query string from User to avoid misuse of those parameters.
I tried following work around.
Developers send hidden parameters to get relative information form source(e.g.:DataBase). And we also know that we can send hidden information in Window.showModalDialog using dialogArguments
Work Around:
(i) I got relative information from server one-step before calling Window.showModalDialog using jQuery.getJSON()
(ii) i used google-gson API at servlet side to convert JavaBeans into Json strings.Solution 1 Solution 2
(iii) Convert JSON into javascript object using jQuery.parseJSON
var args = jQuery.parseJSON(json);
window.showModalDialog("pages/"+args.pageName, args, '');
i used args.pageName to make things dynamic
Please suggest improvements in this work-around. Thanks

Categories