Search code examples
javascripthtmlsmtpsmtpjs

Using smtpjs to send the checkbox value of the form in pure javascript


I to use SmtpJS to capture the value of my form and send it to my email.


So far I can get the input value without any problems

but how do I get the value of the checked checkbox?

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

Solution

  • Added submit button to call sendMail function and added class and update value of checkbox to get values!

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