![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?5a7ff87)
インクルードしている問合せフォームの品名が予め入力されるように、
本体のhtmlに、
<head>・・・・
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2 …
<script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>
<script>
jQuery(function($) {
$.ajaxSetup({
beforeSend: function(xhr){
xhr.overrideMimeType("text/html;charset=Shift_JIS");
}
});
$("#form").load("form.html");
});
</script>
<script charset="UTF-8">
function setValue() {
var value = "ほげほげ";
if (value) {
document.form._品名.value = value;
}
}
</script>
・・・・
</head>
<body onload="setValue();">
・・・・
<div id="form"> </div>
を指定して、
<form action="・・・・" name="form">
<input type="text" name="_品名" value="">
のform.htmlをインクルードしています。
パソコンの「検証」でテストすると正常に作動するのですが、スマホだと品名欄が空白になってしまいます。
パソコンとスマホの履歴を削除してみましたが変わりません。
解決方法を教えて下さい。宜しくお願いいたします。
No.7ベストアンサー
- 回答日時:
No6です
load部分を書き直さなければならないかと思ったら、ちゃんとcompleteが用意されているので、簡単にそのままでいけますね。
http://api.jquery.com/load/
以下の形式にすれば、想定の動作になると思います。
・実際に設定する値の内容は、適切に修正願います
・ひとまず、対象要素のidはtargetのままとしてあります
$(function(){
$.ajaxSetup({
beforeSend:function(xhr){xhr.overrideMimeType("text/html;charset=Shift_JIS");}
});
$("#form").load("form.html", function(){
// ここに追加で行いたい処理を記述する
//(とりあえず、abcdeの文字列を設定する例)
$("#target").val("abcde");
});
});
※ 今回の内容はスマホだから動かず、PCなら動くという種類の内容ではありません。
PCでも、以前のままでは動作しない可能性が十分にあります。(通信環境による)
※ 気付くのが遅れまして、大変申し訳ありませんでした。
(つい、ご質問のタイトルに踊らされてしまいました)
できました!
スマホ(iPhoneSE)でもInternetExplorer11でも、動きます!
何とお礼を申したらいいか、本当に感謝です。
これでやっと次の作業に移れます。
ありがとうございました!!
No.6
- 回答日時:
No5です
うっかり見落としていました(お恥ずかしい)
いろいろとお手間をとらせて、申し訳ありませんでした。
>スマホ(iPhoneSE) 共に下の画像表示となりました。
記述法の問題ではなく、多分、処理のタイミングの問題でしょうね。
(load前にinput要素に書き込みに行っているだけだと思います)
ajaxのスクリプトの方を書き直す必要がありますが、ちょっと調べないとわからないので、また、後ほど回答します。
No.5
- 回答日時:
No4です。
どうやら、input要素のvalue値にアクセスできないのかな?
No4のサンプルで試してみれば、どこでエラーになるかを確認できるはずなのですが・・・
>target.innerHTML = "<input type='text' value='hogehoge'>";
inout要素にはinnerHTMLはありませんので、スマホでなくとも確実にエラーになります。
要素をまるごと「入れ替える」処理にしないといけませんね。
(ajaxの際のjQueryの実際の処理は知りませんが、innerHTML や insertAdjacentHTMLで書き換えているものと推測します)
何度もご回答頂き、本当にありがとうございます。
上の補足のように、パソコン上で色々なブラウザでテストしてみました。
GoogleChrome OK 、Firefox OK 、Opera OK 、Safari OK 、InternetExplorer11 NG 。
なんと!スマホ(iPhoneSE)のブラウザ Safariもパソコン上ではOKでした。
その代わり、InternetExplorer11ではNGでした。
iOSとInternetExplorer11に共通の問題があるのでしょうか・・・・
また、<script・・・>は<input・・・>より下に書くべきなのでしょうか?
「No4のサンプルで試して・・・どこでエラーになるかを確認・・・」ということですが、試し方、確認方法がわかりません。(勉強不足で申し訳ありません。)
本当に申し訳ありませんが、どうぞ、宜しくお願いいたします。
No.4
- 回答日時:
No3です
私には試行してみる環境がないのとスマホもあまり知らないのですが・・・
簡単に調べてみましたが(iPhone)Safariで特に使えないものがあるということもなさそうです。
https://caniuse.com/#search=value
ひとまず、テスト用のHTMLを作ってみました。(下部を参照)
と言っても、ごく簡単なもので getElementById と element.value しか使っていません。
これで、どこで止まるか/止まらないかの状態を見ながら、メソッドをいろいろ変えてみるなどして、試行錯誤ができるのではないかと思います。
(最悪は、step関数がエラーになることもあるのかも知れませんが(笑))
それでもダメな場合は、ajaxはできているようなので、要素ごと入れ替えてしまう方法が考えられます。(あまりスマートではないですけれど)
文字列で値まで設定したHTMLを作成し、innerHTML や insertAdjacentHTMLを用いて挿入して、元の要素は削除してしまうという考え方です、
まったく別のアプローチになりますが、先人たちの知恵を借りるという方法もあるかもしれません。
ご提示のスクリプトでは、ajaxは動作しているようですので、値の変更もjQueryを利用して $('#target').val('abc') あるいは .attr()、.prop()などを用いた処理にすることで可能かもしれません。
(上記同様、入れ替えてしまう方法もあると思います)
※ なんせテスト環境が無いので、残念ながらこれ以上はお役に立てそうもありません。
【 テスト用HTML 】
<!DOCTYPE HTML>
<html lang="ja">
<head><title>Test</title>
<meta charset="shift-jis">
</head>
<body>
<p>
[ STATUS ] =
<span id="info">0:start</span>
</p><p>
<input id="target" />
</p>
<script type="text/javascript">
var step = function(s){
document.getElementById("info").innerHTML = s;
}
step("1:要素取得");
var t = document.getElementById("target");
step("2:値設定");
if(t){
t.value = "abc";
step("3:終了");
} else {
step("1:取得失敗");
}
</script>
</body>
</html>
ありがとうございます。
<script>
function setValue() {
document.form.target.value = "hogehoge";
}
</script>
<script>
function setValue() {
document.getElementById('target').setAttribute('value','hogehoge');
}
</script>
<script>
function setValue() {
$('#target').val('hogehoge');
}
</script>
<script>
function setValue() {
$('input[name="target"]').val('hogehoge');
}
</script>
いずれもPCではOKですが、スマホ(iPhoneSE)ではダメでした。
<script>
function setValue() {
var target = document.getElementById('target');
target.innerHTML = "<input type='text' value='hogehoge'>";
}
</script>
の場合は、PCではOKですが、スマホ(iPhoneSE)では入力枠も表示されなくなりました。
せっかく色々と教えていただいたので、もうひと頑張りしようと思います。
本当にありがとうございます。
No.3
- 回答日時:
No2です。
>document.getElementById('target').setAttribute('value','ほげほげ');
id=targetにしたのですか?
そうでないなら、getElementById()では要素を取得できませんけれど…
(pcで動いているとのことなので、idにはしてあるみたいですが)
setAttribute()でも動作しないとのことなので、iPhone特有の問題なのかも知れませんね。(すみませんが、スマホはあまりしらないので)
念のため、'ほげほげ'も英字にしてみてもダメなのでしょうか?
ありがとうございます。
はい、id=targetにしました。pcでは動いています。
'ほげほげ'を英字+数字にしてもダメでした。
やはり、iPhone特有の問題なのでしょうか?
2000もの商品に各々お問合せメールフォームを設置していて、この度スマホ対応にしたく、このトラブルになりました。
どうにかなりませんかね?
No.2
- 回答日時:
こんにちは
ご質問の様子から、form要素の読み込みはできていると解釈しました。
・・・とするなら、値の設定ができないところに絞り込めるので・・・
>document.form._品名.value = value;
上記の1行でエラーになっている可能性が大だと推測します。
理由として考えられるのは
1)要素の指定方法が悪い可能性があります。
(スマホの対応対応状況は知りませんが)
name属性あるいは順序で
forms[0].elements[~~] または forms[0].elements[0]
あるいは、要素の種類で
forms[0].getElementsByTagName("input")[0]
のような指定方法にするか、スマホが対応しているのなら
querySelector(selector)
といった方法で取得するなどに変えれば良いかもしれません。
2)いずれの場合でも、name属性をキーとする指定方法をとる場合は、要素の読み込みがshift-jisで、スクリプトからの指定はutf-8で行っているようなので、齟齬が生じている可能性があります。
該当要素名を、一旦、英数名などに変えて試してみることも必要かも。
(PCでは取得できているとのことなので、こちらは問題ないのかも知れませんが…)
ありがとうございます。
「_品名」を「target」に変更して
<script>
function setValue() {
document.getElementById('target').setAttribute('value','ほげほげ');
}
</script>
で試しましたが、パソコンやパソコンの「検証」では、target欄に正常に「ほげほげ」が表示されるのですが、スマホ(iPhoneSE)では空白のままです。
色々検索すると、どうやらiOSのバグのようで、「value="ほげほげ"」を上記のように「setAttribute('value','ほげほげ')」に変化させてみたりしていますがうまくいきません。
どなたか宜しくお願いいたします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript javascript作成してます。ラジオボタンで判定するコードを書いてます。 1 2023/07/18 11:03
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript switch文のswitch(n)の部分を複数の値にするか、if文に変えてほしいです。 1 2022/07/27 17:18
- JavaScript セレクトボックスを2つ設けて選択して初めてメッセを表示 1 2022/07/27 12:15
- JavaScript HTMLでJavaScriptを使ってパスワードの強化判定のプログラムを作成しています。 一通り作っ 2 2022/10/19 01:41
- JavaScript javascriptのちょっとした動作不良(原因は突き止めたのですが) 1 2023/06/15 19:58
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
Javascriptを使ってQRコード読...
-
IndexedDB を使ってファイルア...
-
パソコンで動くjavascriptがス...
-
WebbrowserよりHTMLのValue値を...
-
<input>のvalue値をプルダウン...
-
JavaScriptでtabindexの変更っ...
-
jQueryのblockUIをformのボタン...
-
jQuery3 reset()が効かない。
-
テーブルの形式を整えるJavascript
-
変数にドットをいれることはか...
-
スクリプトの外部からの読み込み
-
[jQuery UI] sortableを使いaja...
-
readyStateが4にならない原因
-
jQueryでloadしたphpをapendTo...
-
Selenium4でボタンをクリックで...
-
Rails3でのクリックされたボタ...
-
ajaxからphpにpsotしたときの日...
-
クリックテキストを次ページに表示
-
JQueryで動的生成のスライダが...
-
Google Apps Scriptを利用した...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Javascriptを使ってQRコード読...
-
SQLのmaxで求めた値を変数に代...
-
JavaScriptでtabindexの変更っ...
-
ドラッグ & ドロップでのド...
-
Selenium Basicの件
-
パソコンで動くjavascriptがス...
-
<input>のvalue値をプルダウン...
-
ボタンクリックした際、id末尾...
-
inputタグ内にあるid属性の意味?
-
WebbrowserよりHTMLのValue値を...
-
struts selectbox optionsColle...
-
IndexedDB を使ってファイルア...
-
プルダウン内容に応じてラジオ...
-
JQuery Datepickerについて
-
★大至急!JavaScriptのif文教え...
-
javascriptの計算結果をvalue=""に
-
メールを送信するボタンでOutlo...
-
jquerymobileで作成するアンケ...
-
VBAでIEのHTMLタグの要素を操作...
-
セレクトしたデータを更新させ...
おすすめ情報
スマホのjavascriptはオンの状態で、ほかのjavascriptは正常に動いています。
「_品名」を「target」に変更して
<script>
function setValue() {
document.getElementById('target').setAttribute('value','ほげほげ');
}
</script>
で試しましたが、パソコンやパソコンの「検証」では、target欄に正常に「ほげほげ」が表示されるのですが、スマホ(iPhoneSE)では空白のままです。
色々検索すると、どうやらiOSのバグのようで、「value="ほげほげ"」を上記のように「setAttribute('value','ほげほげ')」に変化させてみたりしていますがうまくいきません。
どなたか宜しくお願いいたします。
やはり、iPhone特有の問題なのでしょうか?
2000もの商品に各々お問合せメールフォームを設置していて、この度スマホ対応にしたく、このトラブルになりました。
どうにかなりませんかね?
念のため、パソコン上で色々なブラウザでテストしてみました。
GoogleChrome OK 、Firefox OK 、Opera OK 、Safari OK 、InternetExplorer11 NG 。
なんと!スマホ(iPhoneSE)のブラウザ Safariもパソコン上ではOKでした。
その代わり、InternetExplorer11ではNGでした。
iOSとInternetExplorer11に共通の問題があるのでしょうか・・・・
fujillin様のNo.4の【 テスト用HTML 】を試しましたら、GoogleChrome、InternetExplorer11、スマホ(iPhoneSE) 共に下の画像表示となりました。
次にどうすればいいのかわかりません。
宜しくお願いいたします。