バージョン選択

フォーラム

 どうか教えて下さい！  バグ見つけましたよ！  こんな機能あったらなぁ  プラグインについて  その他

メニュー

 当サイトについて  初めてご利用になる方へ  EC-CUBE開発情報

オンライン状況

49 人のユーザが現在オンラインです。 (41 人のユーザが フォーラム を参照しています。)
登録ユーザ: 0
ゲスト: 49
もっと...

サイト内検索
質問 > フロント機能 > 検索のキーワードをjavascriptでテキストフォームへ流し込みたい

フロント機能

新規スレッドを追加する

スレッド表示 | 新しいものから 前のトピック | 次のトピック | 下へ
投稿者 スレッド
pe4ju
投稿日時: 2013/6/14 19:52
対応状況: −−−
半人前
登録日: 2013/6/14
居住地:
投稿: 11
検索のキーワードをjavascriptでテキストフォームへ流し込みたい
こちらに書き込みさせて頂きます。

検索にてセレクトで予め登録してあるキーワードを読み込み、javascriptでテキストフォームに流し込みたいのですが、動作しません。
javascriptは外部jsでヘッダーに読み込んでおります。
通常のHTMLでの検証では問題なく動作します。

-----ここから

<script lang="JavaScript">
function selectChange() {
var str1 = document.search_form.select1.value;
var str2 = document.search_form.select2.value;
var str = str1 +" "+ str2 ;
document.search_form.name.value = str;
}
</script>


<dl class="formlist">
<dt>商品A群</dt>
<dd>
<select name="select1" onchange="selectChange()">
<option value="">--</option>
<option value="リンゴ">リンゴ</option>
<option value="ミカン">ミカン</option>
</select></dd></dl>
<dl class="formlist">
<dt>商品B群</dt>
<dd>
<select name="select2" onchange="selectChange()">
<option value="">--</option>
<option value="5個パック">5個パック</option>
<option value="10個パック">10個パック</option>
</select></dd></dl>
<input type="text" name="name" />
<input type="submit" alt="検索" name="search" value="検索"/>
</form>

-----ここまで


TypeError: document.search_form.select1 is undefined :2

という所まで突き止めたのですが、その後勉強不足で分からない状態です。
皆様のお力をお貸しいただければと思います。
宜しくお願い致します。

EC-CUBEバージョン 2.12.2
PHPバージョン PHP 5.1.6
DBバージョン MySQL 5.0.77
DELIGHT
投稿日時: 2013/6/14 19:53
対応状況: −−−
仙人
登録日: 2010/2/3
居住地: 熊本県・九州・長野県・関東甲信越
投稿: 572
Re: 検索のキーワードをjavascriptでテキストフォームへ流し込みたい
フロントというかそもそもEC-CUBEの不具合ではないというかタイミングが悪かったというか…。

document.search_form.select1という要素が見つからないというエラーです。
formのname属性がsearch_formではなかったのではないでしょうか？
<html lang="ja" xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<meta content="text/javascript" http-equiv="content-script-type">
</head>

<body class="">
<script lang="JavaScript">
function selectChange() {
var str1 = document.search_form.select1.value;
var str2 = document.search_form.select2.value;
var str = str1 +" "+ str2 ;
document.search_form.name.value = str;
}
</script>

<form name="search_form">
<dl class="formlist">
<dt>商品A群</dt>
<dd>
<select onchange="selectChange()" name="select1">
<option value="">--</option>
<option value="リンゴ">リンゴ</option>
<option value="ミカン">ミカン</option>
</select></dd></dl>
<dl class="formlist">
<dt>商品B群</dt>
<dd>
<select onchange="selectChange()" name="select2">
<option value="">--</option>
<option value="5個パック">5個パック</option>
<option value="10個パック">10個パック</option>
</select></dd></dl>
<input type="text" name="name">
<input type="submit" value="検索" name="search" alt="検索">
</form>


</body></html>


適当に書きましたがこれで動作しました。


----------------
+ DAISY inc. -------------------- +
EC-CUBE構築・カスタマイズサービス
EC・WEB構築などお気軽にご相談ください。

デイジー株式会社
http://daisy.link/
pe4ju
投稿日時: 2013/6/14 20:21
対応状況: −−−
半人前
登録日: 2013/6/14
居住地:
投稿: 11
Re: 検索のキーワードをjavascriptでテキストフォームへ流し込みたい
早々の書き込みありがとうございます。

通常のHTMLでは問題なく動作いたしますが、
javascriptは外部で、
search_products.tpl内に


---ここから
<form name="search_form" id="search_form" method="get" action="<!--{$smarty.const.ROOT_URLPATH}-->products/list.php">
<input type="hidden" name="<!--{$smarty.const.TRANSACTION_ID_NAME}-->" value="<!--{$transactionid}-->" />

<dl class="formlist">
<dt>商品A群</dt>
<dd>
<select onchange="selectChange()" name="select1">
<option value="">--</option>
<option value="リンゴ">リンゴ</option>
<option value="ミカン">ミカン</option>
</select></dd></dl>
<dl class="formlist">
<dt>商品B群</dt>
<dd>
<select onchange="selectChange()" name="select2">
<option value="">--</option>
<option value="5個パック">5個パック</option>
<option value="10個パック">10個パック</option>
</select></dd></dl>

<input type="text" name="name">
<input type="submit" value="検索" name="search" alt="検索">
</form>
---ここまで


上記の内容で動作いたしません。
同じTypeError: document.search_form.select1 is undefined
のエラー内容でした。
DELIGHT
投稿日時: 2013/6/15 10:26
対応状況: −−−
仙人
登録日: 2010/2/3
居住地: 熊本県・九州・長野県・関東甲信越
投稿: 572
Re: 検索のキーワードをjavascriptでテキストフォームへ流し込みたい
Firefox最新版で同じフォームと外部jsで試したけど動作しますね…。
気になる点といえば、inputに閉じタグが設定されていないことくらいでしょうか。

<input type="text" name="name" />


jQueryで代用はできませんか？

$(function(){

  var select1 = $('select[name="select1"]');
  var select2 = $('select[name="select2"]');
  var text = $('input[name="name"]');

  function selectChange(){
    var str1 = select1.val();
    var str2 = select2.val();
    text.val(str1+" "+str2);
  }

  select1.change(function(){selectChange();});
  select2.change(function(){selectChange();});
  selectChange();
});


----------------
+ DAISY inc. -------------------- +
EC-CUBE構築・カスタマイズサービス
EC・WEB構築などお気軽にご相談ください。

デイジー株式会社
http://daisy.link/
pe4ju
投稿日時: 2013/6/15 13:00
対応状況: −−−
半人前
登録日: 2013/6/14
居住地:
投稿: 11
Re: 検索のキーワードをjavascriptでテキストフォームへ流し込みたい
DELIGHT様　ご助言ありがとうございます。

<input type="text" name="name" />の　/　を抜いた状態でも
結果として動作しませんでした。

未熟上のことでしょうが、お伝え出来てない他の要素が原因していると思われます。

結論としましては、「jQueryで代用」で動作いたしましたので、目的としては問題解決に至っております。
jQueryは利用しているのですが、あまり理解していないので今後の勉強対象にしていきたいです。

本当に助かりました。ありがとうございます。
DELIGHT
投稿日時: 2013/6/15 13:25
対応状況: −−−
仙人
登録日: 2010/2/3
居住地: 熊本県・九州・長野県・関東甲信越
投稿: 572
Re: 検索のキーワードをjavascriptでテキストフォームへ流し込みたい
閉じタグの件についてはこちらの勘違いでした。
忘れていただいて結構です。
(<input type="text" name="name" />が適切です。)


----------------
+ DAISY inc. -------------------- +
EC-CUBE構築・カスタマイズサービス
EC・WEB構築などお気軽にご相談ください。

デイジー株式会社
http://daisy.link/
スレッド表示 | 新しいものから 前のトピック | 次のトピック | トップ


 



ログイン


EC-CUBE公式 Amazon Payプラグイン

統計情報

総メンバー数は88,967名です
総投稿数は110,019件です

投稿数ランキング

1
seasoft 		7367
2
468 		3217
3
AMUAMU 		2712
4
nanasess 		2314
5
umebius 		2085
6
yuh 		1819
7
h_tanaka 		1646
8
red 		1570
9
mcontact 		1296
10
tsuji 		958
11
fukap 		907
12
shutta 		835
13
tao_s 		799
14 ramrun 789
15 karin 689
16 sumida 641
17
homan 		633
18 DELIGHT 572
19
patapata 		502
20
flealog 		485


ネットショップの壺

EC-CUBEインテグレートパートナー

Copyright© EC-CUBE CO.,LTD. All Rights Reserved.