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

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

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

URL

URL(ユニフォームリソースロケータ)とは、インターネット上のリソース(Webページや電子メールの宛先等)を特定するための形式的な記号の並びの事を言う。

パラメータ

関数やプログラム実行時に与える設定値をパラメータと呼びます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

0回答

345閲覧

javascriptでinputタグには既にURLが存在していて、そのURLの後ろにパラメータを付与したい

aeofun

総合スコア12

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

URL

URL(ユニフォームリソースロケータ)とは、インターネット上のリソース(Webページや電子メールの宛先等)を特定するための形式的な記号の並びの事を言う。

パラメータ

関数やプログラム実行時に与える設定値をパラメータと呼びます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2020/03/17 06:06

編集2022/01/12 10:55

■前提・実現したいこと
inputの中身には既にURLが存在していて、そのURLの後ろにパラメータを付与したい。
※javascriptの実行はchromeのブックマークから。

Ex,
https://teratail.com/questions/178966

https://teratail.com/questions/178966?utm_source=xxx&utm_medium=ooo&utm_campaign=△△△_200317_num01&utm_content=link01

■発生している問題
表面的な文字列(value)は変更されているものの、確認画面に飛ぶとパラメータがない状態になる

■試したこと
valueとdefault_valueの値を変える

HTML

1<div class="main"> 2 <div class="url"> 3 <input type="text" class="form"> 4 </div> 5 <div class="url"> 6 <input type="text" class="form"> 7 </div> 8</div>

Javascript

1javascript: 2( 3 function () { 4 if(! document.querySelector(".date").querySelector("input").value) 5 { 6 return; 7 }else{ 8 var rt = prompt('番号を入力', ''); 9 if(rt !== null && rt !== ''){ 10 var fn = ("0" + rt).slice(-2); 11 var dd = new Date(document.querySelector(".date").querySelector("input").value); 12 var yy = dd.getFullYear().toString().slice(-2); 13 var mm = ("0" + (dd.getMonth()+1)).slice(-2); 14 var day = ("0" + dd.getDate()).slice(-2); 15 var i = 1; 16 17 [].forEach.call(document.querySelectorAll(".url > input"), (e, index)=> 18 { 19 var linkUrl = new URL(e.value); 20 var linkParam = new URLSearchParams(linkUrl.search.slice(1)); 21 linkParam.append("utm_source", "xxx"); 22 linkParam.append("utm_medium", "ooo"); 23 linkParam.append("utm_campaign", "△△△_"+yy+mm+day+"_num"+fn); 24 linkParam.append("utm_content", "link"+ ("0" + (i)).slice(-2)); 25 e.focus(); 26 e.value = linkUrl.origin + linkUrl.pathname + "?" + linkParam.toString(); 27 }); 28 }else{ 29 return; 30 } 31 } 32 } 33)();

管理ツール内で実現したいことなので仕様でjavascriptでの書き換えが不可になっているのなら諦めます。
しかしjavascriptの仕様で実現可能であれば挑戦したいと考えています。

javascriptの知識がある方、お力添えいただけませんでしょうか。
よろしくお願いいたします。

--
■追記

仰っている「管理ツール」とはなんのことでしょう

LINEアカウントメディアです。

確認画面に飛ぶとパラメータがない状態

入力画面でjavascriptを実行するとこうなるのですが
![イメージ説明

確認画面に進むとパラメータ付与したはずのURLが
https://teratail.com/questions/178966
https://teratail.com/questions/247673
のようになってしまいます。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2020/03/17 06:41

仰っている「管理ツール」とはなんのことでしょう
yambejp

2020/03/17 07:03

> 確認画面に飛ぶとパラメータがない状態 の説明をお願いします
aeofun

2020/03/17 07:19

追記しました
m.ts10806

2020/03/17 07:44

なぜそうしたいのでしょう。 本来はteratailの質問URLに対してしたいわけではないですよね?
aeofun

2020/03/17 08:16

作業効率化です。 teratailの質問URLは例で挙げました。
Lhankor_Mhy

2020/03/17 08:59

おそらく、そのページの裏でjsが動いているのだと思います。 表面に出している入力フォームの入力値をごにょごにょして、hiddenタイプのフォームに移してからサブミットするというのは、よくある手法です。 解決のためには、そのページを実際に拝見しないと難しいと思います。 入力フォームの input イベントや blur イベントを疑ってみてはいかがでしょうか。
aeofun

2020/03/17 11:23

ありがとうございます。 やはり仕様ですよね。イベントについて色々いじってみます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問