勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

フォームの入力内容をjQueryで取得し、本文として設定した上でメーラーを起動させる方法

  jQuery JavaScript HTML

formで何らかを入力してもらいボタンをクリックするとメーラーが開き、先ほど入力した内容を本文に差し込みたいというケースがあった。メーラーの起動はmailtoでいけそうなものの「ボタンクリック時にmailtoを実行できるのか?」「mailto実行の際、動的に本文を差し込めるのか?」等が不明。以下に実装方法をメモ。

 

サンプル

https://taitan916.info/sample/mailto/

 

ソースコード

<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>mailtoのテスト</title>
</head>
<body id="top">
    <label for="body">本文</label>
    <textarea id="body"></textarea>
    <input id="mailto" type="button" value="メーラー起動">
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script>
    $(function(){
        $('#mailto').on('click', function(){
            let body = $(`#body`).val();
            if( !body ){
                alert(`本文が入力されていません。`);
                return false;
            }

            //改行コードを置換
            body = body.replace(/\n/, '%0D%0A');

            location.href = `mailto:test@test.com?subject=件名&body=${body}`;
        });
    });
    </script>
</body>
</html>

解説

mailtoは通常aタグのhrefに設定するため「location.href = `mailto:`」という形でjQueryからメーラを起動させられる。

mailtoで設定する本文の改行は「%0D%0A」になるため「body.replace(/\n/, '%0D%0A')」で置換処理している。

 - jQuery JavaScript HTML

  関連記事

jquery.cookie.jsで保存期間を時間指定する方法

jquery.cookie.jsで保存期間を1時間等、時間指定したい。公式サイト ...

Lightboxで画像拡大時にダウンロードリンクを設置する方法

Lightboxで画像拡大時にダウンロードリンクを設置したいと要望を受けた。もち ...

jQuery UIを使って簡単にダイアログを表示させる方法

ブラウザ上でユーザーに対してちょっとした確認を行いたい場合はJavaScript ...

AjaxFileUploadで処理は実行できてもエラーが返る

AjaxFileUploadでPHPに通信し、サーバー側のPHPで処理は正常に実 ...

jQueryで指定の行動をとった際に、クリックイベントを発火させる方法

あるシステムでAという要素をクリックした際に何らかの処理を行うという部分があり、 ...