Skip to content
Advertisement

Trouble extracting Contact Form input to javascript function

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>

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.

var nameInput = document.getElementById('Name');
var emailInput = document.getElementById('Email');
var messageInput = document.getElementById('Message');

LPAWS.sendToTopic = function() {
    var name = nameInput.value;
    var email = emailInput.value;
    var message = messageInput.value;

    var fullMessage = intro.concat(name, " n ", "Email: ", email, " n ", "Message: ", message, " n ")

    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'
    };

    ...
};


<!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 nameInput = document.getElementById('Name');
        var emailInput = document.getElementById('Email');
        var messageInput = document.getElementById('Message');

        LPAWS.sendToTopic = function() {
          var name = nameInput.value;
          var email = emailInput.value;
          var message = messageInput.value;

          var fullMessage = intro.concat(name, " n ", "Email: ", email, " n ", "Message: ", message, " n ")

          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>
User contributions licensed under: CC BY-SA
4 People found this is helpful
Advertisement