I’ve been at this for hours, searching for answers, reading other people’s issues and I haven’t been able to fix this.
The setup: I’m hosting a website on AWS (S3 Static page), and I’d like a user to submit their input via a Contact Form. Inline javascript will intercept that input and send it to an SNS topic, which then emails me the information.
The issue: I get “null”, [object HTMLInputElement], or just blank values when I try to retrieve Name, Email, and Message inputs.
What I’ve tried:
- document.querySelector(‘#Name’);
- document.getElementById(‘Email’).value;
- document.getElementById(‘Email’);
Any help would be greatly appreciated! Cognito and SNS are working perfectly, I just need to resolve this Javascript issue.
My code (I’ve trimmed it down to just the contact form):
JavaScript
x
101
101
1
<!DOCTYPE html>2
<html lang="en" dir="ltr">3
4
<head>5
<meta charset="utf-8">6
<title>Catering</title>7
<!-- <link rel="stylesheet" href="contact-form.css"> -->8
<link rel="shortcut icon" type="image/png" href="media/logo.png"/>9
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">10
<script src="https://sdk.amazonaws.com/js/aws-sdk-2.1053.0.min.js"></script>11
12
</head>13
14
<body>15
16
<div id="page-container">17
<div id="content-wrap">18
19
<main>20
<div class="fcf-body">21
22
<div id="fcf-form">23
<h3 class="fcf-h3">Request a quote for your event</h3>24
25
<form id="fcf-form-id" class="fcf-form-class" onsubmit="LPAWS.sendToTopic(); return false;">26
27
<div class="fcf-form-group">28
<label for="Name" class="fcf-label">Your name:</label>29
<div class="fcf-input-group">30
31
<input type="text" placeholder="Enter your name" id="Name" name="Name" class="fcf-form-control" required>32
</div>33
</div>34
35
<div class="fcf-form-group">36
<label for="Email" class="fcf-label">Your email address:</label>37
<div class="fcf-input-group">38
39
<input type="email" placeholder="Enter your email" id="Email" name="Email" class="fcf-form-control" required>40
</div>41
</div>42
43
<div class="fcf-form-group">44
<label for="Message" class="fcf-label">Your message:</label>45
<div class="fcf-input-group">46
47
<textarea id="Message" placeholder="Enter your message" name="Message" class="fcf-form-control" rows="6" maxlength="3000" required></textarea>48
</div>49
</div>50
51
<div class="fcf-form-group">52
<button type="submit" id="fcf-button" class="fcf-btn fcf-btn-primary fcf-btn-lg fcf-btn-block">Send Message</button>53
</div>54
55
</form>56
</div>57
58
</div>59
</main>60
61
62
<script type="text/javascript">63
var LPAWS = {};64
65
// Initialize the Amazon Cognito credentials provider66
AWS.config.region = 'us-east-1';67
AWS.config.credentials = new AWS.CognitoIdentityCredentials({68
IdentityPoolId: 'us-east-1:b99c6b09-64fe-4792-990e-9bb66ffca728',69
});70
71
var intro = "Name: "72
// Used to be document.querySelector('#Name') vvv73
var name = document.querySelector('#Name');74
var email = document.getElementById('Email').value;75
var message = document.getElementById('Message').value;76
var fullMessage = intro.concat(name, " n ", "Email: ", email, " n ", "Message: ", message, " n ")77
78
LPAWS.sendToTopic = function() {79
var sns = new AWS.SNS();80
var params = {81
//Message: 'Hello topic', /* required */82
Message: fullMessage,83
// This will be the subject of the email vvv84
Subject: 'New Request from Website',85
TopicArn: 'arn:aws:sns:us-east-1:186570641799:EmailSeba'86
};87
// scoped to webpage URL with SNS access policy 88
sns.publish(params, function(err, data) {89
if (err) console.log(err, err.stack); // an error occurred90
else console.log(data); // successful response91
});92
};93
</script>94
95
</div>96
97
</div>98
99
</body>100
</html>101
Advertisement
Answer
The solution lies in how you are selecting your inputs and reading their values.
In the current state you store the value property in a variable, like with email and message. Doing this will store the value inside of the value property at that time. Which, when loading the page, is an empty string.
You can easily solve this by moving the reading of the value property inside of your LPAWS.sendToTopic function, which is triggered on the submit event.
By doing this you read the value property at the time that you submit the form.
JavaScript
1
23
23
1
var nameInput = document.getElementById('Name');2
var emailInput = document.getElementById('Email');3
var messageInput = document.getElementById('Message');4
5
LPAWS.sendToTopic = function() {6
var name = nameInput.value;7
var email = emailInput.value;8
var message = messageInput.value;9
10
var fullMessage = intro.concat(name, " n ", "Email: ", email, " n ", "Message: ", message, " n ")11
12
var sns = new AWS.SNS();13
var params = {14
//Message: 'Hello topic', /* required */15
Message: fullMessage,16
// This will be the subject of the email vvv17
Subject: 'New Request from Website',18
TopicArn: 'arn:aws:sns:us-east-1:186570641799:EmailSeba'19
};20
21
22
};23
JavaScript
1
106
106
1
<!DOCTYPE html>2
<html lang="en" dir="ltr">3
4
<head>5
<meta charset="utf-8">6
<title>Catering</title>7
<!-- <link rel="stylesheet" href="contact-form.css"> -->8
<link rel="shortcut icon" type="image/png" href="media/logo.png" />9
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">10
<script src="https://sdk.amazonaws.com/js/aws-sdk-2.1053.0.min.js"></script>11
12
</head>13
14
<body>15
16
<div id="page-container">17
<div id="content-wrap">18
19
<main>20
<div class="fcf-body">21
22
<div id="fcf-form">23
<h3 class="fcf-h3">Request a quote for your event</h3>24
25
<form id="fcf-form-id" class="fcf-form-class" onsubmit="LPAWS.sendToTopic(); return false;">26
27
<div class="fcf-form-group">28
<label for="Name" class="fcf-label">Your name:</label>29
<div class="fcf-input-group">30
31
<input type="text" placeholder="Enter your name" id="Name" name="Name" class="fcf-form-control" required>32
</div>33
</div>34
35
<div class="fcf-form-group">36
<label for="Email" class="fcf-label">Your email address:</label>37
<div class="fcf-input-group">38
39
<input type="email" placeholder="Enter your email" id="Email" name="Email" class="fcf-form-control" required>40
</div>41
</div>42
43
<div class="fcf-form-group">44
<label for="Message" class="fcf-label">Your message:</label>45
<div class="fcf-input-group">46
47
<textarea id="Message" placeholder="Enter your message" name="Message" class="fcf-form-control" rows="6" maxlength="3000" required></textarea>48
</div>49
</div>50
51
<div class="fcf-form-group">52
<button type="submit" id="fcf-button" class="fcf-btn fcf-btn-primary fcf-btn-lg fcf-btn-block">Send Message</button>53
</div>54
55
</form>56
</div>57
58
</div>59
</main>60
61
62
<script type="text/javascript">63
var LPAWS = {};64
65
// Initialize the Amazon Cognito credentials provider66
AWS.config.region = 'us-east-1';67
AWS.config.credentials = new AWS.CognitoIdentityCredentials({68
IdentityPoolId: 'us-east-1:b99c6b09-64fe-4792-990e-9bb66ffca728',69
});70
71
var intro = "Name: "72
// Used to be document.querySelector('#Name') vvv73
var nameInput = document.getElementById('Name');74
var emailInput = document.getElementById('Email');75
var messageInput = document.getElementById('Message');76
77
LPAWS.sendToTopic = function() {78
var name = nameInput.value;79
var email = emailInput.value;80
var message = messageInput.value;81
82
var fullMessage = intro.concat(name, " n ", "Email: ", email, " n ", "Message: ", message, " n ")83
84
var sns = new AWS.SNS();85
var params = {86
//Message: 'Hello topic', /* required */87
Message: fullMessage,88
// This will be the subject of the email vvv89
Subject: 'New Request from Website',90
TopicArn: 'arn:aws:sns:us-east-1:186570641799:EmailSeba'91
};92
// scoped to webpage URL with SNS access policy 93
sns.publish(params, function(err, data) {94
if (err) console.log(err, err.stack); // an error occurred95
else console.log(data); // successful response96
});97
};98
</script>99
100
</div>101
102
</div>103
104
</body>105
106
</html>