HTML/JS问卷页面：实现自定义邮箱接收结果功能需求

Let's fix your issues step by step: first we'll correct a bug in your score calculation logic, then add an email input field so users can specify the recipient, and finally update the email sending flow to use the custom input value.

Step 1: Fix the Score Calculation Bug #

In your original JavaScript, you had swapped the question counters for Section 1 and Section 2 — this was causing incorrect percentage calculations. We'll fix that first to ensure your results are accurate.

Step 2: Add Email Input Field #

We'll replace the static mailto link with an email input field and a dedicated send button in the results section, so users can enter their desired recipient address.

Step 3: Update Email Sending Logic #

We'll create a new function to dynamically build the mailto URL using the user-provided email and formatted survey results, then trigger the email client programmatically.

Modified Full Code #

HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <title>Survey Question</title> 
  <meta charset="utf-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> 
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> 
  <style>
    @media print {
      body * { visibility: hidden; }
      .final-results * { visibility: visible; }
      .final-results { position: absolute; left: 0; top: 0; right: 0; bottom: 0; }
    }
    table, table tr th, table tr td { border: 1px solid black; }
  </style>
</head> 
<body> 
<section class="container py-4"> 
  <div class="row"> 
    <div class="col-md-12"> 
      <h2>Survey</h2> 
      <ul id="tabs" class="nav nav-tabs"> 
        <li class="nav-item"><a href="" data-target="#section1" data-toggle="tab" class="nav-link small text-uppercase active">Section 1</a></li> 
        <li class="nav-item"><a href="" data-target="#section2" data-toggle="tab" class="nav-link small text-uppercase">Section 2</a></li> 
        <li class="nav-item"><a href="" data-target="#results" data-toggle="tab" class="nav-link small text-uppercase">Results</a></li> 
      </ul> 
      <br> 
      <div id="tabsContent" class="tab-content"> 
        <div id="section1" class="tab-pane fade active show"> 
          <div class="section-1-questions"> 
            <fieldset class="form-group"> 
              <div class="row"> 
                <legend class="col-form-label col-sm-2 pt-0">Question 1:</legend> 
                <div class="col-sm-10"> 
                  <div class="form-check section-1"> 
                    <input class="form-check-input" type="radio" name="question1" id="gridRadios1" value="1"> 
                    <label class="form-check-label" for="gridRadios1"> 1 </label> 
                  </div> 
                  <div class="form-check section-1"> 
                    <input class="form-check-input " type="radio" name="question1" id="gridRadios2" value="2"> 
                    <label class="form-check-label" for="gridRadios2"> 2 </label> 
                  </div> 
                  <div class="form-check section-1"> 
                    <input class="form-check-input" type="radio" name="question1" id="gridRadios3" value="3"> 
                    <label class="form-check-label" for="gridRadios3"> 3 </label> 
                  </div> 
                </div> 
              </div> 
            </fieldset> 
            <fieldset class="form-group"> 
              <div class="row"> 
                <legend class="col-form-label col-sm-2 pt-0">Question 2:</legend> 
                <div class="col-sm-10"> 
                  <div class="form-check section-1"> 
                    <input class="form-check-input" type="radio" name="question2" id="gridRadios4" value="1"> 
                    <label class="form-check-label" for="gridRadios4"> 1 </label> 
                  </div> 
                  <div class="form-check section-1"> 
                    <input class="form-check-input" type="radio" name="question2" id="gridRadios5" value="2"> 
                    <label class="form-check-label" for="gridRadios5"> 2 </label> 
                  </div> 
                  <div class="form-check section-1"> 
                    <input class="form-check-input" type="radio" name="question2" id="gridRadios6" value="3"> 
                    <label class="form-check-label" for="gridRadios6"> 3 </label> 
                  </div> 
                </div> 
              </div> 
            </fieldset> 
            <fieldset class="form-group"> 
              <div class="row"> 
                <legend class="col-form-label col-sm-2 pt-0">Question 3:</legend> 
                <div class="col-sm-10"> 
                  <div class="form-check section-1"> 
                    <input class="form-check-input" type="radio" name="question3" id="gridRadios7" value="1"> 
                    <label class="form-check-label" for="gridRadios7"> 1 </label> 
                  </div> 
                  <div class="form-check section-1"> 
                    <input class="form-check-input" type="radio" name="question3" id="gridRadios8" value="2"> 
                    <label class="form-check-label" for="gridRadios8"> 2 </label> 
                  </div> 
                  <div class="form-check section-1"> 
                    <input class="form-check-input" type="radio" name="question3" id="gridRadios9" value="3"> 
                    <label class="form-check-label" for="gridRadios9"> 3 </label> 
                  </div> 
                </div> 
              </div> 
            </fieldset> 
          </div> 
        </div> 
        <div id="section2" class="tab-pane fade"> 
          <div class="section-2-question"> 
            <fieldset class="form-group"> 
              <div class="row"> 
                <legend class="col-form-label col-sm-2 pt-0">Question 4:</legend> 
                <div class="col-sm-10"> 
                  <div class="form-check section-2"> 
                    <input class="form-check-input" type="radio" name="question4" id="gridRadios10" value="1"> 
                    <label class="form-check-label" for="gridRadios10"> 1 </label> 
                  </div> 
                  <div class="form-check section-2"> 
                    <input class="form-check-input" type="radio" name="question4" id="gridRadios11" value="2"> 
                    <label class="form-check-label" for="gridRadios11"> 2 </label> 
                  </div> 
                  <div class="form-check section-2"> 
                    <input class="form-check-input" type="radio" name="question4" id="gridRadios12" value="3"> 
                    <label class="form-check-label" for="gridRadios12"> 3 </label> 
                  </div> 
                </div> 
              </div> 
            </fieldset> 
            <fieldset class="form-group"> 
              <div class="row"> 
                <legend class="col-form-label col-sm-2 pt-0">Question 5:</legend> 
                <div class="col-sm-10"> 
                  <div class="form-check section-2"> 
                    <input class="form-check-input" type="radio" name="question5" id="gridRadios13" value="1"> 
                    <label class="form-check-label" for="gridRadios13"> 1 </label> 
                  </div> 
                  <div class="form-check section-2"> 
                    <input class="form-check-input" type="radio" name="question5" id="gridRadios14" value="2"> 
                    <label class="form-check-label" for="gridRadios14"> 2 </label> 
                  </div> 
                  <div class="form-check section-2"> 
                    <input class="form-check-input" type="radio" name="question5" id="gridRadios15" value="3"> 
                    <label class="form-check-label" for="gridRadios15"> 3 </label> 
                  </div> 
                </div> 
              </div> 
            </fieldset> 
            <fieldset class="form-group"> 
              <div class="row"> 
                <legend class="col-form-label col-sm-2 pt-0">Question 6:</legend> 
                <div class="col-sm-10"> 
                  <div class="form-check section-2"> 
                    <input class="form-check-input" type="radio" name="question6" id="gridRadios16" value="1"> 
                    <label class="form-check-label" for="gridRadios16"> 1 </label> 
                  </div> 
                  <div class="form-check section-2"> 
                    <input class="form-check-input" type="radio" name="question6" id="gridRadios17" value="2"> 
                    <label class="form-check-label" for="gridRadios17"> 2 </label> 
                  </div> 
                  <div class="form-check section-2"> 
                    <input class="form-check-input" type="radio" name="question6" id="gridRadios18" value="3"> 
                    <label class="form-check-label" for="gridRadios18"> 3 </label> 
                  </div> 
                </div> 
              </div> 
            </fieldset> 
            <fieldset class="form-group"> 
              <div class="row"> 
                <legend class="col-form-label col-sm-2 pt-0">Question 7:</legend> 
                <div class="col-sm-10"> 
                  <div class="form-check section-2"> 
                    <input class="form-check-input" type="radio" name="question7" id="gridRadios19" value="1"> 
                    <label class="form-check-label" for="gridRadios19"> 1 </label> 
                  </div> 
                  <div class="form-check section-2"> 
                    <input class="form-check-input" type="radio" name="question7" id="gridRadios20" value="2"> 
                    <label class="form-check-label" for="gridRadios20"> 2 </label> 
                  </div> 
                  <div class="form-check section-2"> 
                    <input class="form-check-input" type="radio" name="question7" id="gridRadios21" value="3"> 
                    <label class="form-check-label" for="gridRadios21"> 3 </label> 
                  </div> 
                </div> 
              </div> 
            </fieldset> 
          </div> 
        </div> 
        <div id="results" class="tab-pane fade"> 
          <div class="final-results"></div> 
          <br> 
          <button type="button" class="btn btn-success" onclick="displayRadioValue()"> Show Results </button> 
          <br> 
          <br> 
          <div id="control" style="display: none">
            <!-- Added email input field -->
            <div class="form-group mb-3">
              <label for="recipientEmail">Recipient Email:</label>
              <input type="email" class="form-control" id="recipientEmail" placeholder="Enter email address" required>
            </div>
            <button id="sendEmailBtn" class="btn btn-link">Send to email</button>&nbsp;
            <button onclick="window.print()" class="btn btn-warning">Send to PDF</button>
          </div> 
        </div> 
      </div> 
    </div> 
  </div> 
</section> 
<script>
function displayRadioValue() {
  let section1 = document.querySelectorAll('.section-1 > input[type="radio"]')
  let section2 = document.querySelectorAll('.section-2 > input[type="radio"]')
  let section1Total = 0
  let section2Total = 0
  let section1Question = 0
  let section2Question = 0
  let finalResults = document.querySelector('.final-results')
  finalResults.innerHTML = ''

  //Section 1 - Fixed counter increment
  section1.forEach(function(radio, index) {
    if (radio.checked) {
      section1Question++
      section1Total += +radio.value
    }
  })

  //Section 2 - Fixed counter increment
  section2.forEach(function(radio, index) {
    if (radio.checked) {
      section2Question++
      section2Total += +radio.value
    }
  })

  //Final Results and validation
  if (section1Total > 0 && section2Total > 0) {
    finalResults.innerHTML += genTable(section1Question, section1Total, 1)
    finalResults.innerHTML += genTable(section2Question, section2Total, 2)
    document.getElementById("control").style.display = "block";
  } else {
    finalResults.innerHTML = 'Snap! Please select at least one survey question from each section '
  }
}

function genTable(ques, total, section) {
  var result = "<b>Section " + section + ":</b><br>"
  var tr = "<tr><th>" + total + "</th><th>" + ((total / (ques * 3)) * 100).toFixed(2) + "%</th></tr>"
  result += "<table><thead><tr><th>Total Score</th><th>Percentage</th></tr></thead><tbody>" + tr + "</tbody></table>"
  return result
}

// New function to handle dynamic email sending
function sendSurveyResults() {
  const recipientEmail = document.getElementById('recipientEmail').value.trim();
  const resultsText = document.querySelector('.final-results').innerText;
  
  if (!recipientEmail) {
    alert('Please enter a valid recipient email!');
    return;
  }

  // Encode special characters for mailto URL
  const subject = encodeURIComponent('Survey Response');
  const body = encodeURIComponent(resultsText);
  const mailtoUrl = `mailto:${recipientEmail}?subject=${subject}&body=${body}`;
  
  // Open default email client with pre-filled content
  window.location.href = mailtoUrl;
}

// Attach click listener to send button
document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('sendEmailBtn').addEventListener('click', sendSurveyResults);
});
</script>
</body> 
</html>

Key Improvements: #

1. Fixed Counter Bug: Swapped the incorrect question counter increments in Section 1 and Section 2 to ensure percentage calculations are accurate.
2. Dynamic Email Input: Added a required email field so users can specify exactly where to send results, no more fixed recipient.
3. Programmatic Mailto: Built the email link dynamically using encodeURIComponent to handle special characters in results text, ensuring the email body formats correctly.
4. Basic Validation: Added a check to alert users if they try to send without entering an email address.

内容的提问来源于stack exchange，提问作者jugal