Message not sent, think it doesnt get form data? #9

Mikael-UXUI · 2023-05-21T19:56:57Z

Mikael-UXUI
May 21, 2023

Hello,
Can anyone see what I'm doing wrong? I want to take form data by callin sendMail() and send it to emailjs and use their free service to sent it to my gmail. I have excluded css here I dont think its relevant. Well Im no developer so I could be totaly wrong there. Im trying too combine w3schools modal and form tutorial with this tutorial Send Email using HTML + JavaScript (EmailJs Tutorial) https://www.youtube.com/watch?v=dgcYOm8n8ME

My html and js file.

my html.txt

myJS.txt

Thanks

Answered by Mikael-UXUI

May 27, 2023

Hello, Simple answer Im not a programer so my understanding of this is very limited 🙂 Second off, Im not sure anymore that emailsjs actually is the problem. it may be my other not so well witten javascript functions blocking I think. But I will take a look at .sendForm to see if that can solve my problem. thank you for your help so far, I really apriciate it. /Mike

View full answer

xr0master · 2023-05-23T14:58:59Z

xr0master
May 23, 2023
Maintainer

Please share your code directly here.

2 replies

DineshK1512 May 25, 2023

Need to trigger a mail with the below form's result table. Mail is not triggered

<!DOCTYPE html>
<html>
<head>
  <title>Website Cost Estimation</title>
  <style>
    table {
      border-collapse: collapse;
      width: 100%;
    }
    
    th, td {
      border: 1px solid black;
      padding: 8px;
      text-align: left;
    }
    
    th {
      font-weight: bold;
    }
  </style>
</head>
<body>
  <h2>Website Cost Estimation Form</h2>
  
  <form id="websiteForm">
    <table>
      <tr>
        <td><label for="clientName">Client Name:</label></td>
        <td><input type="text" id="clientName" required pattern="[a-zA-Z0-9]+" /></td>
      </tr>
      <tr>
        <td><label for="domain">Domain:</label></td>
        <td><input type="url" id="domain" required /></td>
      </tr>
      <tr>
        <td><label for="volume">Volume:</label></td>
        <td><input type="number" id="volume" required /></td>
      </tr>
      <tr>
        <td><label for="complexity">Website Complexity:</label></td>
        <td>
          <select id="complexity" required>
            <option value="Simple">Simple</option>
            <option value="Medium">Medium</option>
            <option value="Complex">Complex</option>
          </select>
        </td>
      </tr>
      <tr>
        <td><label for="devHours">Development Hours:</label></td>
        <td><input type="number" id="devHours" required /></td>
      </tr>
      <tr>
        <td><label for="validationHours">Validation/Output Preparation Hours:</label></td>
        <td><input type="number" id="validationHours" required /></td>
      </tr>
    </table>
    
    <button type="button" onclick="calculateCost()">Calculate Cost</button>
    <button type="reset">Reset</button>
  </form>
  
  <table id="outputTable" style="display: none;">
    <tr>
      <th>Client Name</th>
      <th>Domain</th>
      <th>Volume</th>
      <th>Website Complexity</th>
      <th>Server Cost</th>
      <th>Server Cost (30$)</th>
      <th>Per Hour Cost</th>
      <th>Development Hours</th>
      <th>Validation/Output Preparation Hours</th>
      <th>Overall Cost</th>
    </tr>
  </table>
  
  <button id="sendEmailButton" style="display: none;" onclick="sendEmail()">Send Mail</button>

  <script src="https://cdn.emailjs.com/sdk/2.6.4/email.min.js"></script>
  <script>
    function calculateCost() {
      var clientName = document.getElementById("clientName").value;
      var domain = document.getElementById("domain").value;
      var volume = document.getElementById("volume").value;
      var complexity = document.getElementById("complexity").value;
      var serverCost = (volume > 49999)
        ? (volume > 199999)
          ? (volume > 350000)
            ? 4
            : 3
          : 2
        : (volume < 20000)
          ? 0
          : 1;
      var hourlyCost = (complexity === "Simple")
        ? 15
        : (complexity === "Medium")
          ? 18
          : 20;
      var devHours = parseFloat(document.getElementById("devHours").value);
      var validationHours = parseFloat(document.getElementById("validationHours").value);
      var overallCost = ((devHours + validationHours) * hourlyCost) + (serverCost * 30);
      
      var table = document.getElementById("outputTable");
      var newRow = table.insertRow(table.rows.length);
      
      newRow.insertCell().textContent = clientName;
      newRow.insertCell().textContent = domain;
      newRow.insertCell().textContent = volume;
      newRow.insertCell().textContent = complexity;
      newRow.insertCell().textContent = serverCost;
      newRow.insertCell().textContent = "$" + (serverCost * 30);
      newRow.insertCell().textContent = "$" + hourlyCost;
      newRow.insertCell().textContent = devHours;
      newRow.insertCell().textContent = validationHours;
      newRow.insertCell().textContent = "$" + overallCost.toFixed(2);
      
      document.getElementById("outputTable").style.display = "block";
      document.getElementById("sendEmailButton").style.display = "block";
      document.getElementById("websiteForm").reset();
    }
    
    function sendEmail() {
      var recipientEmail = prompt("Enter Recipient Email Address:");
      
      var table = document.getElementById("outputTable");
      var row = table.rows[table.rows.length - 1];
      
      var clientName = row.cells[0].textContent;
      var domain = row.cells[1].textContent;
      var volume = row.cells[2].textContent;
      var complexity = row.cells[3].textContent;
      var serverCost = row.cells[4].textContent;
      var serverCost30 = row.cells[5].textContent;
      var hourlyCost = row.cells[6].textContent;
      var devHours = row.cells[7].textContent;
      var validationHours = row.cells[8].textContent;
      var overallCost = row.cells[9].textContent;

      var templateParams = {
        recipientEmail: recipientEmail,
        clientName: clientName,
        domain: domain,
        volume: volume,
        complexity: complexity,
        serverCost: serverCost,
        serverCost30: serverCost30,
        hourlyCost: hourlyCost,
        devHours: devHours,
        validationHours: validationHours,
        overallCost: overallCost
      };
      
      emailjs.send('*********','*********', templateParams)
        .then(function(response) {
          alert("Email sent successfully!");
        }, function(error) {
          alert("Error occurred while sending email. Please try again later.");
        });
    }
  </script>
</body>
</html>

xr0master May 27, 2023
Maintainer

SDK version 2 has not been supported for many, many years.
I also don't see you set up a public key somewhere.

Mikael-UXUI · 2023-05-24T18:06:21Z

Mikael-UXUI
May 24, 2023
Author

function sendMail() {
    var params = {
      name: document.getElementById("name").value,
      email: document.getElementById("email").value,
      message: document.getElementById("description").value,
    };
  
    const serviceID = "service_myvalue";
    const templateID = "template_myvalue";
  
      emailjs.send(serviceID, templateID, params)
      .then(res=>{
          document.getElementById("name").value = "";
          document.getElementById("email").value = "";
          document.getElementById("description").value = "";
          console.log(res);
          alert("Your message sent successfully!!")
  
      })
      .catch(err=>console.log(err));
  
  }

------- // -------------- HTML

<!-- Trigger/Open The Modal -->
<button id="myBtn">Contact form</button>
<!-- The Modal -->
<div id="myModal" class="modal">
  <!-- Modal content -->
  <div class="modal-content">
    <div class="modal-header">
      <span class="close">&times;</span>
      <h2>Message</h2>
    </div>
    <div class="modal-body">
        <div id="content2">
            <h2>Send an inquiry</h2>
            <form>
                <div>
                    <label for="name">Your name* :</label><br>
                    <input type="text" id="name" name="name" size="15" required maxlength="60"><br>
                </div><br>
                <div>
                    <label for="email">E-mail* :</label><br>
                    <input type="text" id="email" name="email" size="15" required maxlength="60"><br>
                </div><br>
                <div>
                    <label for="description">Message* :</label><br>
                    <textarea name="description" id="description" required></textarea>
                </div><br>
                <div>
                    <input type="submit" onclick="sendMail()" class="submit" name="skicka" value="Submit">
                    <input type="reset" value="Reset">
                </div><br>
            </form>
        </div>
    </div>
    <div class="modal-footer">
      <h3></h3>
    </div>
  </div>
</div>

1 reply

xr0master May 27, 2023
Maintainer

It's hard to say that it doesn't work for you. But I can't help asking why you don't use the emailjs.sendForm method.

Mikael-UXUI · 2023-05-27T13:27:28Z

Mikael-UXUI
May 27, 2023
Author

Hello, Simple answer Im not a programer so my understanding of this is very limited 🙂 Second off, Im not sure anymore that emailsjs actually is the problem. it may be my other not so well witten javascript functions blocking I think. But I will take a look at .sendForm to see if that can solve my problem. thank you for your help so far, I really apriciate it. /Mike

…

________________________________ Från: xr0master ***@***.***> Skickat: den 27 maj 2023 10:24 Till: emailjs-com/help ***@***.***> Kopia: Mikael-UXUI ***@***.***>; Author ***@***.***> Ämne: Re: [emailjs-com/help] Message not sent, think it doesnt get form data? (Discussion #9) It's hard to say that it doesn't work for you. But I can't help asking why you don't use the emailjs.sendForm method. — Reply to this email directly, view it on GitHub<#9 (reply in thread)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/APZCAZ2UZYMJWMEUSXTRSBTXIG24BANCNFSM6AAAAAAYJS5YC4>. You are receiving this because you authored the thread.Message ID: ***@***.***>

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

EmailJS

Message not sent, think it doesnt get form data? #9

{{title}}

Replies: 3 comments 3 replies

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

Select a reply

EmailJS

Message not sent, think it doesnt get form data? #9

Mikael-UXUI May 21, 2023

Replies: 3 comments · 3 replies

xr0master May 23, 2023 Maintainer

DineshK1512 May 25, 2023

xr0master May 27, 2023 Maintainer

Mikael-UXUI May 24, 2023 Author

xr0master May 27, 2023 Maintainer

Mikael-UXUI May 27, 2023 Author

Mikael-UXUI
May 21, 2023

Replies: 3 comments 3 replies

xr0master
May 23, 2023
Maintainer

xr0master May 27, 2023
Maintainer

Mikael-UXUI
May 24, 2023
Author

xr0master May 27, 2023
Maintainer

Mikael-UXUI
May 27, 2023
Author