Send HTML/Js page result to mailbox with user typed email address

Question

I have created js/html page and result of this page i am trying to send to mail box.Currently i am using

Send to
                            email

But it is opening the option to select a mail box and than you can send it typing mail id.But i want something like a box in which whatever mail id i have write mail should be send to that mail box. Below is the code :- Js file

    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')
  let result1 = ''
  let result2 = ''
  finalResults.innerHTML = ''

  //Section 1
  section1.forEach(function(radio, index) {
    if (radio.checked) {
      section2Question++
      section1Total += +radio.value
    }
  })

  //Section 2
  section2.forEach(function(radio, index) {
    if (radio.checked) {
      section1Question++
      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";
    document.getElementById("toemail").href += document.querySelector(".final-results").innerText;
  } else {
    finalResults.innerHTML = 'Snap! Please select the atleast one survey question from each section '
  }
}

function genTable(ques, total, section) {
  var result = "Section " + section + ":
"
  var tr = "" + total + "" + ((total / (ques * 3)) * 100).toFixed(2) + ""
  result += "" + tr + "Total Score Percentage
"
  return result
}

HTML File

    



  Survey Question
  
  
  
  
  
  



  
  
    
      
        Survey
        
          Section 1
          Section 2
          Results
        
        

        
          
            
              
                
                  Question 1:
                  
                    
                      
                      
                                            1
                                        
                    
                    
                      
                      
                                            2
                                        
                    
                    
                      
                      
                                            3
                                        
                    
                  
                
              
              
                
                  Question 2:
                  
                    
                      
                      
                                            1
                                        
                    
                    
                      
                      
                                            2
                                        
                    
                    
                      
                      
                                            3
                                        
                    
                  
                
              
              
                
                  Question 3:
                  
                    
                      
                      
                                            1
                                        
                    
                    
                      
                      
                                            2
                                        
                    
                    
                      
                      
                                            3
                                        
                    
                  
                
              
            
          


          
            
              
                
                  Question 4:
                  
                    
                      
                      
                                            1
                                        
                    
                    
                      
                      
                                            2
                                        
                    
                    
                      
                      
                                            3
                                        
                    
                  
                
              
              
                
                  Question 5:
                  
                    
                      
                      
                                            1
                                        
                    
                    
                      
                      
                                            2
                                        
                    
                    
                      
                      
                                            3
                                        
                    
                  
                
              
              
                
                  Question 4:
                  
                    
                      
                      
                                            1
                                        
                    
                    
                      
                      
                                            2
                                        
                    
                    
                      
                      
                                            3
                                        
                    
                  
                
              
              
                
                  Question 4:
                  
                    
                      
                      
                                            1
                                        
                    
                    
                      
                      
                                            2
                                        
                    
                    
                      
                      
                                            3
                                        
                    
                  
                
              
            
          
          
            
            

            
            

            

            
              Send to
                                email

Style sheet:-

    @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;
}

Always Helping · Accepted Answer

You can add a form HTML with email input in it to store the email address user entered so that can use to send to mail

On clicking Send to email button you will just a form where user can type in the email address with send button in it. If user decide to change the mind i have added a close button as well to hide the form.

When you have entered the email address you can press send button and its will generate the href data so that can be used as mail data. In there you will the user typed email address will be there as to Email.

Lastly, if you did not type anything in the email address input you will see an alert will popup which will tell you enter an email address.

Live Working Demo:

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')
  let result1 = ''
  let result2 = ''
  finalResults.innerHTML = ''

  //Section 1
  section1.forEach(function(radio, index) {
    if (radio.checked) {
      section2Question++
      section1Total += +radio.value
    }
  })

  //Section 2
  section2.forEach(function(radio, index) {
    if (radio.checked) {
      section1Question++
      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 the atleast one survey question from each section '
  }
}

function genTable(ques, total, section) {
  var result = "Section " + section + ":
"
  var tr = "" + total + "" + ((total / (ques * 3)) * 100).toFixed(2) + ""
  result += "" + tr + "Total Score Percentage
"
  return result
}

//Show email input form
let showEmailInput = document.querySelector('.toemail-form')

function toEmail() {
  showEmailInput.classList.remove('d-none') //show form
  let finalResults = document.querySelector('.final-results').innerText;
  let sendEmail = document.querySelector('.toEmail')
  sendEmail.addEventListener('click', function() {
    let getEmail = document.querySelector('#exampleInputEmail1') //get value
    if (getEmail.value == '') {
      alert('Please enter a valid email address')
    } else {
      sendEmail.href = 'mailto:' + getEmail.value + '?subject=Survey response&body=' + finalResults //assign the email structure
      getEmail.value = '' //set value to null
    }
  })
}

//Close email input form
function closeToEmail(e) {
  e.preventDefault()
  showEmailInput.classList.add('d-none') //hide form
}

   @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;
   }





  Survey Question
  
  
  
  
  
  



  
  
    
      
        Survey
        
          Section 1
          Section 2
          Results
        
        

        
          
            
              
                
                  Question 1:
                  
                    
                      
                      
                           1
                         
                    
                    
                      
                      
                           2
                         
                    
                    
                      
                      
                           3
                         
                    
                  
                
              
              
                
                  Question 2:
                  
                    
                      
                      
                           1
                         
                    
                    
                      
                      
                           2
                         
                    
                    
                      
                      
                           3
                         
                    
                  
                
              
              
                
                  Question 3:
                  
                    
                      
                      
                           1
                         
                    
                    
                      
                      
                           2
                         
                    
                    
                      
                      
                           3
                         
                    
                  
                
              
            
          


          
            
              
                
                  Question 4:
                  
                    
                      
                      
                           1
                         
                    
                    
                      
                      
                           2
                         
                    
                    
                      
                      
                           3
                         
                    
                  
                
              
              
                
                  Question 5:
                  
                    
                      
                      
                           1
                         
                    
                    
                      
                      
                           2
                         
                    
                    
                      
                      
                           3
                         
                    
                  
                
              
              
                
                  Question 4:
                  
                    
                      
                      
                           1
                         
                    
                    
                      
                      
                           2
                         
                    
                    
                      
                      
                           3
                         
                    
                  
                
              
              
                
                  Question 4:
                  
                    
                      
                      
                           1
                         
                    
                    
                      
                      
                           2
                         
                    
                    
                      
                      
                           3
                         
                    
                  
                
              
            
          
          
            
            

            
            

            

            
               
            
            
              
                Enter Email address
                
                Enter email address above
                Send

Send HTML/Js page result to mailbox with user typed email address

Answers (1)

Related Questions