技術ブログ
商品ページからお問い合わせページに移動した時に、お問い合わせの入力フォームに製品の情報（商品名とか商品番号）の値を受け渡したい場合があります。
このような場合に便利な実装をする方法を紹介します。
商品、製品、不動産物件などページ毎にお問い合わせが必要なサイトに役立てると思います。
商品ページ（Java Script）
shop.html
<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="UTF-8">
<title>商品ページ</title>
</head>
<body>
<script type="text/javascript">
function sendQuery(uri, querys) {
var query = new Array;
for (var x in querys) {
query.push(x + '=' + encodeURI(querys[x]));
}
location.href = uri + '?' + query.join('&');
}
</script>
商品コード：apple001<br>
商品名：りんご<br>
<input type="button" value="お問い合わせ" onclick="sendQuery('form.html',{'CODE':'apple001','NAME':'りんご'})">
</body>
</html>
お問い合わせページ
form.html
<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="UTF-8">
<title>お問い合わせ</title>
</head>
<body>
<script type="text/javascript">
function setQuery() {
var querys = location.search.replace(/^\?/, '').split(/&/);
for (var i = 0; querys[i]; i++) {
var query = querys[i].split('=');
document.getElementById(query[0]).value = decodeURI(query[1]);
}
}
window.onload = setQuery;
</script>
<!--値を受取るフォーム部分 -->
お問い合わせフォーム<br>
商品コード：<input type="text" id="CODE"><br>
商品名：<input type="text" id="NAME">
</body>
</html>
大阪のホームページ制作会社TREVOでは、ホームページ制作に関する情報を掲載しています。最短2日で仮サイトを公開するサービスやSEO対策に特化したホームページ制作、オリジナルホームページデザイン、ライティング、リスティング広告、WEBマーケティングなどのサービスをご紹介しています。
衣川知秀
経歴： 3DCG制作の専門学校を卒業後、デザイン会社に就職。デザイン会社では主にWEB制作を担当し、旅館の予約システムや商店街にWEBカメラを設置したプロモーション等を展開し、4年後に転職。 株式会社TREVOでデザイン、コーディング、ディレクション、システム開発を担当
