document.form で nullまたは・・・jsエラー

質問

いつもお世話になってます。解決方法を教えてください。

抜粋します。
---
disp.php (元のphpファイル)
<form name="dispfm">
<?
$test1 = "test1";
$test2 = "test2";
?>
<select name="select1" onchange="get_msg(this)">
<option value="aaa"><?=$test1;?></option>
<option value="bbb" selected><?=$test2;?></option>
</select>
<textarea name="ta1"><?=$msg;?></textarea>
</form>
---
.js
function get_msg(obj){
var no = obj.form.select1.options[obj.form.select1.selectedIndex].value;
location.herf="chk.php?&type=select&no="+no;
　//ここまでは通っていることは確認できている
}
---
chk.php
<?
if(type == "select"){
$query = "--- SQL ---";
$rlt = mysql_query($query);
$msg = mysql_result($rlt, 0);
　//ここまでもalertにて通っていることを確認済み
//SQLも値とれている
?>
<script type="text/javascript">
<!--
document.dispfm.ta1.value = $msg;<---☆ここでjsエラー（Nullまたはー）
//★ここあたり
//-->
</script>
<?exit;
}
?>
---
☆の部分で「Nullまたはオブジェクトではありません」となり、
元のdisp.phpへ戻ることなく、nullページ（空白何も表示なし）となってしまいます。
ソースをみてもjs部分が書いてあるだけです。
form名とせずにform[0]でしてみたり、getElementByIdでも試しましたが、一向に動きません。

chk.phpでやりたいことは、選んだリストの値をもとに、SQLでtextareaにセットする値を取得する、それを画面を新たに読み込まずにセットしたい、また既に入力された他の値をそのまま残したい。
宜しくお願いします。

回答No.8

yuu_x

全然関係ない話ですが、
XDomainRequest(IE8), XMLHttpRequest level2 なんてものがあったんですね。
時代の流れは速い。

========== http://xxx/resource.php =============================
header('Access-Control-Allow-Origin: http://yyy'); // 許可するドメイン
header('Content-Type: text/plain');
echo 'test';

========== http://yyy/sample.html ==============================
//@cc_on
function load(uri, output) {
var req = new /*@if(1) XDomainRequest() @else@*/ XMLHttpRequest() /*@end@*/;

req.open('GET', uri, true);
req.onload = function() {
output.nodeValue = req.responseText;
req.onload = new Function();
req = null;
};
req.send('');
}

<p>
<input type="button" onclick="load('http://xxx/resource.php', this.parentNode.querySelector('VAR').firstChild);"><var>&nbsp;</var>
</p>

すげー。ごめ、覚書（無駄うち）です。

回答No.7

yuu_x

========== disp.php (元のphpファイル) ============================
<script type="text/javascript" src="chk.php" id="SCRIPT-CHK"></script><!-- エラーにならないところならどこでも -->

========== .js ==================================================
function get_msg(obj){
var chk = document.getElementById('SCRIPT-CHK');
chk.src = 'chk.php?type=select&no='+encodeURIComponent(obj.value);
}

========== chk.php ==============================================
if(type == "select"){
$query = "--- SQL ---";
$rlt = mysql_query($query);
$msg = mysql_result($rlt, 0);

$msg = str_replace("'", "\\'", $msg);
//header('Content-Type: application/javascript');
header('Content-Type: text/javascript');
echo<<<EOS
document.forms['dispfm'].elements['ta1'].value = '{$msg}';
EOS;

}

JSONP だとしても強引なやり方であることには変わりない。

=================================================================
ちなみに、（話がそれます）
document.dispfm.ta1.value
でも、やってることはほぼ同じです。
その他、

(1) document.dispfm.ta1
(2) document['dispfm']['ta1']
(3) docuemnt.form(s)[0].ta1
(4) docuemnt.form(s)['dispfm'].ta1
(5) document.form(s).item(0)
(6) document.form(s).namedItem('dispfm')
(7) document.form(s)['dispfm'].elements['ta1']
(8) document.form(s)['dispfm'].elements.item(0)|item[0]
(9) document.form(s)['dispfm'].elements.namedItem('ta1')|namedItem['ta1']
(10) document.getElemnetById('dispfm')....

(1)～(10)はどれもほぼ同じです。まだあるかもしれません。

以下、受け売りになりますが
(1), (2) はプロパティの衝突の恐れがあるため、好ましくありません。

たとえば
<form action="#" name="dispfm">
<p><input type="text" name="name"></p>
</form>

document.dispfm.name これは、フォームの name 属性値 'dispfm', input 要素、どちらを示すでしょうか？どちらの結果になったとしても好ましくはないでしょう。

省略形によるプロパティの衝突、使い勝手を考慮すると (7) が今のところもっとも無難な書き方です。

エラーの要因は書き方の問題ではなく dispfm, ta1 と名前の付けられた要素が存在しないとの単純ミスがほとんどです。

（#1 は、chk.php で form 要素を吐き出していると仮定してのコードです。）

ほとんどが呼び出すタイミング、要素が生成される前に呼び出している。
ただし、今回の場合は、chk.php に script 以外の要素が存在しないことによるものです。

解決策としては、JSONP でもいいですし、include で直生めして location でリロードしてもいいでしょう。

リロードせずということでしたら JSONP か AJAX
（つか、image でも iframe でも再読み込みさせる要素なら何でもいい。AJAX はセキュリティを考慮して、別ドメインにアクセスできないようになってるけど、JSONP は野放し状態。この辺詳しい人いないかな）

回答No.6

神崎 渉瑠（@taloo）

う～ん、、、URLを入れると確認中になるのかな？

No.5で話題に触れたJSONPで。

disp.phpで読み込んでいるであろう.jsファイル。
----------------
function get_msg(obj){
var no = obj.form.select1.options[obj.form.select1.selectedIndex].value;
var scr=document.createElement('script');
scr.setAttribute('src', "chk.php?&type=select&no="+no);
document.getElementsByTagName('head')[0].appendChild(scr);
}
----------------

chk.php
----------------
<?
type=$_GET['type'];
if(type == "select"){
$query = "--- SQL ---";
$rlt = mysql_query($query);
$msg = mysql_result($rlt, 0);
header("content-type: text/javascript");
?>
document.dispfm.ta1.value = <?php echo $msg; ?>;
<?exit;
}
?>
----------------

未検証です。

> 下記サイトでエラーになっている理由と同じと思います。
> http://www.confrage.com/javascript/form/getelementbyid/getelementbyid.html

必要なJavaScriptが書かれていないだけです。
サンプルとして表示されている部分をコピーして、テキストエディタで新しいファイルを作成、ペーストして保存した物をブラウザで表示して動作確認してみて下さい。
たぶん動くと思います。（CGI不要です）

回答No.5

神崎 渉瑠（@taloo）

> NO.3 補足
> これと同じような動きをしているPGではhtmlの記述はしていませんので、なんとかタグを入れずに動作させたいです。

動いているページがあるのなら、その作り方を参考にしてみて、そのマネをするのが良いと思います。
というか、動いているページのそれぞれのコードが何をしているのか、理解されるところから初めてもいいんじゃないでしょうか。。。

<script>すら入れないならJSONPやAjaxでしょうけど、
この質問文やコードから察すると、無理なんじゃないかな、、、とも思うわけで。。。

disp.phpの<form name="dispfm">と、chk.phpのdocument.dspfmという書き方から、やらんとしていることはわかりますけどね。（たぶんAjaxでしょう。）
JavaScriptを一切使わずに、
ページの内容を変更したい場合は毎回フォームを送信して、CGIだけでHTMLを生成する方が完成が近いんじゃないでしょうか？

ページ遷移をしたくないなら、インラインフレームを使う方法がありますので、この辺をご参考に。
http://home.wi-wi.jp/scripts/log/2006022001/index.html
AjaxやJSONPよりはわかるんじゃないかな、、、と思います。

Ajaxで作られるなら、No.2のコードを確認して下さい。

> No.4
> 正常動作してるほうは chk.php をインクルードしてませんか？
なるほど、、、
それならchk.phpの中でHTMLタグを使わなくても行けますね。

ただ、それだとlocation.href="chk.php・・・"から書き直さないと行けませんが。

回答No.4

yuu_x

> 教えて頂いた内容は理解できるのですが、ほぼ同じような状態で別ファイルでは動いているので、できれば同じ処理でやりたいです。
このファイルchk.phpだけ動かないのです。

正常動作しているＰＧがなぜ動くのかトレースしてみてください。

正常動作してるほうは chk.php をインクルードしてませんか？

> htmlタグは入れたくないのです。
SCRIPT 要素は OK なんですね。ごめんなさい、軽い突っ込みです。
ちなみに htmlタグは '<html>' これをさし、開始タグと終了タグが存在します。
PHP で J(ava)Script のプログラムを状況にあわせて印字するのもいいとおもいます。
==================================================================

希望の動作をかなえるだけでしたら、J(ava)Scriptは必要ないように思います。(#2 又は他の手法は省く）
繰り返しになりますが、chk.php は HTML の SCRIPT 要素と思われる文字列を印字しているに過ぎません。

==================================================================
> よそ様のサイトを勝手に掲載するのはまずいとは思いますが、
下記サイトでエラーになっている理由と同じと思います。
ttp://​www.confrage.com/javascript/form/getelementbyid/getelementbyid.html​

上記サイトでエラーが発生する理由は、コードの提示をしているだけで、実際には J(ava)Script として実装していないからです。

メンテナンスの過程で抜け落ちたのかもしれません。

回答No.3

神崎 渉瑠（@taloo）

chk.php

<!-- この部分を追加 -->
<form name="dispfm">
<input type="text" name="ta1">
</form>
<!-- 追加ここまで -->

<?
if(type == "select"){
$query = "--- SQL ---";
$rlt = mysql_query($query);
$msg = mysql_result($rlt, 0);
　//ここまでもalertにて通っていることを確認済み
//SQLも値とれている
?>
<script type="text/javascript">
<!--
document.dispfm.ta1.value = $msg;//<---☆ここでjsエラー（Nullまたはー）
//★ここあたり
//-->
</script>
<?exit;
}
?>

JavaScriptはwindow.onloadで実行するか、<form>の後ろに<script>を書くようにして下さい。

PHPでvalue=""に入れる方が一般的だと思いますが、それはそれとして。

補足

ありがとうございます。
chk.phpには処理のみで、htmlタグは入れたくないのです。
これと同じような動きをしているPGではhtmlの記述はしていませんので、なんとかタグを入れずに動作させたいです。

＞PHPでvalue=""に入れる方が一般的だと思いますが、それはそれとして。

はい。本当はそうしたいです。document.dispfm.ta1.value='hoge';
で、NULLまたはオブジェクトではありませんエラーになってしまって、いろいろやっているうちにgetElementByIdとして投稿させてもらっただけで、やれるなら素直にvalueに入れたいです。

よそ様のサイトを勝手に掲載するのはまずいとは思いますが、
下記サイトでエラーになっている理由と同じと思います。
ttp://www.confrage.com/javascript/form/getelementbyid/getelementbyid.html

回答No.2

yuu_x

========== disp.php (元のphpファイル) ============================
<script type="text/javascript">
//@cc_on
var get_msg = (function() {
var req, form;

return function (select) {
var data = 'type=select&no='+encodeURIComponent(select.value);

form = select.form;
req = new /*@if(1) ActiveXObject("Msxml2.XMLHTTP.3.0") @else@*/ XMLHttpRequest() /*@end@*/;
req.open('GET', 'chk.php'+'?'+data, true);

req.onreadystatechange = statechangeListener;
req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

req.send('');
}

function statechangeListener() {
if (req.readyState == 4) {
if (req.status == 200) {
form.elements['ta1'].value = req.responseText;
}
req.onreadystatechange = new Function();
req = null;
}
}
})();
</script>

<form action="chk.php" name="dispfm" id="dispfm">
<p>
<select name="select1" onchange="get_msg(this);">
<option value="aaa"><? h($test1); ?></option>
<option value="bbb" selected><? h($test2); ?></option>
</select>
<textarea name="ta1"><? h($msg); ?></textarea>
</p>
</form>

========== chk.php ==============================================
<?php
if (isset($_GET)) {
if ($_GET['type'] == 'select') {
$query = "--- SQL ---";
$rlt = mysql_query($query);
$msg = mysql_result($rlt, 0);

header('Content-Type: text/plain');
echo $msg;
}
}
?>

回答No.1

yuu_x

========== disp.php (元のphpファイル) ===========================
<?
$test1 = "test1";
$test2 = "test2";
function h ($str) { echo htmlentities($str, ENT_QUOTES); }
?>
<form action="chk.php" name="dispfm" id="dispfm">
<p>
<select name="select1" onchange="get_msg(this);">
<option value="aaa"><? h($test1); ?></option>
<option value="bbb" selected><? h($test2); ?></option>
</select>
<textarea name="ta1"><? h($msg); ?></textarea>
</p>
</form>
---
========== .js ==================================================
function get_msg(select){
var no = select.value;
location.herf="chk.php?type=select&no="+encodeURIComponent(no);
}
---
========== chk.php ==============================================
<?
if(type == "select"){
$query = "--- SQL ---";
$rlt = mysql_query($query);
$msg = mysql_result($rlt, 0);
?>
<script type="text/javascript">
<!--
var form = document.getElementById('dispfm');
dispfm.elements['ta1'].value = '<? echo str_replace("'", "\\'"$msg ?>';
//-->
</script>

J(ava)Script のコード（HTML も同様）を PHP で出力する場合、PHP では変数の内容を印字しているに過ぎません。

J(ava)Script の文字列として認識させる場合は、クオーテーションで囲む必要があります。

> chk.phpでやりたいことは、選んだリストの値をもとに、SQLでtextareaにセットする値を取得する、それを画面を新たに読み込まずにセットしたい、また既に入力された他の値をそのまま残したい。

やるなら... (#2 以降)

補足

ありがとうございます。
上記を試してみましたが、「オブジェクトがありません」というエラーに変わりましたがやはり画面は空の状態です。
教えて頂いた内容は理解できるのですが、ほぼ同じような状態で別ファイルでは動いているので、できれば同じ処理でやりたいです。
このファイルchk.phpだけ動かないのです。
'>'が抜けているなど探しましたが、chk.php側でalert()のみだとちゃんと元.phpページが表示されるので、やはりdocumentの部分の書き方なのかと思います。
うっかりこういうことしてない？というようなことがありましたら、教えてください。
宜しくお願いします。