- ベストアンサー
ページ全体をリロードしないで、textareaに文章追加
宜しくお願いいたします。 今いじっているページについての質問なのですが、既にtextareaに文章が入っていて、それを消さずに違う文章を追加したいのです。文章の追加はボタン（JavaScriptを使っています）で行います。 Ajaxなども調べたのですが難しく良く分からなかったので、ページを開いたときに一番最初に読み込む命令で「textareaに文章を追加するなら、既にあるものを保持しろ」という命令を書きたいと思います。 どなたかご存知であればご教授願います。
- ao-man
- お礼率94% (18/19)
- JavaScript
- 回答数5
- ありがとう数5
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
こういうことでしょうか？ <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>
その他の回答 (4)
- steel_gray
- ベストアンサー率66% (1052/1578)
#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'とかに吐き出して、それを読み込んでもいいと思います。
お礼
ありがとうございます！！ スクリプトでいけました！
- steel_gray
- ベストアンサー率66% (1052/1578)
Ajax関連で有名なところ。サンプルも小改造で使えるかも。 http://www.openspc2.org/JavaScript/Ajax/index.html （小難しい基本をすっとばして「prototype.js」の使い方を憶えるだけでもいいかも…） ただし、Ajaxでは文字コードまわりがやっかいなので日本語を扱うなら注意が必要らしいです。 CGI側が、Javascriptで利用される事を前提に、 最新データを外部Javascriptファイルとして吐き出すようにしていればAjaxに拘る必要もないのかも。（ブラウザのキャッシュ対策は必要だけど。）
お礼
ありがとうございます！！ このサイト、勉強につかってみます！ >最新データを外部Javascriptファイルとして吐き出すようにしていれば これはどういう風にすればいいんですか？？ 初心者で申し訳ありません。
- yambejp
- ベストアンサー率51% (3827/7415)
ああ、なるほど・・・ それでajaxうんぬんという文言が質問のなかにあるのですね・・・。 まぁまさにajaxの世界なので、データをajaxでとってきて、 ボタンに割り振っていくしかないでしょうね。 つきましてはajaxの理解度をあげていくしかないので、 さすがにここでは回答できません。 どこかのサイトで「ajaxとはこういうものか」と理解できるまで ちょっとがんばってみてください
お礼
やはりそうなりますかぁ。。。 わかりました、ありがとうございました。 PS：ajaxについて理解できそうないいサイトがあれば教えてください。
- yambejp
- ベストアンサー率51% (3827/7415)
ではちょっと改造して、こんなかんじで・・・ 複数行にわたる文字列は\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ファイルに記載されていて 外部から呼び込みたい感じなんです。 可能でしょうか？？
補足
すみません、追記です。 そのcgiファイルでは、テキストエリア（MSG）に入れた文章をデータベース（history）に登録し、それを新しい順にソートして取り出し、 取り出したものをボタンにて追加したいのです。 今から一時間以内のデータは全て追記するようにしてあります。 SELECT id, カラム名 FROM history WHERE Exectime > DATE_SUB(NOW(), INTERVAL 1 HOUR) ※cgiファイルに記述
お礼
早速の回答ありがとうございます。 それで、また質問なのですが<textarea id・・・>ってなんでしょう？ 今の設定では フォームの名前：Form1 テキストエリアの名前：MSG ボタンを押して追加するようになっている文章は複数行に渡っている という感じなのですが 同じようにやればできるのでしょうか？？ 宜しくお願いいたします。