Ajaxを利用してテキストエリアの内容を保存する方法と注意点

前へ 次へ
このQ&Aのポイント
  • HTMLからテキストエリアの内容をAjaxを使ってRubyに送信し、ファイルに保存する方法について解説します。
  • テキストエリアに『;(セミコロン)』が入っていると、送信時にエラーが発生する可能性があります。そのため、注意が必要です。
  • AjaxとRubyのどちらに問題があるのか、具体的な原因を特定するために、詳細なエラーメッセージをチェックしましょう。
回答を見る
  • ベストアンサー

Ajaxを利用してテキストエリアの内容を保存

【プログラム概要】 HTMLからテキストエリアの内容(プログラムのコード)をAjaxを使ってRubyに送り、ファイルに書き出します。 【質問】 テキストエリアに『;(セミコロン)』が入っていると、そこから先の文章がcgiに送れません。 HTML上でalert()表示する分には『;』以降も書き出せているため、HTMLからcgiに送る段階で『;』を終了の合図と見なしてしまっているようです。よろしければご教授願います。 Ajax、Rubyどちらのエラーなのか解っていないので、カテゴリー違いだったら申し訳ありません。 以下、ソース(一部)です。 //HTML <FORM name="myFORM"> <TEXTAREA name="texta" rows="7" cols="80" wrap="off" id="myTEXT"> </TEXTAREA> //Javascript <script language="JavaScript"><!-- function onLoad(){ Event.observe($("sub"),"click",iv05,false); function iv05(){ var y = $("myTEXT").value; var url="cgi/form.cgi?myTEXT=" + y; new Ajax.Request(url, { method:"get", onComplete:onComplete2 } ); } //ruby(cgi) #!/ruby/bin/ruby require 'cgi' require "fileutils" cgi = CGI.new str = cgi["myTEXT"] begin sample = open("../test.txt","w+") sample.puts str sample.close end

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

  • ベストアンサー
回答No.1

一応当方の環境 Minefield/Gecko + Ruby 1.9.0 Build 20060415 で再現した。 ==========Q3843847-1.rb============== #!C:\Environment\Ruby\v1.9.0\bin\ruby.exe require "cgi" require "fileutils" begin cgi = CGI.new; str = cgi["myTEXT"]; sample = open("./Q3483847-1.txt","w+"); sample.puts str; sample.close; end =============Q3843847-1.html============== <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> <head> <title>Q3483847 TestCase 1</title> <script type="text/javascript" src="lib/prototype/v1.5.11/prototype.js"></script> <script type="text/javascript"> function onLoad(){ /* 個人的な都合で発動条件違うけど気にするな。(textareaからフォーカスが外れたとき) */ Event.observe($("myTEXT"),"change",iv05,false); } function iv05(){ var y = $("myTEXT").value; var url="Q3483847-1.rb?myTEXT=" + encodeURIComponent(y) ; /* 【ここが重要。】*/ new Ajax.Request(url, { method:"get", onComplete:onComplete2 } ); } function onComplete2(){ } </script> </head> <body onload="onLoad();"> <p><textarea rows="7" cols="80" wrap="off" id="myTEXT" ></textarea></p> </body> </html> その他,同ディレクトリに ファイルとして Q3483847-1.txt lib/prototype/v1.5.11フォルダに prototype.jsを配置している。

tomoiq
質問者

お礼

お返事有難うございます。 また、お礼が遅くなって申し訳ありません。 本日、教えて頂いた事を試してみたところ無事出力されました。 prototype.jsにはお世話になっていますが、まさか"URLエンコードして返す"なんてメソッドがあったとは...。 完全に私の勉強不足でした。 機械がありましたら、また宜しくお願いいたします。有難うございました。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • ボタンをクリックするとテキストエリアに文字が表示される。

    はじめまして 下記内容のJavaScriptを見つけたのですが これをどうにか違うものにしたいのです。 <html> <head> <TITLE>テキストエリアに複数項表示する</TITLE> <script language="JavaScript"><!-- function setChars() { str1="テキストエリアに"; str2="複数項にわたる文字を"; str3="表示します。"; document.myFORM.myTEXT.value=str1+"\n"+str2+"\n"+str3; } /--></script> </head> <body> <form name="myFORM"> <textarea name="myTEXT"rows="10"></textarea><br> <input type="button"value="複数行表示"onClick="setChars()"> </form> </body> </html> ------------------------------------------------ 例えば （月・火・水・木）とそれぞれのボタンがあるとします。 そのボタンを押すと、複数行テキストへ 月曜→○○○○ 火曜→○○○○ 水曜→○○○○ 木曜→○○○○ というように、表示させたいのです。 また、複数行テキストに入力された文字が消えず改行されて表示させたいのです。 自分でもいろいろと試してみたのですが、頭が悪く、全く思ったようにできません。 お忙しいところ大変申し訳ありませんが、 上記に記載した内容のスクリプトはありますでしょうか。 ご返答いただけると幸いです。

  • Ajaxのエンコードで

    私はshift_JISで作成したCGIのページがあるのですが、 Ajaxを導入しようとしたときに、Ajaxというか Javascriptでは、utf-8しか認識しないととあるサイトに書いてあったのですが、 そのCGIのページをphpに変更するにはものすごく多大な時間が 必要になってしまうんですが、CGIをutf-8仕様にするのも大変です AjaxでShift_JISに変換するような事はできませんでしょうか？ http://javascriptist.net/ref_prototype/ajax.periodicalupdater.html のサイトに乗っている <script type="text/javascript" src="/js/prototype.js"></script> <script type="text/javascript"> var myajax; function execute() { myajax = new Ajax.PeriodicalUpdater( "container", "./member.cgi", { "method": "get", "parameters": "id=$id", frequency: 5, // 5秒ごとに実行 onSuccess: function(request) { // 成功時の処理を記述 // alert('成功しました'); // jsonの値を処理する場合↓↓ // var json; // eval("json="+request.responseText); // ↓IEでもキャッシュを読み込まずに毎回リモート接続を実行するためのコード(パラメータの書き換え) var str = myajax.options.parameters; var hash = str.parseQuery(); hash["ajax_request_id"] = Math.random(); hash = $H(hash); myajax.options.parameters = hash.toQueryString(); }, onComplete: function(request) { // 完了時の処理を記述 // alert('読み込みが完了しました'); // jsonの値を処理する場合↓↓ // var json; // eval("json="+request.responseText); }, onFailure: function(request) { alert('読み込みに失敗しました'); }, onException: function (request) { alert('読み込み中にエラーが発生しました'); } } ); } </script> を使用して自動更新をしようと思っているのですが

  • Ajax　テキストエリアについて

    作ったテキストエリアにXmlHttpObjを出力したいのですがどのようにすればいいでしょうか？ テキストエリアは <textarea id="text" style="width:100%; height:300px;"disabled></textarea><br> というように作りました。 XmlHttpObjは var xmlhttp; function httpHandler(){ if(xmlhttp.readyState == 4 && xmlhttp.status == 200){ alert(xmlhttp.responseText); } } function onButtonclick(){ xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); xmlhttp.onreadystatechange = httpHandler; xmlhttp.open("GET", "data.txt"); xmlhttp.send(null); } このようにしました。(仮で出力をアラート形式にしております。) 回答よろしくお願いします。

    • ベストアンサー
    • AJAX
  • テキストエリアの制限字数以上の文字を消したい

    いつもお世話になっております。 現在、JavaScriput勉強中の初心者です。 テキストエリアにJavaScriptでmaxlength機能を付け制限字数を超えると警告ダイアログを出す ようにしたのですがコピペで制限字数を２文字以上超えるとBackSpaceで１文字消すたびに 警告ダイアログが出るというバグが起きてしまいます。 そこで警告ダイアログのOKボタンを押すと制限字数以上の文字は消すプログラムが組みたい のですがどうすればよいですか？ あと残り入力可能文字カウンタをsetIntervalを使ったものに変更したら警告ダイアログすら表示 されなくなってしまいました・・・よろしくお願いします。 ●変更前 <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <title>文字のカウント</title> 　　<script type="text/javascript"><!-- 　　　　function ShowLength( str ) { 　　　　　　document.getElementById("inputlength").innerHTML = 20 - str.length; 　　　　} 　　　　function check() { 　　　　　　txt = document.myFORM.myTEXT.value; 　　　　　　n = txt.length; 　　　　　　if (n > 20) alert("20文字以内にしてください"); 　　　　} 　　　　// --></script> </head> <body> <form name="myFORM"> <textarea cols="46" rows="5" name="myTEXT" onkeyup="ShowLength(value); check();" onmouseout="ShowLength(value); check();"></textarea><br /> あと<span id="inputlength">20</span>文字入力できます<br /> </form> </body> ●変更後 <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <title>文字のカウント</title> 　　<script type="text/javascript"><!-- 　　　　(function(){ 　　　　　　var intervalId = setInterval(function(){ 　　　　　　　var n = 20 - document.getElementsByName("myTEXT")[0].value.length; 　　　　　　　if(n < 0) n = 0; 　　　　　　　document.getElementById("inputlength").innerHTML = n; 　　　　　　}, 100); 　　　　})(); 　　　　function check() { 　　　　　　txt = document.myFORM.myTEXT.value; 　　　　　　i = txt.length; 　　　　　　if (i > 20) alert("20文字以内にしてください"); 　　　　} 　　　　// --></script> </head> <body> <form name="myFORM"> <textarea cols="46" rows="5" name="myTEXT" onkeyup="ShowLength(value); check();" onmouseout="ShowLength(value); check();"></textarea><br /> あと<span id="inputlength">20</span>文字入力できます<br /> </form> </body>

  • テキストエリア文字制限について

    テキストエリア文字制限について 失礼します。 javascript初心者です。 複数のテキストエリアの文字制限を行いたく 苦戦しております。 いろいろと検索してみましたが・・・ 2日ほど悩んでおります。 AとBでエラーが出た場合はCGIに流れず入力フォームに戻るのですが Bでエラーが発生しない場合CGIに流れてしまいます。 ですの文字数制限をしても結局CGIに流れてしまうのですが どのように記述すればよろしいでしょうか？？ なんとか・・・ご教授いただければ幸いです。 よろしくお願いいたします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>入力文字数の制限</title> <script language="javascript" type="text/javascript"> <!-- var MAXLENGTH = 10; //入力許容最大文字数 function tareachk(frm){ var tmp = frm.vin1.value; var len = tmp.length; if(len > MAXLENGTH){alert("A入力可能な文字数は"+MAXLENGTH+"文字までです");} var tmp = frm.vin2.value; var len = tmp.length; if(len > MAXLENGTH){alert("B入力可能な文字数は"+MAXLENGTH+"文字までです");} else{frm.submit();} } // --> </script> </head> <body> <form action="ccccc.cgi" method="post"> <textarea name="vin1" rows="5" cols="30">10文字まで入力可能</textarea><br> <textarea name="vin2" rows="5" cols="30">10文字まで入力可能</textarea><br> <input type="button" value="GO" onclick="tareachk(this.form);"> </form> </body> </html>

  • テキストエリア内で改行するには。

    次のスクリプトを実行すると、テキストエリア内に 01234560　と数字が表示されますが、これを 0 1 2 . というように改行も含めてテキストエリアに出力するにはどうすればよいでしょうか。　￥ｎという文字を使用するのでしょうか？ <html> <head> <script language="JavaScript"> <!-- var textA="" function my1() {for (i=0;i<11;i++){textA=textA+new String(i)} document.form1.text1.value=textA;} //--> </script> </head> <body> <form name="form1"> <textarea name="text1" size="10"></textarea> <input type="button" value="CLICK!" onClick="my1();"> </form> </body> </html>

  • テキストエリアでの行数を調べる

    <script language="JavaScript"><!-- function check() { txt = document.myFORM.myTEXT.value; n = txt.match(/\r/g); if (n) len = n.length + 1; else len = 1; alert(len+"行です"); } // --></script> <form name="myFORM"> <textarea rows="3" name="myTEXT"></textarea> <input type="button" value="Check" onClick="check()"> </form> これで調べられると書いてあったのですがページエラーが出てしまいます 『n = txt.match(/\r/g);』の部分 ○UNIXの改行コードは0x0Aの１バイト(正規表現では\n)となります とあったので『n = txt.match(/\n/g);』として試してみたのですがこちらでもページエラーが出てしまいます ○『n = txt.match(/\r/g);』を『n = 2;』などのようにしたら alertはでるのですが『Nan行です』と表示されます サンプル紹介されているサイトでは改行3回だと『4行です』のように表示されるのですが自分でCGIファイルに組み込んでみると表示されません（＞＜） どうしてかお分かりになる方いらっしゃいますでしょうか？

  • DOMによる、テキストエリアの内容の書き換え

    以下コードを記述し、test.htmlで保存しました。 「ボタンがクリックされたとき、テキストエリアボックスの内容が書き換わる」 と言うことを想定し、作成してみました。 ところが、ボタンをクリックしても、テキストエリアが書き換わりません。 elm[0].Valueでは、駄目なのでしょうか。 ボタンをクリックしたとき、関数までは動いていることは確認できたのですが。 (alertで確認済み) ご教授お願いします。 ==========以下内容====== <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>テキストエリア書き直し</title> </head> <body> <h1>テスト</h1> <p>テキストエリアの書き換え</p> <script type="text/javascript"> <!-- function syutoku(){ var elm=document.getElementsByName('textarea1'); elm[0].Value="書き直し"; //alert(elm[0]); } --> </script> <hr> <p>テキストエリアを書き直します。</p> <form name="form1"> <p><input type="button" value="ボタン" onClick="syutoku()"></p> <p><textarea cols="40" rows="4" name="textarea1"> テキスト書き直しエリア</textarea></p> </form> <hr> </body> </html>

  • テキストエリアの選択行番号を返す関数

    下記のようなJavaScriptで、削除ボタンが押されたときにテキストエリアの何行目が 選択されているかを返す関数を作成途中なのですが、残りの部分がわかりません。 どうすれば、実現できるのか教えていただけないでしょうか。 <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>ホームバンキング</title> <script language="javascript"> <!-- document.form1.display.focus(); // テキストエリアにまずフォーカスを与える function select_row(){ // テキストエリアの何行目がクリックされているかを返す関数 var textarea = document.getElementById('display'); // テキストエリアのHTMLエンティティを取得 for(var i=0; i<textarea.length; i++){ if() break; // テキストエリアのi行目が選択されていたら、 } //document.form1.display.select(); // テキストエリアを選択状態にする return i; } //--> </script> </head>

  • テキストエリアについて

    テーブル内にテキストエリアを入れると下に空白(隙間）ができてしまうのですがそれをなくすることはできないでしょうか？ 例 <table border="1"> <tr> <td>あいうえお</td> <td rowspan="3"><form name="TxtArea"><textarea rows="10"></textarea></form</td></tr> <tr><td>かきくけこ</td></tr> <tr><td>さしすせそ</td></tr> </table> ＊<td></td>内に<form></form>が入ってる理由はJavaScriptを使ってテキストエリアに文字を表示させる処理を行っている為です。 この状態でどのようにすれば隙間を消す事ができるでしょうか？ もちろん<td></td>内に<form></form>を入れなければ大丈夫な事はわかっていますが、JavaScriptが正常に動作しないのでできません。 よろしくおねがいします。

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する