【问题标题】:Using smtpjs to send the checkbox value of the form in pure javascript使用smtpjs以纯javascript发送表单的复选框值
【发布时间】:2021-11-20 08:40:28
【问题描述】:

我使用 SmtpJS 来捕获我的表单的值并将其发送到我的电子邮件。


到目前为止,我可以毫无问题地获取输入值

但是如何获取选中复选框的值?

<div class="form-group">
 <label class="contact_us_title">Name</label>
 <input type="text" class="form-control" id="name" placeholder="Name">
</div>

<div class="form-group">
 <label class="contact_us_title">Question</label>
   <div >
     <label class="checkbox-inline"><input type="checkbox" value="">A</label>
     <label class="checkbox-inline"><input type="checkbox" value="">B</label>
     <label class="checkbox-inline"><input type="checkbox" value="">C</label>
   </div>
</div>

    <script>
    function sendMail() {
      let fields = {
        name: document.querySelector("#name").value,
      };
      let body = 'Name:' + fields.name;
      Email.send({
        Host : "smtp.yourisp.com",
        Username : "username",
        Password : "password",
        To : 'them@website.com',
        From : "you@isp.com",
        Subject: "title",
        Body: body,
      }).then(
              message => alert(message)
      );
    }
  </script>

【问题讨论】:

    标签: javascript html smtp smtpjs


    【解决方案1】:

    添加提交按钮以调用 sendMail 函数并添加类和更新复选框的值以获取值!

    <div class="form-group">
      <label class="contact_us_title">Name</label>
      <input type="text" class="form-control" id="name" placeholder="Name" />
    </div>
    
    <div class="form-group">
      <label class="contact_us_title">Question</label>
      <div>
        <label class="checkbox-inline"
          ><input type="checkbox" class="ques" value="A" />A</label
        >
        <label class="checkbox-inline"
          ><input type="checkbox" class="ques" value="B" />B</label
        >
        <label class="checkbox-inline"
          ><input type="checkbox" class="ques" value="C" />C</label
        >
      </div>
    </div>
    <input type="submit" onclick="sendMail()" />
    
    <script>
      function sendMail() {
        const questionValues = [...document.querySelectorAll('.ques:checked')].map(
          (e) => e.value
        );
        let fields = {
          name: document.querySelector('#name').value,
          question: questionValues,
        };
        console.log(fields);
        let body = 'Name:' + fields.name;
         Email.send({
           Host : "smtp.yourisp.com",
           Username : "username",
           Password : "password",
           To : 'them@website.com',
           From : "you@isp.com",
           Subject: "title",
           Body: body,
         }).then(
                 message => alert(message)
         );
      }
    </script>
    

    【讨论】:

    • 我得到了值,但是我在这里添加后,无论我是否选中多个复选框,显示的值都只有第一个。你能告诉我我做错了哪一边吗?
    • 让 body = '姓名:' + fields.name + '
      ' + '问题:' + fields.question;
    • @KrystalTabo 你想要多个复选框的值吗?
    • @KrystalTabo 现在它将提供多个复选框值!检查更新的。
    • 哦,非常感谢❤️❤️❤️
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-02-11
    • 1970-01-01
    • 2015-02-27
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多