おしえて

フォームの値の、親→子→親への受け渡し

解決済

質問者：Oyaji35712
質問日時：2016/11/29 18:17
回答数：3件

mysql, php, そしてjavascriptを用いて、「親画面で品名のキーワードを入力後、検索ボタンを押すと、子画面が開き、検索結果が一覧表で表示される。表から、目的の品名を選び、選択ボタンを押すと、当該品名と識別番号が親画面に戻され、子画面は閉じられる。」というシステムを作りたいと思っています。
当サイトの過去の投稿を参考にさせて戴きながら、下記のようなコードを書いたところ、親画面でキーワードを入力し、子画面で検索結果が表示されるところまでは問題なく動作しますが、子画面で選択ボタンを押すと、親画面の品名や識別番号の入力欄には「[object HTMLInputElement]」という文字が表示されるだけで、子画面に標示されている検索結果が反映されぬまま、子画面が閉じられてしまいます。
何がいけないのか、どなたかご指摘くださると幸いです。
宜しくお願い致します。

----------------------

【親(parent.html)】

<!DOCTYPE html>
<html>
<head>
<title>親画面</title>
<meta charset="utf-8">
<script type="text/javascript">
function open_child() {
window.open("about:blank","child","width=400,height=300");
document.form_goods.target = "child";
document.form_goods.method = "post";
document.form_goods.action = "child.php";
document.form_goods.submit();
}
</script>
</head>
<body>
<form action="" method="post" name="form_goods">
識別番号:<input type="hidden" name="goods_id" id="goods_id">
品名:<input type="text" name="goods_name" id="goods_name">
<input type="submit" name="submit" value="検索">
</form>
</body>
</html>

--------------------

【子(child.php)】

<?php
$pdo = new PDO('mysql:host=host;dbname=database;
　　charset=utf8','user','password',
[PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC]);
$key_word = $_POST['goods_name'];
$like_key_word = "%".$key_word."%";
$sql = "SELECT * FROM goods WHERE goods_name LIKE '$like_key_word'";
$stmt = $pdo -> qery($sql);
while($row = $stmt -> fetch()){
　　$rows[] = $row;
}
?>

<!DOCTYPE html>
<html>
<head>
<title>子画面</title>
<meta charset="utf-8">
<script type='text/javascript'>
function send_to_parent() {
if(!window.opener || window.opener.closed) {
window.close();
} else {
var element1 = window.opener.document.getElementById('goods_id');
var element2 = window.opener.document.getElementById('goods_name');
element1.value = document.getElementById('id');
element2.value = document.getElementById('name');
window.close();
}
}
</script>
</head>
<body>

<table border='1'>
<tr><th>識別番号</th><th>品名</th></tr>
<?php foreach($rows as $row){?>
<tr>
<td><?=$row['goods_id']?></td>
<td><?=htmlspecialchars($row['goods_name'],ENT_QUOTES,'UTF-8')?></td>
<form method='post' action='' name='form_result'>
<td><input type='hidden' name='id' id='id' value="<?=$row['goods_id']?>">
<input type='hidden' name='name' id='name' value="<?=$row['goods_name']?>">
<input type='submit' name='input' value='選択' onClick='send_to_parent()'>
</td>
</form>
</tr>
<?php }?>

</body>
</html>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： yambejp
回答日時：2016/11/29 19:07

ああ、よくみると相当グダグダですね

まずforeachでまわしているのでidがユニークじゃなくなりますね
これはhtml的にNGです
それとformを入れるなら<td>の内側です
また子winからサブミットする必要はありません

たとえばこうしておいて
<?php foreach($rows as $key=>$row){?>
<tr>
<td><?=$row['goods_id']?></td>
<td><?=htmlspecialchars($row['goods_name'],ENT_QUOTES,'UTF-8')?></td>
<td>
<form>
<input type='hidden' name='id' value="<?=$row['goods_id']?>">
<input type='hidden' name='name' value="<?=$row['goods_name']?>">
<input type='button' value='選択' onClick='send_to_parent(this.form)'>
</form>
</td>
</tr>
<?php }?>

スクリプトはこんな感じでどうでしょ？
<script>
function send_to_parent(f) {
if(!window.opener || window.opener.closed) {
window.close();
} else {
var element1 = window.opener.document.getElementById('goods_id');
var element2 = window.opener.document.getElementById('goods_name');
element1.value = f.elements["id"].value;
element2.value = f.elements["name"].value;
window.close();
}
}
</script>

- 0
- 件

通報する

この回答へのお礼

yamabejp様、迅速かつ丁寧に教えてくださり、ありがとうございます。
なるほど、子画面からサブミットする必要はないのですね。それなら、$_POSTが発生しないので問題解決!と納得し、ご教授戴いた通りにform部分とスクリプトを修正してみましたが、残念ながら選択ボタンをクリックしても何の反応も起きません。そして、恥ずかしながらforeach文の$key=>$rowの意味が理解できないので、下記のようにPHPデータ抽出部分を書き換えて、HTML出力させるようにしてみましたが、結果は同じです。
<?php
～略　～
$stmt = $pdo -> qery($sql);
$res = "<table>\n";
$res .= "<tr><th>識別番号</th><th>品名</th></tr>\n";
while($row = $stmt->fetch()){
$res .= "<tr><td>" .$row['goods_id'] ."</td><td>" .htmlspecialchars($row['goods_name'],ENT_QUOTES,'UTF-8') ."</td>\n";
$res .= <<<eof
<td><form>
<input type='hidden' name='id' value='{$row['goods_id']}'>
<input type='hidden' name='name' value='{$row['goods_name']}'>
<input type='button' value='選択' onClick='send_to_parent(this.form)'>
</form></td>
eof;
$res .= "</tr>\n";
}
$res .= "</table>\n";
?>
～　略　～
<body>
<?=$res?>
</body>
</html>

通報する

お礼日時：2016/11/30 17:34

No.3

回答者： yambejp
回答日時：2016/11/30 19:58

とりだしたデータが正しく渡っていれば、htmlソースはこんな感じになります

openerの値を書き換えずにとりあえずalertすることにしました
下記コードに近いhtmlが吐き出されるかきちんと確認して
間違っているところを修正してください
（文法エラーなどはF12の開発環境で確認できると思います）

<script>
function send_to_parent(f) {
alert(f.elements["id"].value+":"+ f.elements["name"].value);
}
</script>
<table border='1'>
<tr><th>識別番号</th><th>品名</th></tr>
<tr>
<td>x001</td>
<td>hoge1</td>
<td><form>
<input type='hidden' name='id' value="1">
<input type='hidden' name='name' value="hoge1">
<input type='button' name='input' value='選択' onClick='send_to_parent(this.form)'>
</form>
</td>
</tr>
<tr>
<td>x002</td>
<td>hoge2</td>
<td><form>
<input type='hidden' name='id' value="2">
<input type='hidden' name='name' value="hoge2">
<input type='button' name='input' value='選択' onClick='send_to_parent(this.form)'>
</form>
</td>
</tr>
<tr>
<td>x003</td>
<td>hoge3</td>
<td><form>
<input type='hidden' name='id' value="3">
<input type='hidden' name='name' value="hoge3">
<input type='button' name='input' value='選択' onClick='send_to_parent(this.form)'>
</form>
</td>
</tr>

</body>
</html>

- 0
- 件

通報する

この回答へのお礼

yamabejpさん、再三の具体的なご助言を、ありがとうございました。今回教えて戴いた内容でスクリプトを一旦書き換え、選択ボタンをクリックした際に標示されるアラートの内容で、目的の選択肢(識別番号と品名)が選択されていること、及びhtmlソースもご教授戴いた内容と同様であること、を確認致しました。そして、再び回答N0.2の内容にスクリプトを書き戻したところ、望み通りの動作を致しました! 前回、ミスタイプ等には充分注意した積もりですが、恐らく単純なミスに気付かなかったのだと思います。その結果、余計なお手間をお掛けしてしまったことを、お詫び致します。
そして、今回、丁寧にご教示戴き、本当に沢山のヒントを戴いたこと、また、暗にもっと基礎的な勉強が必要であることをご示唆戴けたことを、深く感謝致します。重ねて御礼申し上げます。ありがとうございました。

通報する

お礼日時：2016/12/01 11:17

No.1

回答者： yambejp
回答日時：2016/11/29 18:22

とりあえず

element1.value = document.getElementById('id');
element2.value = document.getElementById('name');
↓↓↓
element1.value = document.getElementById('id').value();
element2.value = document.getElementById('name').value();

- 1
- 件

通報する

この回答へのお礼

yamabejp様、早速のご回答をありがとうございました。
実は、child.phpの始めに、
if (!isset($_POST['goods_name']) || $_POST['goods_name'] === "" ){
$errors['goods_name'] = "検索語が入力されていません。";
}
が挿入されているのですが、ご教授戴いた通りに修正すると、「検索語が入力されていません。」とエラー標示が出てしまいます。そして、上記のif文をコメントアウトすると、データベースのgoodsテーブルのデータ全てが"検索"されて子画面に標示されてしまうので、悩んでいます。

通報する

お礼日時：2016/11/29 18:43

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