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):
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Catering</title>
<!-- <link rel="stylesheet" href="contact-form.css"> -->
<link rel="shortcut icon" type="image/png" href="media/logo.png"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="https://sdk.amazonaws.com/js/aws-sdk-2.1053.0.min.js"></script>
</head>
<body>
<div id="page-container">
<div id="content-wrap">
<main>
<div class="fcf-body">
<div id="fcf-form">
<h3 class="fcf-h3">Request a quote for your event</h3>
<form id="fcf-form-id" class="fcf-form-class" onsubmit="LPAWS.sendToTopic(); return false;">
<div class="fcf-form-group">
<label for="Name" class="fcf-label">Your name:</label>
<div class="fcf-input-group">
<input type="text" placeholder="Enter your name" id="Name" name="Name" class="fcf-form-control" required>
</div>
</div>
<div class="fcf-form-group">
<label for="Email" class="fcf-label">Your email address:</label>
<div class="fcf-input-group">
<input type="email" placeholder="Enter your email" id="Email" name="Email" class="fcf-form-control" required>
</div>
</div>
<div class="fcf-form-group">
<label for="Message" class="fcf-label">Your message:</label>
<div class="fcf-input-group">
<textarea id="Message" placeholder="Enter your message" name="Message" class="fcf-form-control" rows="6" maxlength="3000" required></textarea>
</div>
</div>
<div class="fcf-form-group">
<button type="submit" id="fcf-button" class="fcf-btn fcf-btn-primary fcf-btn-lg fcf-btn-block">Send Message</button>
</div>
</form>
</div>
</div>
</main>
<script type="text/javascript">
var LPAWS = {};
// Initialize the Amazon Cognito credentials provider
AWS.config.region = 'us-east-1';
AWS.config.credentials = new AWS.CognitoIdentityCredentials({
IdentityPoolId: 'us-east-1:b99c6b09-64fe-4792-990e-9bb66ffca728',
});
var intro = "Name: "
// Used to be document.querySelector('#Name') vvv
var name = document.querySelector('#Name');
var email = document.getElementById('Email').value;
var message = document.getElementById('Message').value;
var fullMessage = intro.concat(name, " \n ", "Email: ", email, " \n ", "Message: ", message, " \n ")
LPAWS.sendToTopic = function() {
var sns = new AWS.SNS();
var params = {
//Message: 'Hello topic', /* required */
Message: fullMessage,
// This will be the subject of the email vvv
Subject: 'New Request from Website',
TopicArn: 'arn:aws:sns:us-east-1:186570641799:EmailSeba'
};
// scoped to webpage URL with SNS access policy
sns.publish(params, function(err, data) {
if (err) console.log(err, err.stack); // an error occurred
else console.log(data); // successful response
});
};
</script>
</div>
</div>
</body>
</html>