For a locally hosted HTML page, I need to email a bit of user input (name, email, comments).
This is done on a touchscreen display, where visitors can leave their information and comments.
So I was thinking of using a virtual keyboard such as here.
<form action="post" id="emails" onsubmit="return false;">
<input type="text" id="keyboard" placeholder="Enter name..."></input>
<input type="text" id="keyboard2" placeholder="Enter email..."></input>
<input type='submit' id='send' value='Submit' />
</form>
I used this to be able to send the email link.
And with the correct details, the following code works and I get emails in my inbox.
$('#send').click(function() {
$.ajax({
type: 'POST',
url: 'https://mandrillapp.com/api/1.0/messages/send.json',
data: {
'key': "xxxxxxxx",
'message': {
'from_email': "xxxxxx#xxxxxx.com",
'to': [
{
'email': "xxxxxxxx#xxxxxxxxxx.com",
'name': 'xxxxxx',
'type': 'to'
}
],
'autotext': 'true',
'subject': 'TEST! TEST!',
'html': 'test'
}
}
}).done(function(response) {
console.log(response);
alert("You send an email!"); // if you're into that sorta thing
});
});
So this works, as in it sends the email with the text put in here: 'html': 'test'
And instead of 'test', I would obviously like to get 'name + email'.
(Also it is probably for less then 50 emails per month, so just an email will suit my needs for now, nothing with databases and saving all this data. I would just like to get the email.)
So, is it possible and how should I do this?
Is the route I took now doable or would you suggest a completely different way?
// do everything inside after page load.
$(function() {
$('#send').click(function() {
// get values of inputs...
var name = $('#keyboard').val(),
email = $('#keyboard2').val();
$.ajax({
type: 'POST',
url: 'https://mandrillapp.com/api/1.0/messages/send.json',
data: {
'key': "xxxxxxxx",
'message': {
'from_email': "xxxxxx#xxxxxx.com",
'to': [
{
'email': "xxxxxxxx#xxxxxxxxxx.com",
'name': 'xxxxxx',
'type': 'to'
}
],
'autotext': 'true',
'subject': 'TEST! TEST!',
'html': 'Name: ' + name + '\nEmail: ' + email // and use it!
}
}
}).done(function(response) {
console.log(response);
alert("You send an email!"); // if you're into that sorta thing
});
});
});
I've got it working now with the following code:
$(function() {
$('#send').click(function() {
var name = $('#keyboard').val();
var email = $('#keyboard2').val();
$.ajax({
type: 'POST',
url: 'https://mandrillapp.com/api/1.0/messages/send.json',
data: {
'key': "xxxxxxxx",
'message': {
'from_email': "xxxxxx#xxxxxx.com",
'to': [
{
'email': "xxxxxxxx#xxxxxxxxxx.com",
'name': 'xxxxxx',
'type': 'to'
}
],
'autotext': 'true',
'subject': 'TEST! TEST!',
'html': 'Name: ' + name + '\nEmail: ' + email // and use it!
}
}
}).done(function(response) {
console.log(response);
alert("You send an email!"); // if you're into that sorta thing
});
});
});
On other simular problems were value were not shown I read something about the .val() was taking the values on page load (makes sense now), so I moved them down into the click function and it gives me the result I was after.
Related
I'm trying to use an API to send emails through MailChimp. I can avoid using any sort of back end by doing this. I don't know if I am setting up my Jquery script file wrong.
$(document.ready(function () {
$('#survey').click(function() {
$.ajax({
type: “POST”,
url: “https://mandrillapp.com/api/1.0/messages/send.json”,
data: {
‘key’: ‘api Key’,
‘message’: {
‘from_email’: ‘email’,
‘to’: [
{
‘email’: ‘email’,
‘name’: ‘RECIPIENT NAME (OPTIONAL)’,
‘type’: ‘to’
}
],
‘autotext’: ‘true’,
‘subject’: ‘Class Survey’,
‘html’: ‘Here is your survey link: <a>link</a>’
}
}
}).done(function(response) {
console.log(response);
});
});
});
Here are all the errors I am receiving in VS Code
I am not sure why VS Code is highlighting all of the code. I also wanted to mention the console is giving this error even though it doesnt give much info.
Uncaught SyntaxError: Invalid or unexpected token
Thanks for the help!
it's because of the wrong double quotes you are using
use this " instead of this “
use this ' instead of ‘
$(document).ready(function() {
$('#survey').click(function() {
$.ajax({
type: "POST",
url: "https://mandrillapp.com/api/1.0/messages/send.json",
data: {
'key': 'api Key',
'message': {
'from_email': 'email',
'to': [
{
'email': 'email',
'name': 'RECIPIENT NAME (OPTIONAL)',
'type': 'to'
}
],
'autotext': 'true',
'subject': 'Class Survey',
'html': 'Here is your survey link: <a>link</a>'
}
}
}).done(function(response) {
console.log(response);
});
});
});
I like to send an email to the administrator when a user adds a item to my List. I already changed the NewForm for the list and execute the add item with:
SP.SOD.executeFunc('sp.js', 'SP.ClientContext', retrieveListItems);
Now in my SharePoint the email notification on Lists has been disabled by the company. So I'd like some code to send an email automatically after the user added an item.
I already have the username of the person who added the item.
var loginName = "";
var userid = _spPageContextInfo.userId;
GetCurrentUser();
function GetCurrentUser() {
var requestUri = _spPageContextInfo.webAbsoluteUrl + "/_api/web/getuserbyid(" + userid + ")";
The email has to be send to an address of the companies outlook server. An SMTP can be used.
Marco
Here is a little code snippet to send email using javascript.
function getUserEmail(){
$.ajax({
url:spPageContextInfo.webAbsoluteUrl + "/_api/web/getuserbyid("+_spPageContextInfo.userId+")?$select=Email",
headers:{"Accept": "application/json;odata=verbose","content-type": "application/json;odata=verbose"},
success:function(result){
var email = result.d.Email;
sendEmail("xxxx#email.com", email, "body", "subject");
}
});
}
function sendEmail(from, to, body, subject) {
var siteurl = _spPageContextInfo.webServerRelativeUrl;
var urlTemplate = siteurl + "/_api/SP.Utilities.Utility.SendEmail";
$.ajax({
contentType: 'application/json',
url: urlTemplate,
type: "POST",
data: JSON.stringify({
'properties': {
'__metadata': {
'type': 'SP.Utilities.EmailProperties'
},
'From': from,
'To': {
'results': [to]
},
'Body': body,
'Subject': subject
}
}),
headers: {
"Accept": "application/json;odata=verbose",
"content-type": "application/json;odata=verbose",
"X-RequestDigest": jQuery("#__REQUESTDIGEST").val()
},
success: function (data) {
console.log(data);
},
error: function (err) {
console.error(err);
}
});
}
But it also depends on your scenario. Can you give us more details about:
I already changed the NewForm for the list and execute the add item with:
How did you proceed?
Are you working on on-premise or online instance?
It seems that it was still possible to set an alert on a list when an item was added. So that solved my problem.
We have a scheduling system on our site.
We're trying to set it up so when someone clicks the button, along with the command the button already has, it will send an email through Mandrill.
Currently the button is under the class, .bookingjs-form-button.
Our question is, how can we specify the following java/jQuery to work with just the .bookingjs-form-button. The system is embedded, we have access to everything but the HTML, which is why we can't simply do the following.
Thanks in advance!
HTML
<form name="mail">
<input type="button" value="Click!" onClick="sendMail()">
</form>
JavaScript
function sendMail() {
$.ajax({
type: "POST",
url: "https://mandrillapp.com/api/1.0/messages/send.json",
data: {
'key': 'YOUR_KEY',
'message': {
'from_email': 'YOUR_SENDER#example.com',
'to': [{
'email': 'YOUR_RECEIVER#example.com',
'name': 'YOUR_RECEIVER_NAME',
'type': 'to'
}],
'subject': 'title',
'html': 'html can be used'
}
}
});
}
Your code is working, but you can use it like so:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div id='send'>Send</div>
<script>
$('#send').click(function() {
$.ajax({
type: "POST",
url: "https://mandrillapp.com/api/1.0/messages/send.json",
data: {
'key': 'YOUR_KEY',
'message': {
'from_email': 'YOUR_SENDER#example.com',
'to': [{
'email': 'YOUR_RECEIVER#example.com',
'name': 'YOUR_RECEIVER_NAME',
'type': 'to'
}],
'subject': 'title',
'html': 'html can be used'
}
}
});
});
</script>
I am trying to load a website into a div (div.content).
The website requires a login via a POST.
The javascript tries to load the site, detects the redirect to the login form, POSTs the username and password and finally reloads the url since authentication was succesful.
Now the problem is that the url is not constructed correctly. The url should be like this :
https://mysite.com/WebUntis/index.do?school=schoolname#Timetable?
onlyTimetable=true&ajaxCommand=renderTimetable&date=20130418&type=1&id=17
&formatId=2&departmentId=-1&buildingId=-1
but the jquery builds it like this:
https://mysite.com/WebUntis/index.do?
onlyTimetable=true&ajaxCommand=renderTimetable&date=20130418&type=1&id=17
&formatId=2&departmentId=-1&buildingId=-1.
Can somebody help me out here? I checked the syntax by looking at a lot of examples, but I am unable to find the fix.
function openUrl()
{
jQuery.ajax({
url: 'https://mysite.com/WebUntis/index.do?school=schoolname#Timetable?',
type:'GET',
dataType: 'html',
data: {
//school: 'schoolname',
ajaxCommand: 'renderTimetable',
onlyTimetable: 'true',
date: '20130418',
type: '1',
id: '17',
formatId: '2',
departmentId: '-1',
buildingId: '-1'
},
success: function(result) {
var html = jQuery('<div>').html(result);
if(html.find("form").attr("id") == "login")//login form found
{
alert("Trying to login...");
login(); //This just POSTs a username and password
};
$('div.content').html(result);
},
});
}
Try encoding the parameter school
function openUrl()
{
jQuery.ajax({
url: 'https://mysite.com/WebUntis/index.do',
type:'GET',
dataType: 'html',
data: {
school: encodeURIComponent('schoolname#Timetable?'),
ajaxCommand: 'renderTimetable',
onlyTimetable: 'true',
date: '20130418',
type: '1',
id: '17',
formatId: '2',
departmentId: '-1',
buildingId: '-1'
},
success: function(result) {
var html = jQuery('<div>').html(result);
if(html.find("form").attr("id") == "login")//login form found
{
alert("Trying to login...");
login(); //This just POSTs a username and password
};
$('div.content').html(result);
},
});
}
I'm trying to post to the active users wall with a mp3 attachment. It works fine from
Facebook's Test Console (see below), but when I call it from my mobile app, It only posts the message. What am I missing here :(
Facebook's Test Console: http://developers.facebook.com/docs/reference/rest/stream.publish/
Here is my JS...
Login
FB.login(
function(response) {
if (response.authResponse) {
alert('logged in');
} else {
alert('not logged in');
}
},{ scope: "email,user_likes,publish_stream,offline_access" } //added offline_access to see if that was the problem
);
Post to wall with attachment
var attachment = {
'message': 'testing',
'attachment': {'media': [{
'type': 'mp3',
'src': 'http://www.looptvandfilm.com/blog/Radiohead%20-%20In%20Rainbows/01%20-%20Radiohead%20-%2015%20Step.MP3',
'title': 'Test Title',
'artist': 'My Artist',
'album': 'My Album' }]}
};
FB.api('/me/feed', 'post', attachment, function(response) {
if (!response || response.error) {
alert(response.error.message);
} else {
alert('Post ID: ' + response.id);
}
});
var attachment = {
'message': 'testing',
'source': 'http://www.looptvandfilm.com/blog/Radiohead%20-%20In%20Rainbows/01%20-%20Radiohead%20-%2015%20Step.MP3'
};
This will post the mp3 to your feed allowing a user to click a play button inline. See working example here: http://jsfiddle.net/dmcs/aggJc/1/
As you will note, that when you POST data to the Graph API, the formatting is different than when you GET the same object back. Posting is kinda shorthand notation version and the Getting is the long hand.