utf-8のHTMLからパラメータを渡しているのに、パラメータがshift-jisにエンコードされてしまう

前提・実現したいこと

パラメータをUTF-8で渡したい

###ブラウザ
Crome
バージョン: 89.0.4389.114（Official Build）（arm64）

発生している問題・エラーメッセージ

Uncaught URIError: URI malformed
    at decodeURI (<anonymous>)
    at HTMLDocument.<anonymous> (user_form.js:4)
    at mightThrow (jquery-3.6.0.js:3766)
    at process (jquery-3.6.0.js:3834)

該当のソースコード

html
1<head>
2    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
3</head>
4
5<div class="visual_ forcms_block">
6
7                <h4 class="event_title_"><span>廃棄袋・廃棄ボックス</span></h4>
8
9                <div class="list">
10
11                    <div class="data formdetail2_">
12                        <h5>テスト資材03</h5>
13                        <div class="formdetail2_--img">
14                            <img src="http://stg2.e-humira.jp/cms/e-humira/medical/images/product/s/img_003.jpg" />
15                        </div>
16                        <p class="formdetail2_--text">テスト資材03です。テスト資材03です。テスト資材03です。テスト資材03です。テスト資材03です。テスト資材03です。</p>
17
18                        <div class="formdetail2_--wrapper">
19                            <p>※最大注文数：2020</p>
20                            <div class="formdetail2_--wrapper__box">
21                                <p>注文点数</p>
22                                <input type="number" max="20" min="0">
23                                <button>決定</button>
24                            </div>
25                        </div>
26                    </div>
27
28                    
29
30                </div>
31
32            </div>
33
34
35<div class="forcms_block order_next">
36                <div class="order_next__wrapper">
37                    <div class="order_next__box">
38                        
39                    </div>
40                    <div class="order_next__box">
41                        <p class="order_next__btn">注文手続きに進む</p>
42                        
43                    </div>
44                </div>
45            </div>
46

js
1jQuery(function ($) {
2
3    jQuery(".data.formdetail2_").each((i, element) => {
4
5        jQuery(element).find("button").click(function() {
6
7            let title = jQuery(element).find("h5").text();
8            let num = jQuery(element).find("input").val();
9
10            let order = `<p>${title} ${num}</p>`
11
12            jQuery(".order_next__wrapper .order_next__box:nth-child(1)").append(order)
13        });
14        
15    })
16
17
18
19    jQuery('.order_next__box .order_next__btn').click(function() {
20
21        let paramerter = [];
22        let paramerterTemplate = ""
23
24        jQuery(".order_next__wrapper .order_next__box:nth-child(1) p").each((i, element) => {
25
26            
27
28            let orderText = jQuery(element).text();
29            
30
31            paramerter.push(orderText)
32
33            
34            
35        });
36
37        console.log(paramerter);
38
39        
40
41        
42
43
44        jQuery(paramerter).each((i, element) => {
45
46            if (i === 0) {
47                // paramerterTemplate = paramerterTemplate + `?id=${encodeURIComponent(element)}`
48                paramerterTemplate = paramerterTemplate + `?id=${element}`
49            } else {
50                // paramerterTemplate = paramerterTemplate + `&from=${encodeURIComponent(element)}`
51                paramerterTemplate = paramerterTemplate + `&from=${element}`
52            }
53
54            
55        });
56
57        console.log(paramerterTemplate);
58        
59
60        // パラメータを末尾につける
61        location.href = `http://hogehoge/patient/order/user_form${paramerterTemplate}`;
62        
63
64
65    
66      
67      });
68
69      
70
71});
72

###実行結果

http://hogehoge.jp/patient/order/user_form?id=%83q%83%85%83~%83%89?%83y%83%93%94p%8A%FC%91%DC%201

ご解答よろしくお願いいたします。

maisumakun

2021/04/27 08:24

・「utf-8のHTML」ということは、きちんと宣言してありますか？・ブラウザは何でしょうか？

Lhankor_Mhy

2021/04/27 08:26

HTMLをご提示ください。

kwtkwt

2021/04/27 08:31

ありがとうございます。内容を修正いたしました。

maisumakun

2021/04/27 08:31

encodeURIComponentを使ったコードがコメントアウトしてありますが、それはどのような意図でしょうか？

Lhankor_Mhy

2021/04/27 08:42

そのメタタグは、HTML5で廃止されていると思います。 https://developer.mozilla.org/ja/docs/Web/HTML/Element/meta#attr-http-equiv ご提示のコードはHTML4.01ですか？

Lhankor_Mhy

2021/04/27 08:43

Uncaught URIError: URI malformed というエラーが出るためには、encodeURIComponent を使わないといけないと思いますが、実際のコードはコメントアウトされている方ですか？

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

回答1件

URLSearchParamsはどうでしょう？

javascript
1const txt="テスト資材03 1";
2const usp = new URLSearchParams();
3usp.append("id",txt);
4console.log("?"+usp);

投稿2021/04/27 10:34

yambejp

総合スコア115010

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！