Sender email address not included in EmailJS - javascript

When I submit the form, I receive the user's message. However, I don't know who it's from. I don't receive their email address, nor their name. I tried looking at their documentation but wasn't able to get past this. Any help will be appreciated. Thank you!
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/emailjs-com#2/dist/email.min.js"></script>
<script type="text/javascript">
(function () {
// https://dashboard.emailjs.com/admin/integration
emailjs.init("MY_USER_ID");
})();
</script>
<script type="text/javascript">
window.onload = function () {document.getElementById("contact-form").addEventListener("submit", function (event) {
event.preventDefault();
// generate a five digit number for the contact_number variable
this.contact_number.value = Math.random() * 100000 | 0;
// these IDs from the previous steps
emailjs.sendForm("MY_SERVICE_ID", "MY_TEMPLATE_ID", this).then(
function () {
console.log("SUCCESS!");
},
function (error) {
console.log("FAILED...", error);
}
);
});};
</script>
</head>
<body>
<form id="contact-form">
<input type="hidden" name="contact_number" />
<label>Name</label>
<input type="text" name="user_name" />
<label>Email</label>
<input type="email" name="user_email" />
<label>Message</label>
<textarea name="message"></textarea>
<input type="submit" value="Send" />
</form>
</body>

{{message}} is the only thing you can receive from the form for now because your template has two dynamic variables {{from_name}}, {{message}} but you are sending contact_number, user_name, user_email and message which is written in name attributes for each inputs in the form.
You have to match names of template variables and names of form inputs. If you want to maintain your form, you have to modify your template like
from You got a new email from {{from_name}}: {{message}}
to You got a new email from {{user_name}}({{user_email}}): {{message}}
You can also use built-in variables without getting input but I'll leave them because you need to read the documentation for good.

Related

Variable is undefined javascript

Hello I made a "login screen" that when you enter a name you will be transfer to another html file. I made a welcome back screen that says Welcome back, "username". But for some reason the variable that I use to take the value of the username field is undefined.
This is the login screen html code:
<form id="login-form" metod="post" action="main.html">
<div class="txt_field">
<input id="username" type="text" required>
<label>username</label>
</div>
<input onclick="validate()" type="submit" id="submit" value="Login">
</form>
</div>
<script type="text/javascript" src="functions.js"></script>
-> this is the js file:
let username1;
function validate(){
username1=document.getElementById(username).value;
}
document.getElementById('show_username').innerHTML = username1;
-this is the after login html file
<center>
<h1>Welcome back,<br>
<span id="show_username"></span>
</h1>
</center>
<script type="text/javascript" src="functions.js"></script>
**ofc I didn't include all the code for basic reasons.
Here is what happens in JavaScript when you load your page:
// username1 is set to null
let username1;
// validate() function is created
function validate(){
username1=document.getElementById(username).value;
}
// show_username element is populated with username1 (still null)
document.getElementById('show_username').innerHTML = username1;
When you call the validate function, username1 is updated but document.getElementById('show_username') is not.
You also are referencing a username variable instead of 'username' as a string.
Your code will work if you move line 5 into the validate function, and fix that issue.
let username1;
function validate(){
username1=document.getElementById('username').value;
document.getElementById('show_username').innerHTML = username1;
}

Javascript: parse parameters from URL then erase them in URL

I am trying to prefill some fields which are passed from URL as parameter pair. Having
www.example.com.com/myForm#myinput=123
as href send to end users, I am going to prefill the form field "myinput" with "123" after opening the link. However, the users will also see www.example.com.com/myForm#myInput=123 in their browser.
That's why I want to erase "myInput=123" from their URL. The reason for doing that is I don't want my users to see or even change the values in URL while filling the form.
I've tried
history.pushState(null, '', '/modifedURL')
either in HTML body "onload" or jquery "doc ready". As far I tried so far, this works only standalone without any parameter in URL like "www.example.com.com/myForm", but not with the additional injected parameters.
Here is simplified version of code what I got so far. Notice that the modifyURL Method is called successfully, but takes no effect on URL:
<head>
<meta charset="utf-8" />
</head>
<body onload="prefill();">
Your Body Content
<!-- Scripts at the bottom for improved performance. -->
<!-- jQuery, required for all responsive plugins. -->
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<form id="myForm" method="POST">
<input id="myinput" maxlength="50" name="myinput" type="text" />
<br>
<input type="submit" name="submit" />
</form>
<script>
$(document).ready(function() {
//do some code after html is loaded
});
/*
window.onload = function () {
}
*/
function prefill() {
try{
var currentURL = window.location.href;
var n = currentURL.search("#");
var sPageURL = currentURL.substring(n+1);
var urlVal = getURLVal(sPageURL);
document.forms["myForm"]["myInput"].value = urlVal;
//change URL is called, but cannot change the URL!
modifyURL();
} catch(e){
alert("error " + e);
return false;
}
return true;
}
function modifyURL() {
history.pushState(null, '', '/modifedURL');
//even alert will fire, so pushState is skipped!!
alert('URL modified');
}
function getURLVal(query) {
//parse parameter pair in url
}
</script>
</body>
You can include the data diretly in your HTML, if it's meant to always be the same.
There are two ways:
1. <input id="myinput" maxlength="50" name="myinput" type="text" value="123" />
this actually puts the value inside your input field
2. <input id="myinput" maxlength="50" name="myinput" type="text" placeholder="123" />
this only displays it before any real value is inserted by the user (on submit you don't get any value)
I hope this is useful for you

How to urlencode angularjs ng-model realtime

Recently I've started a new project and would like to do some angularjs magic. The problem is i'm not skilled enough in angularjs or javascript to know how I could do it. One requirement is that it has to be in realtime without reloading a page.
So let me start with my questions now. I've got a simple input field and a display section that instantly shows everything that I type in. However I want the display part to be modified on the fly.
<div id="form" class="form-wrap" ng-app="" />
<form action="index.php" method="post" id="form" />
<input type="text" name="url" id="url" value="" ng-model="name" />
<input type="submit" name="form_submit" id="form_submit" value="GOTO" />
</form>
https://example.com/index.php?url={{name}}
</div>
I'm already doing a validation in javascript but I dont know if it needs to be done in javascript or somehow in de anguarjs code itself. Just to be sure my javascript validation code:
<script>
$('<div class="loading"><span class="bounce1"></span><span class="bounce2"></span><span class="bounce3"></span></div>').hide().appendTo('.form-wrap');
$('<div class="success"></div>').hide().appendTo('.form-wrap');
$('#form').validate({
rules: {
url: { required: true, url: true }
},
messages: {
url: {
required: 'Address is requ!red',
url: 'Address is not val!d (https://www.nu.nl)'
}
},
errorElement: 'span',
errorPlacement: function(error, element){
error.appendTo(element.parent());
},
});
</script>
As you might guess by now I want the {{name}} value to be urlencoded realtime so that an url like: https://www.google.nl/?q=a b c will be changed to https://www.google.nl/?q=a%20b%20c However, how should I do this?
Thanks in advance!
Hi you can call a function on ng-change to encode name into url format like below.
I have create a function urlFormat which take name value and convert it to url format and push new variable urlname back.
<div id="form" class="form-wrap" ng-app="" />
<form action="index.php" method="post" id="form" />
<input type="text" name="url" id="url" value="" ng-model="name" ng-change="urlFormat(name)" />
<input type="submit" name="form_submit" id="form_submit" value="GOTO" />
</form>
https://example.com/index.php?url={{urlname}}
</div>
And create that function inside your controller like
$scope.urlFormat = function (name) {
$scope.urlname = encodeURI(name)
}

How do I manually test JavaScript?

I'm trying to learn javascript by making a simple price checking website using the Best Buy products API.
How do I "run" the javascript? My form takes in a product ID number (the SKU) and sends it to validateSKU() on submit. The function processData(data) searches for the product using the SKU.
Nothing is happening when I test the site, and any help would be great; thanks!
<!DOCTYPE html>
<html>
<head>
<title>Learn JavaScript</title>
</head>
<body>
<form id="bestBuyForm" name="bestBuyForm" onsubmit="validateSKU()">
<input id="SKU" name="SKU" required="" type="text">
<label for="SKU">SKU</label>
<input id="email" name="email" type="email">
<label for="email">Email</label>
<input class="button" id="submit" name="submit" type="submit">
</form>
<script>
function validateSKU() {
var SKU = document.forms["bestBuyForm"]["SKU"].value;
var bby = require('bestbuy')('process.env.BBY_API_KEY');
var search = bby.products('sku=' + SKU);
search.then(processData);
}
function processData(data) {
if (!data.total) {
console.log('No products found');
} else {
var product = data.products[0];
console.log('Name:', product.name);
console.log('Price:', product.salePrice);
}
}
</script>
</body>
</html>
Use web console to see what does happen and read about the console API.
Try to bind validateSKU with HTML element addEventListener method. Also you should prevent default form behaviour which cause page reloading on submit. Call event.preventDefault().
Working example code:
<html>
<form id="someForm">
...
<button type="submit">Submit</submit>
</form>
<script>
function validateSKU(event) {
console.log('IT works');
event.preventDefault();
// ...here your code
}
var form = document.getElementById('someForm');
form.addEventListener('submit', validateSKU, false);
</script>
</html>

Submitting Data from tokeninput.js

I have recently set up https://github.com/loopj/jquery-tokeninput on one of my web sites.
I am trying to allow the users of the sites to create a list from a number of options that I give them.. Once the user is done selecting all their items and click submit I get no values back.
Can anyone let me know what I am doing wrong..
HTML
<div>
<input type="text" id="demo-input" name="name" />
<input type="Submit" value="Submit" />
</div>
JS
<script type="text/javascript">
$(document).ready(function() {
$("#demo-input").tokenInput("json.php");
});
</script>
PHP
$name =$_POST["name"]);
This is what I am doing so far to get around the issue..
As the user adds and removes items from the list I am using the onAdd and onDelete functions to add the id's to a hidden field .. Once all the ID's are populated I can use the standard $_post[] command in php to read the values
here is a sample of the code for anyone else who might have the same issue
HTML
<div>
<input type="text" id="list_of_items" name="list_of_items" />
<input type="hidden" id="list_of_items_by_id" name="list_of_items_by_id" />
<input type="Submit" value="Submit" />
</div>
JS
$(document).ready(function(){
var field_value = $("#list_of_items_by_id").val();
$("#list_of_items").tokenInput("json.php",{
hintText: "Start typing the name of the item",
tokenValue:"item_id",
onAdd: function (item) {
var field_value = $('#list_of_items_by_id').val();
if (field_value != ""){
$('#list_of_items_by_id').val(field_value+","+ item.item_id);
}else{
$('#list_of_items_by_id').val(item.user_id);
}
},
onDelete: function (item) {
var field_value = $('#list_of_items_by_id').val().replace(',,',',').replace(item.user_id,'');
$('#list_of_items_by_id').val(field_value);
}
});
});

Categories

Resources