ページ全体をリロードしないで、textareaに文章追加

解決済

質問者：ao-man
質問日時：2007/07/17 13:44
回答数：5件

宜しくお願いいたします。

今いじっているページについての質問なのですが、既にtextareaに文章が入っていて、それを消さずに違う文章を追加したいのです。文章の追加はボタン（JavaScriptを使っています）で行います。

Ajaxなども調べたのですが難しく良く分からなかったので、ページを開いたときに一番最初に読み込む命令で「textareaに文章を追加するなら、既にあるものを保持しろ」という命令を書きたいと思います。

どなたかご存知であればご教授願います。

通報する

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

質問の本文を隠す

回答 (5件)

No.1ベストアンサー

回答者： yambejp
回答日時：2007/07/17 14:04

こういうことでしょうか？

<html>
<head>
<script language="javascript">
function add(val){
var hoge=document.getElementById('hoge');
hoge.value+=val;

}
</script>
</head>
<body>
<form action="" method="get">
<textarea id="hoge" name="hoge">ほげほげぇ・・・</textarea>
<input type="button" value="あああ" onClick="add('あああ')">
<input type="button" value="いいい" onClick="add('いいい')">
<input type="button" value="ううう" onClick="add('ううう')">
<input type="submit" value="go">
</form>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

早速の回答ありがとうございます。

それで、また質問なのですが<textarea id・・・>ってなんでしょう？
今の設定では
フォームの名前：Form1　
テキストエリアの名前：MSG
ボタンを押して追加するようになっている文章は複数行に渡っている
という感じなのですが

同じようにやればできるのでしょうか？？
宜しくお願いいたします。

通報する

お礼日時：2007/07/17 14:58

No.2

回答者： yambejp
回答日時：2007/07/17 15:27

ではちょっと改造して、こんなかんじで・・・

複数行にわたる文字列は\nという改行マークをつかって書いてください

<html>
<head>
<script language="javascript">
function add(val,f){
f.MSG.value+=val;
}
</script>
</head>
<body>
<form action="" method="get">
<textarea name="MSG">ほげほげぇ・・・</textarea>
<input type="button" value="あああ" onClick="add('あああ１行目\nあああ２行目\nあああ３行目',this.form)">
<input type="button" value="いいい" onClick="add('いいい１行目\nいいい２行目\nいいい３行目',this.form)">
<input type="button" value="ううう" onClick="add('ううう１行目\nううう２行目\nううう３行目',this.form)">
<input type="submit" value="go">
</form>
</body>
</html>

この回答への補足

すみません、追記です。
そのcgiファイルでは、テキストエリア（MSG）に入れた文章をデータベース（history）に登録し、それを新しい順にソートして取り出し、
取り出したものをボタンにて追加したいのです。

今から一時間以内のデータは全て追記するようにしてあります。
SELECT id, カラム名 FROM history WHERE Exectime > DATE_SUB(NOW(), INTERVAL 1 HOUR)
※cgiファイルに記述

補足日時：2007/07/17 15:33

通報する

- 0
- 件

通報する

この回答へのお礼

やりたいことはあってます！
でもごめんなさい、私が書き忘れていたんですが
ボタンを押して追加したい文章は他のcgiファイルに記載されていて
外部から呼び込みたい感じなんです。

可能でしょうか？？

通報する

お礼日時：2007/07/17 15:32

No.3

回答者： yambejp
回答日時：2007/07/17 16:03

ああ、なるほど・・・

それでajaxうんぬんという文言が質問のなかにあるのですね・・・。

まぁまさにajaxの世界なので、データをajaxでとってきて、
ボタンに割り振っていくしかないでしょうね。

つきましてはajaxの理解度をあげていくしかないので、
さすがにここでは回答できません。
どこかのサイトで「ajaxとはこういうものか」と理解できるまで
ちょっとがんばってみてください

- 0
- 件

通報する

この回答へのお礼

やはりそうなりますかぁ。。。
わかりました、ありがとうございました。

PS：ajaxについて理解できそうないいサイトがあれば教えてください。

通報する

お礼日時：2007/07/17 16:12

No.4

回答者： steel_gray
回答日時：2007/07/17 17:11

Ajax関連で有名なところ。

サンプルも小改造で使えるかも。
http://www.openspc2.org/JavaScript/Ajax/index.html
（小難しい基本をすっとばして「prototype.js」の使い方を憶えるだけでもいいかも…）
ただし、Ajaxでは文字コードまわりがやっかいなので日本語を扱うなら注意が必要らしいです。

CGI側が、Javascriptで利用される事を前提に、
最新データを外部Javascriptファイルとして吐き出すようにしていればAjaxに拘る必要もないのかも。（ブラウザのキャッシュ対策は必要だけど。）

- 0
- 件

通報する

この回答へのお礼

ありがとうございます！！
このサイト、勉強につかってみます！

>最新データを外部Javascriptファイルとして吐き出すようにしていれば
これはどういう風にすればいいんですか？？
初心者で申し訳ありません。

通報する

お礼日時：2007/07/17 17:23

No.5

回答者： steel_gray
回答日時：2007/07/17 20:17

#4です。

保存したテキストを読み出すCGIスクリプトがhistory.cgiだとして・・・
history.cgiでは結果を次のように返す事にします。（perlの例）
print "Content-Type: application/x-javascript\n\n";
print <<_VAR_; # ここでは例として固定値にしています。
var history1='text1';
var history2='text2';
_VAR_

HTMLから外部javascriptとしてhistory.cgiを読み込みます。
<script type="text/javascript" src="history.cgi"></script>
これで、このページではjavascriptの変数、
history1 と history2　にCGIスクリプトで読み出した値が入っているので
ボタンそのものをjavascriptで書き出すとか、valueを変更するとか、
ボタンを押したときに挿入する値にするとか、好きなように扱えます。

また、保存するスクリプトがログファイル/DBとは別の'history.js'とかに吐き出して、それを読み込んでもいいと思います。