こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

画面の再読込をせずに動作する方法について

下記のソースで動作は出来ているのですが、画面の再読込が必要な状況となっております。
そのため、再読込をせずに動作させたいと思ったのですが、どうすればできるかわからなかったのでアドバイスいただける方がいらっしゃいましたら、ご教示の程、よろしくお願いします。

【やりたい事】
1. サブ入力画面でcopyボタンを押下時、入力画面の名前とメールアドレスをサブ入力画面にコピーしているのですが、画面の再読込が必要になっているのを、再読込無しで動作させたいです。
2. 入力画面でdel2ボタンを押下時、3rdの行の内容を2ndにコピーした上で、3rdの内容を削除しているのですが、画面の再読込が必要になっているのを、再読込無しで動作させたいです。
3. これは出来ればで結構なのですが、del2(またはdel3)ボタン押下時、その行に何もデータが存在しない場合は、何かしら警告メッセージを表示できるとありがたいです。


【動作確認方法】
下記の3つのファイルをドキュメントルート直下にtestフォルダを設置し、ブラウザからindex.phpにアクセスしてください。
その後、任意の名前とメールアドレスを入力し、add2ボタンを押下するとサブ入力画面に遷移するため、そこでcopyボタンの動作を試すことができます。

また、del2ボタンの動作は、サブ入力画面で任意の名前とメールアドレスを入力後、saveボタンを押下すると入力画面に遷移するため、そこでdel2(del3)ボタンの動作を試すことができます。


【ソースコード】
1. index.php
<?php

mb_internal_encoding('UTF-8');

$document_root = $_SERVER['DOCUMENT_ROOT'];

$list=array(
"mode"
, "submit"

, "name"
, "name1"
, "name2"
, "name3"
, "mail"
, "mail1"
, "mail2"
, "mail3"
);

foreach($_POST as $key=>$value){
if (in_array($key, $list)) {
$$key=strip_tags($value);
}
}

if($mode=="input") {
if($submit == "add2") {
$name1 = $name2;
$mail1 = $mail2;
require_once($document_root . "/test/sub_input.html");
} elseif($submit == "add3") {
$name1 = $name3;
$mail1 = $mail3;
require_once($document_root . "/test/sub_input.html");
} elseif($submit == "del2") {
$name2 = $name3;
$mail2 = $mail3;
$name3 = "";
$mail3 = "";
require_once($document_root . "/test/input.html");
} else {
$name3 = "";
$mail3 = "";
require_once($document_root . "/test/input.html");
}
} else if($mode=="sub_input") {
if($submit == "copy") {
$name1 = $name;
$mail1 = $mail;
require_once($document_root . "/test/sub_input.html");
} else {
if($name2 == "") {
$name2 = $name1;
$mail2 = $mail1;
require_once($document_root . "/test/input.html");
} else {
$name3 = $name1;
$mail3 = $mail1;
require_once($document_root . "/test/input.html");
}
}
} else {
require_once($document_root . "/test/input.html");
}
?>


2. input.html
<form action="./index.php" method="post">
<table width="100%">
<tr>
<td>名前</td>
<td><input type="text" name="name" id="name" value="<?php echo $name ?>" /></td>
<td>&nbsp;</td>
</tr>
<tr>
<td>メールアドレス</td>
<td><input type="text" name="mail" id="mail" value="<?php echo $mail ?>" /></td>
<td>&nbsp;</td>
</tr>
<tr>
<td>2nd</td>
<td><?php echo $name2; ?><input type="hidden" name="name2" value="<?php echo $name2; ?>" /><input type="hidden" name="mail2" value="<?php echo $mail2; ?>" /></td>
<td><input type="submit" name="submit" value="add2" />
<input type="submit" name="submit" value="del2" /></td>
</tr>
<tr>
<td>3rd</td>
<td><?php echo $name3; ?><input type="hidden" name="name3" value="<?php echo $name3; ?>" /><input type="hidden" name="mail3" value="<?php echo $mail3; ?>" /></td>
<td><input type="submit" name="submit" value="add3" />
<input type="submit" name="submit" value="del3" /></td>
</tr>
</table>
<input type="hidden" name="mode" value="input" />
</form>


3. sub_input.html
<form action="./index.php" method="post">
<input type="submit" name="submit" value="copy" />
<table width="100%">
<tr>
<td>名前</td>
<td><input type="text" name="name1" id="name1" value="<?php echo $name1 ?>" /></td>
</tr>
<tr>
<td>メールアドレス</td>
<td><input type="text" name="mail1" id="mail1" value="<?php echo $mail1 ?>" /></td>
</tr>
</table>
<input type="submit" name="submit" value="save" />
<input type="hidden" name="mode" value="sub_input" />
<input type="hidden" name="name" id="name" value="<?php echo $name ?>" />
<input type="hidden" name="name2" id="name" value="<?php echo $name2 ?>" />
<input type="hidden" name="name3" id="name" value="<?php echo $name3 ?>" />
<input type="hidden" name="mail" id="mail" value="<?php echo $mail ?>" />
<input type="hidden" name="mail2" id="mail" value="<?php echo $mail2 ?>" />
<input type="hidden" name="mail3" id="mail" value="<?php echo $mail3 ?>" />
</form>

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

投稿日時 - 2011-06-25 18:34:19

QNo.6834463

すぐに回答ほしいです

質問者が選んだベストアンサー

つまり、PHPベースのプログラムを、画面遷移しないAJAXにしたいということですよね?
今回のご質問をそのまま受け取ると、「javascriptはまったく分からんから、指定した内容が動くものをそのままくれ」みたいなことになってますよ。今回のご質問をたとえていうなら、WORDの使い方を質問したいのだけれど、ひとまず目の前のレポートを10枚タイピングしてくれる?みたいな感じです。
javascriptはどこまでご存知ですか?
まったくご存じないのであれば、今回の内容をご自身で作業されるのはあきらめた方が懸命です。
ある程度ご存知であれば、まずは基本部分を実装してから、不明な箇所だけをご質問されたほうがよいかと。

投稿日時 - 2011-06-25 19:11:52

お礼

ご回答ありがとうございます。
javascriptではなく、ajaxを使用すれば実現出来るんですね。
ajaxで調べてみます。

このたびはどうもありがとうございました。
以上、よろしくお願いします。

投稿日時 - 2011-06-26 21:54:17

ANo.1

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(1)

あなたにオススメの質問