HTMLのmailto:機能で本文部分の情報を変更したいです。

いつもお世話になっております。

今回サイトを作成するなかで、HTMLのmailto:機能を使ってメーラを立ち上げている部分があるのですが、
その立ち上がったメーラの中の情報を変更したいと考えております。

具体的には以下のクラス名「type1」「type2」の内容をメーラーの本文に引用したいです。
「type1」「type2」の内容は現在A、Bになっておりますが、ラジオボタン等で内容を選択させjqueryで書き換わる設定にしております。

HTML
1
2    <input id="A" type="radio" name="ch1" onclick="sample();" value="A">A
3    <input id="A1" type="radio" name="ch1" onclick="sample();" value="A1">A1
4
5    <input id="B" type="radio" name="cc1" onclick="sample()" value="B">B
6    <input id="B1" type="radio" name="cc1" onclick="sample()" value="B1">B1
7
8    <br><br>
9
10    type1<div id="type1">選んでください</div>
11    type2<div id="type2">選んでください</div>
12
13    <a id="mailto" href="mailto:?body=TYPE1→ここにAを引用したいです%0d%0aTYPE2→ここにBを引用したいです">メールソフトを立ち上げる</a>
14
15

script
1<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
2<script>
3
4        $(function() {
5
6            //type1
7            $("#A").on("click", function() {
8                $("#type1").text($("#A").val());
9
10            });
11
12            $("#A1").on("click", function() {
13                $("#type1").text($("#A1").val());
14
15            });
16
17            //type2
18            $("#B").on("click", function() {
19                $("#type2").text($("#B").val());
20
21            });
22
23            $("#B1").on("click", function() {
24                $("#type2").text($("#B1").val());
25
26            });
27        });
28
29        
30        
31        $(function(){
32            $(":radio").on('change', function(){
33        
34            const a = document.getElementById('mailto');; // <a>要素
35            const type1 = document.querySelector('#type1').textContent;
36            const type2 = document.querySelector('#type2').textContent;
37                a.setAttribute('href', 'mailto:?body=TYPE1→' + encodeURIComponent(type1 + '\nTYPE2→' + type2));
38
39            });
40        });
41
42    </script>

調べてはみたのですが、わかりませんでした。。
すみませんが、ご教授いただければ嬉しいです。何卒宜しくお願い申し上げます。

kszk311

2019/04/17 03:46

＞jqueryで書き換わる設定にしております。でしたら、jQueryのコードも提示してください。

退会済みユーザー

2019/04/17 05:38

すみません！コードを追記しました。

行動規範の内容に同意します

回答1件

ベストアンサー

javascript
1const a = ...; // <a>要素
2const type1 = document.querySelector('.type1').textContent;
3const type2 = document.querySelector('.type2').textContent;
4a.setAttribute('href', 'mailto:?body=' + encodeURIComponent(type1 + '\n' + type2));

投稿2019/04/17 03:56

wtokuno

総合スコア448

退会済みユーザー

2019/04/17 05:40

ご回答ありがとうございます！！すみません。単純にコードを追加して動作確認をしましたが、うまく動作しませんでした。。ご教授いただいたコードを変更する部分はありますでしょうか？

wtokuno

2019/04/17 05:50

さすがに `const a = ...` の部分は書き換えましたよね？私が回答した時点より後に質問内容の HTML が書き換わっているので `document.querySelector(...)` の部分は適切な内容に書き換えてください。エラーが出ているんだったらどんなエラーメッセージが出ているか提示してください。

退会済みユーザー

2019/04/18 00:16

ご回答ありがとうございます！ `const a = ...`の部分を書き換えておりませんでした。申し訳ございません。。どのように変更すれば動作しますでしょうか？；； `document.querySelector(...)`はidに書き換えました！

wtokuno

2019/04/18 00:30

コピペするだけじゃなくて、内容をちゃんと理解してコードを書いてください。理解するために調べたりして、それでも分からなければ質問してください。 > `const a = ...`の部分を書き換えておりませんでした。以下に対応する Element (https://developer.mozilla.org/ja/docs/Web/API/Element) を取得してください。 ```html <a href="mailto:?body=TYPE1→ここにAを引用したいです%0d%0aTYPE2→ここにBを引用したいです">メールソフトを立ち上げる</a> ```

退会済みユーザー

2019/04/18 22:57

ご回答ありがとうございます！意味も分からず質問してしまい申し訳ございません。 `const a = ...`に<a>タグの要素を取得できるようにコードを書き換えました！しかしラジオボタンでtype1とtype2の値を選択してメーラーを立ち上げても最初に入力していた"選んでください"のテキストが引用されます。本当は"選んでください"部分がラジオボタン選択で書き換わった値をメーラーに引用してきたいのですが、どうにもうまくいきません。度々申し訳ございませんがご教授いただければ幸いでございます。

wtokuno

2019/04/19 00:15 編集

私が提示したコードをトップレベルに書くだけではページ表示時に1回しか実行されません。ラジオボタンが選択されたときに毎回実行されるようにしてください。

退会済みユーザー

2019/04/19 09:15

思い通りの形に実装できました！根気よくご教授いただき本当にありがとうございました！実装できたコードは書き換えております！

行動規範の内容に同意します