重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら>

電子書籍の厳選無料作品が豊富!

下記質問について解決したものと判断し締め切りましたが、確認するとformのinputのvalue内が空白になっていました。
回答者fujillin様の、
「setValue関数が確実にload後に実行されるように、
loadメソッドのcallback(complete)でsetValue関数を呼び出すようにしてください。」
「loadメソッド」「callback」「setValue関数」とか検索して色々と試してみましたが、理解しないままやっていますので何ら解決していません。
fujillin様、またはどなたかおわかりの方、どうぞ宜しくお願いいたします。

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

この度、商品数の増加に伴い、商品ページを簡略化するため、共通しているform部分をインクルードしたいのですが、その中の(商品名)を関連付ける方法を教えてください。

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

今まで下記の方法でOKだったのですが、この度確認するとformのinputのvalue内が空白になっていました。何が間違っているのでしょうか?

<!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>

(fujillin様のご回答)
イマイチよくわかりませんが、ご質問文の一番下の「<form name="form"~~」以下の内容は、後から読み込もうとしている内容で、別ファイルという意味ですよね?
(今までは、直接htmlの中に記述されていたものと推測します)

>何が間違っているのでしょうか?
実行順をよく考えればわかると思いますが、後から読み込む方法の場合、「body onload」でsetValue関数が実行される時には、まだformの内容が読み込まれていない可能性が高いです。
ですので、値を設定するべき対象要素がまだ存在しないため設定はされず、その後に読み込まれた要素は空白のままということと推測します。

あるいは、要素の指定が正しくできていないかでしょう。
form要素にタグ名称と同じformのidを付けていて、「document.form」のような直接個別の名で指定する記述方法なので場合によっては、確実ではないことがあります。
目的要素にidがあるのですから、getElementByIdやquerySelectorを用いて指定する方が、安全で確実と思います。

さらには、ご提示のスクリプトを見るとjQueryなどのライブラリを用いているものと思われますが、ご提示のソースには、それを読み込んでいる記述がありません。
ですので、そもそも「$関数」でエラーになっていて動作していないだけという可能性もあります。
(記述を省略しただけなのかもしれませんが、全文書形式で記述してあるので・・・)
また、ライブラリを利用している場合は、前述の要素の指定でもそちらを利用した方が簡便かと思います。


状況がよくわからないので、とりあえず、実行順序に関しての対処法のみですが。
setValue関数が確実にload後に実行されるように、
loadメソッドのcallback(complete)でsetValue関数を呼び出すようにしてください。
(そうすることで順序が守られるはずです)
https://api.jquery.com/load/

質問者からの補足コメント

  • 「formのinputのvalue内が空白」とは、下図の対象機種の欄に入力させたい商品名が入らない、ということです。
    直接htmlソースに記してしまう方法でもいいのですが、商品点数が1000近くあるのでformをインクルードしてみました。
    インクルードはうまく作動していてお客様からお問い合わせは届くのですが、どの商品を見てからの問合せかがわからないためformの対象機種欄に商品名が入るように希望しています。

    「商品ページのフォームのテキストボックスに」の補足画像1
      補足日時:2018/12/04 14:59
  • [ 商品説明ページ ]
    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="shift_jis">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2 …
    <script>
    $(function() {$.ajaxSetup({beforeSend: function(xhr){xhr.overrideMimeType("text/html;charset=Shift_JIS");}});$("#form").load("./form.html");});});
    </script>

    つづく・・・

      補足日時:2018/12/04 15:08
  • <script>
    function setValue() {
    var value = " 商品名 ";
    if (value) {
    document.form._希望機種.value = value;
    }};
    </script>
    </head>
    <body id="plan" onload="setValue(); ">
    ・・・商品説明など・・・
    この機種への交換工事をご希望でしたら、下記フォームにご入力いただき、送信してください。
    <div id="form"></div>
    </body>
    </html>

    つづく

      補足日時:2018/12/04 15:08
  • [ フォームページ ]
    <form action="//www.kanetomo-s.co.jp/cgi-bin/clipmail/clipmail1.cgi" method="post" class="h-adr" enctype="multipart/form-data" name="form">
    <table class="mail" summary="mail">
    <tr>
    <th>対象機種</th>
    <td><input type="text" name="_希望機種" size="50"></td>
    </tr><tr>
    <th><img src="/okayama/images/mail_must.gif" class="must">お名前</th>
     ・・・・・・・・・・
    </form>

    以上、宜しくお願いいたします。

      補足日時:2018/12/04 15:10

A 回答 (5件)

<input type='text' name='NAME' value='機種名'>


で自動的に機種名と入りますが...
商品別にページを作成しているのであればPHP言語との組み合わせをお奨めします。
    • good
    • 0

そもそもなんですが、WebのFWは何で、View記述言語は


何ですか?

普通はView記述言語でデータをサーバ側で埋め込んでhtml
を生成するのですが、何故クライアント側でやろうと
しているのでしょう????

かなり奇妙奇天烈なやり方に見えます。
    • good
    • 0

No2です



>1000近くの商品ファイルもすべて手打ちで入力しました。
あらら・・・
そういう面倒を避けようとして、今回の「インクルード」の質問になっているのではないのでしょうか?
1000ファイルのままだと、仮に今回、何らかの修正をすることにしたら、1000のファイルを順次修正して、修正が正しく行われていることをチェックして…と大変な手間になりませんか?
チェックも1000件分全部行わなければならないので、手間も大きく見落としも発生する確率が高いので、それこそ、「更新を行うプログラム」を作成して、それで処理した方が確実ということになりかねません。

大雑把に言って、商品や顧客の管理はDB等(少なければリストなど)で行い、出力(表示)に際してはテンプレートをもとにその商品情報を流し込んで行うような仕組みにしているものが多いと思います。
(雛形がひとつですまないにしても1000個になることはないでしょうし、修正や更新等が生じた際にはそこを直す手間だけで済むはずです)

基本的には、全体的な管理と処理に関しては全てサーバ側で行い、javascript等はUIの補助として利用するような考え方になるのではないでしょうか?


>申し訳ありませんが、どうぞ宜しくお願いいたします。
私は、サーバサイドのプログラムに関しては無知同然ですので、お力にはなれません。
また、そのような内容になるとjavascriptのカテではなく、現在cgiで利用なさっている言語のカテでご質問なさる方が適切かと思います。
ただし、「作り方」などのような漠とした質問をすれば、「既成のサイトを利用した方が安全で確実」という回答しかつかないことが十分に予想されます。
現状のご質問の内容を拝見する限りは、ご自身で学習するよりも、まさにその方向に切り替えるのが得策のようにも感じます。
というのも、サイトの性格上、通信の保護やセキュリティ面での対策をきちんと行わないと、思わぬ事故に遭遇する可能性があるからで、そのあたりに関しても十分に考慮する必要があるからです。

以下、すでにご存知とは思いますが、ご参考までに。
https://ec-orange.jp/ec-media/?page_id=16716
https://www.ebisumart.com/blog/ec-mng/

https://www.ebisumart.com/blog/make-ec-10m/
https://precs.jp/blog/?p=3470
    • good
    • 0

No1です。



補足を見ました。追加のシースはきちんと読み込めているようですね。
ですので、原因は前回回答の最初のもの(タイミングの問題)だと思われます。
最後に記しましたように、loadで別ファイルを追加した後に、機種名を記入すればよいはずです。
そのためには、(前出のように)loadメソッドのcallbackを利用するようににしてください。
jQueryのloadの解説ページを再掲しておきます。
https://api.jquery.com/load/

ご提示の補足で、前半のスクリプトと後半のそれとでは、あまりにも内容や記述方法に隔たりが感じられますが、前半のものが書けるのであれば簡単なはずと思いますが・・・
(質問者様ご本人でなくとも、それを記述した方に相談すれば、すぐに解決すると思います)


ところで、スクリプト内に
>var value = " 商品名 ";
とありますが、これから想像すると
>商品点数が1000近くあるので~~
…って、このファイルが商品点数分作成されてるってことなのでしょうか???

まさか、そんなことはないでしょうから、サーバサイドでソース内に書き出しているってことかな?
とはいえ、その記入されたデータに基づいて、再度処理を行うという相当にまどろっこしい方法になっていませんか?

通常であれば、サーバサイドのプログラムで「商品のデータベース(あるいは商品リスト)などを参照して、雛形のページにその商品情報を埋め込んで吐き出す」ような構成にしておくのではないかと想像しますけれど…?
もし、そのようになっているのであれば、スクリプト内に商品名を記述するかわりに、直接htmlソースに記述するようにするだけで、ご質問のようにクライアント側で再度読み込むなどの処理を行う必要はなくなるものと思います。
    • good
    • 0
この回答へのお礼

恥ずかしながら、「商品点数が1000近く、このファイルが商品点数分作成されてるってこと」が現実です。
通信販売をやりたくて、HTMLのポケット参考書を1冊買って、あとは他のサイトのソースを参考にしながら、独学で手作りサイトを運営しています。
1000近くの商品ファイルもすべて手打ちで入力しました。
お陰様でHTMLのことはある程度理解できるのですが、javascriptなどのことは丸っきりわからないまま組み込んでいます。
サーバサイドのプログラムで「商品のデータベース(あるいは商品リスト)などを参照して、雛形のページにその商品情報を埋め込んで吐き出す」・・・は時間があればやってみたいと思いますが、今は「loadで別ファイルを追加した後に、機種名を記入」を教えていただきますようお願いいたします。
申し上げましたようにjavascriptは(ポケット参考書は買ってはみたものの)まったくわかっていない状況です。
申し訳ありませんが、どうぞ宜しくお願いいたします。

お礼日時:2018/12/04 20:36

前回回答者です。


ご質問文を読んでいると、回答の内容がほとんど通じていないのではないかという気がしてきました。

>確認するとformのinputのvalue内が空白になっていました。
何をなさってどのように確認したのかわかりませんが、その前に、前回指摘しましたようにご提示のソースが全文だとするなら、そのままでは何も動作しないはずと思います。

>共通しているform部分をインクルードしたいのですが~~
ひとまず、『インクルード』ができているのかを確認するために、以下のスクリプトを直接アドレスバーに入力してEnterキーを押してみてください。
(勿論、別の方法で確認なさってもOKです。例えばブラウザの開発者ツールとか。)
javascript:alert("result=\n" + document.getElementById("form").innerHTML);

ちゃんと「インクルード」できているのなら、該当する部分のhtmlが表示されるはずです。
そうでない場合には、まず、そこから修正が必要になることでしょう。


そもそも論になってしまいますが、インクルードの内容がご提示の内容程度であるのなら、直接htmlソースに記してしまう方法にすれば、「javascript」も「インクルート」も不要になるので、簡単だと思いますけれど・・・?
(まぁ、元に戻っちゃうのか、もっと前に戻ってしまうのかもしれませんが、そもそも複雑にする必要があるのだろうかという素朴な疑問です)
仮に、インクルードするにしても、サーバ側で処理してしまえばそれで済みそうに感じます。

おせっかいながら、この辺りでつまづいているということから、全体の構成やサーバー側の仕組みなどは大丈夫だろうかといういらぬ心配をしてしまいます。
    • good
    • 0
この回答へのお礼

無能な質問者にお付き合いいただき、大変恐縮しています。誠にありがとうございます。
説明不足で申し訳ありません。
長文となり添付もしますので、補足コメントで説明いたします。
宜しくお願いいたします。

お礼日時:2018/12/04 14:44

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!