Populate email with entries from modal form

Question

I have a modal form (see HTML snippet for the modal form - this is just a small part of the overall page HTML) to allow users to submit new links to me. This is a local HTML file that I maintain for my team on a shared drive, and we do not have access to serves to host this on, so when a new link is submitted, I just go in and update the HTML with the new link.

I would like to be able to grab the values from each field of the modal-body populate the body of an email, each on it's own line like this:

Name: [value entered in Name field]
URL: [value entered in URL field]
Description: [value entered in Description field]
Category: [value selected from NewCat dropdown field]

I'd also like the Subject line to populate with "New Link Submitted" or something like that.

  var emailTO = "test@example.com"
  var emailSubj = "New Link Submission"
  var newName = document.getElementById("newName").value
  var newURL = document.getElementById("newURL").value
  var newDescrip = document.getElementById("newDescrip").value
  var newCat = document.getElementById("newCat").value
  var emailBody = newName % OA % OA newURL % OA % OA newDescrip % OA % OA newCat

function emailLink(){

/* ?????? */

}


  

    
      ×
      Submit New Link
    

    
      Name: 
        
URL: 
          
Description: 
            

              Category:

ThS · Accepted Answer

First of all, you have some mistakes in your HTML code(the input tags are not closed properly) that I managed to correct them.

You don't need a form tag to acheive your goal, you can use it but an a tag would suffice. So, instead of the I changed it to Send tag which has href attribute that accepts 'mailto' links, and that attribute will be filled by JavaScript by the desired informations, and I gave it an id="contact-link" to reference it by JavaScript.

You used to use an 'inline event handler' in the input with type="button"(the one that will be replaced by an a tag) which is a bad practice. Instead, it's better to use the built-in addEventListener method to attach an event handler to whatever element you want. Learn more about addEventListener method.

Here's a runnable snippet the illustrates all what being said.

// select the 'a' tag that has the mailto link to reference later in the code.
var contactLink = document.getElementById('contact-link');
// add click event listener to that 'a' tag.
contactLink.addEventListener('click', function() {
  // get all the information required by getting the inputs and the select tags values.
  var newName = document.getElementById("newName").value,
      newURL = document.getElementById("newURL").value,
      newDescrip = document.getElementById("newDesrcip").value, 
      newCat = document.getElementById("newCat").value,
      /* the subject variable holds the subject of the email, change its value per your requirement. */
      subject = 'New Link Submitted',
      /* the queryString variable holds the email's subject and body to be used in the href attribute of the 'a' tag. the '
' character is used to make a new line and it must be encoded, along with other special characters as the space, in a valid URL format, we'll be using the built-in 'encodeURI' method for that task. */
      queryString = '?subject=' + subject + '&body=Name: ' + newName + '
URL: ' + newURL + '
Description: ' + newDescrip + '
Category: ' + newCat,
      /* the emailAddr variable holds the email which you want the email to be sent to. Change its value per your requirement. */
      emailAddr = 'test@exemple.com';
  /* assign the href attribute of the 'a' tag by the queryString variable's value prepended by the desired email adress, and encode all the resulted string in the URL format using the built-in 'encodeURI' method. */
  this.href = window.encodeURI('mailto:' + emailAddr + queryString);
  // just for testing to see the resulted href string. Delete this line in production phase.
  console.log(this.href);
});




  ×
  Submit New Link


  Name: 
  URL: 
  Description: 
  
    Category:
    
  




Send

Learn more about the encodeURI method.

Ps: in order to make all of this work, the user must configure his default mailing application, otherwise nothing will happen.

Hope I pushed you further.

Populate email with entries from modal form

Answers (1)

Related Questions