JS in the use of mailto implementation of the user input in the Web page to the local mail client _javascript tips

Background:

Want to have such a design on your website:

When the user clicks the Submit button, it opens the local mail client and automatically takes what he enters in the input box as the content of the message, as follows:

Mailto can help you achieve this functionality.

Brief introduction:

Mailto is an e-mail protocol that allows you to create a hyperlink to an e-mail address that allows you to send e-mail messages over the Internet. Just like entering a URL in the Address bar opens a Web page, the input mailto:name@email.com opens the local mail client and sends the message to name@email.com.

Using mailto in HTML

1. How to use:

One way is to write the mailto link in the href attribute of a label:

<a href= "mailto:name@email.com" >Email</a>

The other is written in the action attribute of the form

<form name= ' sendmail ' action= ' mailto:name@email.com ' >
 <input ' name ' name= ' text ' >
 < Input name= ' subject ' type= ' text ' >
 <input name= ' email ' type= ' text ' > <input name= ' number
 ' type= ' Text ' >
 <input name= ' body ' type= ' text ' >
</form>

2. Pass Parameters:

mailto supports the following parameters:

Both of these methods can pass parameters, but the effect is not the same.

If you use a label, you can only add parameters to the mailto link:

<a href= "Mailto:to?subject=subject&cc=cc&body=body" >send mail</a>

Add after the first argument? , with & connections between other parameters.

The effect is this:

If you use form, the parameters and effects passed in the Mailto link are the same as using a, and his special point is that he will also pass the value of the name attribute in input and its input:

This way does not need to use JS to get the contents of the input box, directly can be the user input content to update the content of the message area, but there is an obvious drawback, is that it passed in the format is very inconvenient. Few people send mail in such a way that users also need to delete the equals sign themselves and adjust the style themselves.

So I choose to use a tag to open the Mailto link, through JS to format the content as a parameter passed to a label.

<p class= "title" >contact me</p>
  <ul class= "email" >
   <li><input type= "text" Name= " Name "placeholder=" name "></li>
   <li><input type=" text "name=" email "placeholder=" email address "></li>
   <li><input type=" text "name=" number "placeholder=" Phone number "></li>
   <li class= ' message ' ><textarea name= ' message ' placeholder= ' message ' ></textarea> </li>
   <button class= "btn btn-define" >Submit</button> <a href= "mailto"
   id= "send" ></a>
  </ul>

Create an invisible a tag, when the user input good content click on the button, JS will get the contents of the input box, and format to pass to a, and then simulate click a tag.

jquery Code:

function SendEmail () {
 var name=$ ("[name= ' name ']"). Val (),
  email=$ ("[name= ' email ']"). Val (),
  number=$ (" [name= ' number '] "). Val (),
  message=$ (" [name= ' message '] "). Val (),
  body=" I name is: "+name+"%0a%0d "
   +" my Email address are: "+email+"%0a%0d "
   +" My Phone number are: "+number+"%0a%0d "
   +" message: "+"%0a%0d "+message;
 $ ("#send"). attr ("href", "mailto:mamengyi1121@163.com?body=" +body);
 document.getElementById ("Send"). Click ();
$ (document). Load (
 $ (". Btn"). Click (sendemail);

One of the%0d%0a is that carriage return conforms to the newline character, my mail client cannot parse HTML-formatted characters, (passing <br> cannot implement newline), and passing UTL encoding can be implemented.