Trouble extracting Contact Form input to javascript function-CodePudding

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 >

            <div id="fcf-form">
            <h3 >Request a quote for your event</h3>
        
            <form id="fcf-form-id"  onsubmit="LPAWS.sendToTopic(); return false;">
                
                <div >
                    <label for="Name" >Your name:</label>
                    <div >

                        <input type="text" placeholder="Enter your name" id="Name" name="Name"  required>
                    </div>
                </div>
        
                <div >
                    <label for="Email" >Your email address:</label>
                    <div >

                        <input type="email" placeholder="Enter your email" id="Email" name="Email"  required>
                    </div>
                </div>
        
                <div >
                    <label for="Message" >Your message:</label>
                    <div >

                        <textarea id="Message" placeholder="Enter your message" name="Message"  rows="6" maxlength="3000" required></textarea>
                    </div>
                </div>
        
                <div >
                    <button type="submit" id="fcf-button" >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>

CodePudding user response：

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 >

          <div id="fcf-form">
            <h3 >Request a quote for your event</h3>

            <form id="fcf-form-id"  onsubmit="LPAWS.sendToTopic(); return false;">

              <div >
                <label for="Name" >Your name:</label>
                <div >

                  <input type="text" placeholder="Enter your name" id="Name" name="Name"  required>
                </div>
              </div>

              <div >
                <label for="Email" >Your email address:</label>
                <div >

                  <input type="email" placeholder="Enter your email" id="Email" name="Email"  required>
                </div>
              </div>

              <div >
                <label for="Message" >Your message:</label>
                <div >

                  <textarea id="Message" placeholder="Enter your message" name="Message"  rows="6" maxlength="3000" required></textarea>
                </div>
              </div>

              <div >
                <button type="submit" id="fcf-button" >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>