おしえて

商品ページのフォームのテキストボックスに、商品名を自動入力させたい。

解決済

質問者：junjunjujujun
質問日時：2017/12/27 17:31
回答数：1件

現在、通販サイトを運営中で、それぞれの商品ページに問合せフォームを組み込んでいますが、その商品ページを訪問されるときにお客様はすでに商品名（長い記号番号）を入力されているので、問合せフォームで再度商品名を入力していただくのは酷と思い、formのinputのvalueに商品名をあらかじめ入力しておくようにしています。
<input type="text" name="希望商品" value="（商品名）" size="50" >

この度、商品数の増加に伴い、商品ページを簡略化するため、共通しているform部分をインクルードしたいのですが、その中の（商品名）を関連付ける方法がわかりません。

例えば、ABC123という商品名のページからの問合せの場合、インクルードされるform内が
<input type="text" name="希望商品" value=”ABC123” size="50" >
になるようにしたいのです。
ちなみにABC123という商品名は、その商品ページの中（form部分以外）に入力しています。

JavaScriptを使えばできるようなのですが、勉強不足でわかりません。
どなたか教えていただけないでしょうか。
宜しくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： Kirito16.com
回答日時：2017/12/28 12:28

cookieを使う方法やURLにデータを渡す方法など、様々な方法があります。

他にも方法はあるでしょうけど。

[1]cookie
JavaScriptでcookieを扱う方法は知っていますか?
https://www.google.co.jp/search?q=JS+cookie
但し、ユーザーがcookieの設定を有効にしていないと使用できません。

[2]URLにデータを渡す
先程記載したgoogleのURLを見ると分かりますが、searchの後ろに"?"が付いていますよね?
"?"の後にデータ(アルファベット又は数字・記号)を載せ、
それをフォーム側で受け取る処理をすればできます。
↓具体例↓ (JavaScript構文)

> form1.html (商品名を入力する)
var name = document.getElementById("inputのID").value; // inputを取得
location.href = "form2.html?name="+name;

> form2.html (商品名が既に入力されている)
var url = location.href; // URLを取得
var get = url.split("?"); // ?で分割
var name = get[1].split("name=").join("");
document.getElementById("inputのID").value = name; // inputの内容を書き換え

-- 以上 --

個人的にはURLにデータを渡す方法をオススメしますが、
URL移動の際にデータを傍受されたり、ユーザーが誤ってURLを書き換えた際に
フォームのデータも変わってしまうため、注意が必要です。
SSL/TLS通信ができるのであればURL、
できないのであればcookieの方がいいでしょう。

- 0
- 件

通報する

この回答へのお礼

Kirito16.com様、ご回答頂きありがとうございました。

情けないことに、[1]も[2]もチャレンジしましたが、よくわからないまま、下記方法で解決しました。
下記方法がベストなのかどうかもわからないままです。

<!DOCTYPE html>
<html lang="ja">
<head>
<script>
$(function() {
$("#form").load("./form.html");
});
</script>
<script>
function setValue() {
var value = "（機種名）";
if (value) {
document.form._希望機種.value = value;
}
}
</script>
</head>
<body onload="setValue();">
<div id="form"></div>
</body>
</html>

<form name="form" action="・・・>
<input type="text" name="_希望機種" size="50">
</form>