フォームの入力内容をjQueryで取得し、本文として設定した上でメーラーを起動させる方法
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')」で置換処理している。
関連記事
-
-
JavaScript / jQueryで〇番目、最初、最後の要素を指定する方法
jQueryでリストタグ(<li>)の〇番目、最初、最後の要素を指定 ...
-
-
jQueryでAjax通信したデータをPHPで受け取り、zip化したファイルをダウンロードさせる方法
jQueryのAjaxで何らかのデータをPHP側に送信し、PHP側で当該データを ...
-
-
セレクトメニューにサジェスト機能をつける方法(select2)
formのselectメニューで何文字が入力すると候補を絞って表示させるサジェス ...
-
-
jQueryでUNIXタイムスタンプの取得
jQueryでUNIXタイムスタンプを取得したい場合、 $.now()だけで取得 ...
-
-
ajaxのエラー詳細を取得する
success or errorで分岐処理はできるけど、 エラー詳細取れないの？ ...