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

Question

現在、通販サイトを運営中で、それぞれの商品ページに問合せフォームを組み込んでいますが、その商品ページを訪問されるときにお客様はすでに商品名（長い記号番号）を入力されているので、問合せフォームで再度商品名を入力していただくのは酷と思い、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 · Accepted Answer

こんにちは

イマイチよくわかりませんが、ご質問文の一番下の「<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/

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

こんにちは

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング