フォームデータを電子メールで事前入力する

Question

JS/jQuery（PHPなし）のみを使用して、「件名」フィールドと「メッセージ」フィールドのデータを取り込んで電子メールを送信するHTMLフォームが必要です。 HTMLとJSはサーバー側ではなくクライアント側であるため、サーバーに電子メールを送信する必要はありません。再度、PHPはありません。

しかし、ユーザーのメールクライアントを開き、件名と本文にフォームデータがあらかじめ入力され、宛先フィールドに自分のメールアドレスがあらかじめ入力されています。本質的に、私はより高度なmailto:test@test.comが必要です。ここで

これまでのところ、私のコンタクトフォームです：

<h2>Send a message</h2> 
<form id="sendmsg"> 
    <div class="field"> 
     <label for="subject">Subject</label> 
     <input type="text" name="subject" id="subject" value="" /> 
    </div> 
    <div class="field"> 
     <label for="message">Message</label> 
     <textarea name="body" id="body" rows="6"></textarea> 
    </div> 
    <ul class="actions"> 
     <li><input type="submit" id="submit" value="Submit" /></li> 
    </ul> 
</form> 

私は（jQueryの中で）このようないくつかの試みを試してみました：

<script> 
    $(document).ready(function() { 
     $('#submit').click(function() { 
      $('#sendmsg').attr('action', 'mailto:contact@test.com?subject=' + $('#subject').val() + '&body=' + $('#body').val()); 
      $('#sendmsg').submit(); 
     }); 
    }); 
</script> 

ヘルプは、感謝感謝です！

Answer 1

普通の<a>のリンクをhrefとし、subjectとbodyの内容で更新することができます。ユーザがそれをクリックすると、ユーザのデフォルトのメールクライアントが、「To」、「Subject」および本文に入力の内容で記入された電子メールで開かれます。件名と本文はencodeURIComponent()でエンコードする必要があります。電子メールアドレスが異なる場合は、エンコードする必要があります。

セキュリティ上の理由からStack Overflowが抜粋をカプセル化するため、「メールを送信」ボタンは次のスニペットでは機能しません。それは通常のページで動作します。 this JSFiddleで試すことができます。

$(document).ready(function() { 
 
    //Save references to elements. Don't do DOM walks in event handlers when not needed. 
 
    var $sendEmailEl = $('#send-email'); 
 
    var $subjectEl = $('#subject'); 
 
    var $bodyEl = $('#body'); 
 
    function updateEmailLink() { 
 
     $sendEmailEl.attr('href', 'mailto:contact@zane.sh?' + 
 
      'subject=' + encodeURIComponent($subjectEl.val()) + 
 
      '&body=' + encodeURIComponent($bodyEl.val())); 
 
     //console.log($sendEmailEl.attr('href')); 
 
    } 
 
    $('#subject,#body').on('input', updateEmailLink); 
 
    updateEmailLink(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h2>Send a message</h2> 
 
<div id="sendmsg"> 
 
    <div class="field"> 
 
     <label for="subject">Subject</label> 
 
     <input type="text" name="subject" id="subject" value="" /> 
 
    </div> 
 
    <div class="field"> 
 
     <label for="message">Message</label> 
 
     <textarea name="body" id="body" rows="6"></textarea> 
 
    </div> 
 
    <ul class="actions"> 
 
     <li><a id="send-email" href=""><button>Send email</button></a> &lt;--- This doesn't work from within a snippet, but does work on a page.</li> 
 
    </ul> 
 
</div>

Answer 2

フォームを使用しないでください。 aタグは、私たちが働きます知っているので、私は（あなたがまだそれはスタイリングまたは何のために必要だ場合には、あなたのhtmlでフォームを持つことができます）

<h2>Send a message</h2> 
<form id="sendmsg" onsubmit="return false;"> 
    <div class="field"> 
     <label for="subject">Subject</label> 
     <input type="text" name="subject" id="subject" value="" /> 
    </div> 
    <div class="field"> 
     <label for="message">Message</label> 
     <textarea name="body" id="body" rows="6"></textarea> 
    </div> 
    <ul class="actions"> 
     <li><input type="submit" id="submit" value="Submit" /></li> 
    </ul> 
    <a id="hiddenmailer" style="display: none;"></a> 
</form> 

<script> 
    $(document).ready(function() { 
     $('#submit').click(function() { 
      var mailtotext = "mailto:contact@zane.sh?subject=" + $('#subject').val() + "&body=" + $('#body').val()); 
      $('a#hiddenmailer').attr('href', mailtotext).click(); 
     }); 
    }); 
</script> 

これはおそらく、いくつかの検証を欠落しているか、エスケープされていることを使用したいです被験者や身体の入力値に必要なものですが、これは一般的な考え方です。

Answer 3

あなたはJavaScriptでのみ、あなたはあまりにもセキュリティを考える必要があることはできませんthis.Itsシンプル

$(document).ready(function(){ 
      $('#submit').click(function(e) { 
      e.preventDefault(); 
      mail_url = 'mailto:contact@zane.sh?Subject=' + $('#subject').val() + '&Body=' + $('#body').val() 
      window.location = mail_url 
     }); 
});