无法提取 javascript 函数的联系表单输入

Question

我已经花了好几个小时来寻找答案，阅读其他人的问题，但我无法解决这个问题。

设置：我在 AWS 上托管一个网站（S3 静态页面），我希望用户通过联系表提交他们的输入。内联 javascript 将拦截该输入并将其发送到 SNS 主题，然后通过电子邮件将信息发送给我。

问题：当我尝试检索名称、电子邮件和消息输入时，我得到“null”、[object HTMLInputElement] 或空值。

我尝试过的：

document.querySelector('#Name');
document.getElementById('Email').value;
document.getElementById('Email');

如有任何帮助，我们将不胜感激！ Cognito 和 SNS 运行良好，我只需要解决这个 Javascript 问题。

我的代码（我已将其精简为联系表）：

<!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>

Answer 1

解决方案在于您如何选择输入并读取它们的值。

在当前状态下，您将 value 属性存储在一个变量中，就像 email 和 message 一样。这样做会在 value 属性中存储值。加载页面时，它是一个空字符串。

您可以通过移动 value 属性 inside 的 LPAWS.sendToTopic 函数的读数轻松解决此问题，该函数触发于提交事件。

通过这样做，您在提交表单时阅读了 value 属性。

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>

无法提取 javascript 函数的联系表单输入

Trouble extracting Contact Form input to javascript function

html

javascript

contact-form

amazon-sns