![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?5a7ff87)
現在、通販サイトを運営中で、それぞれの商品ページに問合せフォームを組み込んでいますが、その商品ページを訪問されるときにお客様はすでに商品名(長い記号番号)を入力されているので、問合せフォームで再度商品名を入力していただくのは酷と思い、formのinputのvalueに商品名をあらかじめ入力しておくようにしています。
<input type="text" name="希望商品" value="(商品名)" size="50" >
この度、商品数の増加に伴い、商品ページを簡略化するため、共通しているform部分をインクルードしたいのですが、その中の(商品名)を関連付ける方法がわかりません。
例えば、ABC123という商品名のページからの問合せの場合、インクルードされるform内が
<input type="text" name="希望商品" value=”ABC123” size="50" >
になるようにしたいのです。
ちなみにABC123という商品名は、その商品ページの中(form部分以外)に入力しています。
JavaScriptを使えばできるようなのですが、勉強不足でわかりません。
どなたか教えていただけないでしょうか。
宜しくお願いいたします。
No.1ベストアンサー
- 回答日時:
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の方がいいでしょう。
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>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- PHP PHPで画像の渡しが上手く行きません。 1 2023/02/02 09:39
- その他(プログラミング・Web制作) パイソンでのプログラミングについて 3 2022/08/11 20:31
- その他(Microsoft Office) Excelで該当しない項目(#N/Aの商品名)を簡単に表示・抽出させる方法についてです 1 2022/08/25 22:12
- Visual Basic(VBA) VBAコードが作動せず、どこに問題があるのか教えて下さい。 3 2023/06/13 13:20
- Excel(エクセル) excelで検索した商品の画像(ネットワーク上の)を表示させたい。 3 2023/06/28 00:32
- Visual Basic(VBA) EXCEL関数LOOKUPとFILTERについての質問です 1 2022/12/21 05:53
- Amazon 新規でAmazon商品ページ作成方法について 1 2022/03/28 00:22
- Visual Basic(VBA) 【ExcelVBA】Powerクエリーでいうピボット解除と同じ処理をVBAで 4 2022/07/06 17:09
- ネットスーパー 通販で商品を購入しようと思って、情報を入力して途中で思いとどまり注文確定せずにページを閉じました。 4 2022/11/29 16:45
- Excel(エクセル) Excel 関数 vlookupなどの使い方について質問です。 シート1に品番、商品名、単価、発注条 6 2022/06/15 19:16
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
1つのformで複数のactionを実...
-
インフォシーク翻訳リクエスト...
-
inputタグのtype値がfileの場合...
-
submitをボタン以外にするには
-
送信ボタン押下時に値が未入力...
-
1アクションでPOST・GET、両方...
-
入力フォームの javascript で ...
-
formなしでPOSTデータを送信・受信
-
UTF-8 コードでのmailtoの文字化け
-
同じnameのhiddenで別々の内容...
-
リンクをクリックした時にform...
-
フォーム要素以外にもname属性...
-
画像をボタンのようにフォーカ...
-
指定したデータを別ページフォ...
-
プルダウンメニューでインライ...
-
会員登録フォームの作り方を教...
-
checkboxを「変更不可」にでき...
-
HTMLファイルに、文字を書き込...
-
プロトコルmailtoはサポートさ...
-
HTMLのoptionタグ部分に画像を...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
1つのformで複数のactionを実...
-
javasqliptで複数のテキストボ...
-
inputタグのclass名にコロン「:...
-
動的にnema属性が変化する場合...
-
javaScriptで検索結果の保持
-
一括で値を入力するには?
-
同じ名前が複数あるインプット...
-
グーグルでの化け文字対策は?
-
今日の日付をセットしたいのですが
-
同一ページの複数フォームを一...
-
インフォシーク翻訳リクエスト...
-
商品ページのフォームのテキス...
-
inputタグのtype値がfileの場合...
-
Json のキーと値の出力の違いに...
-
自分のサイト内のワード検索?
-
リクエストパラメータの値によ...
-
親ウィンドウで動的に作成したh...
-
ランダムリンクでリンク先を別...
-
Windows Media Player をJavaSc...
-
Windows Media Playerのサイズ
おすすめ情報