テキストエリアに特定の語句を附加したい

このQ&Aのポイント
  • テキストエリアに入力された語と特定の語句を組み合わせてフォーム送信する方法について教えてください。
  • JavaScriptを使用して、テキストエリアに入力された語を取得し、特定の語句と組み合わせて警告メッセージを表示します。
  • さらに、警告メッセージとテキストエリアに入力された語を一つの文字列として組み立て、フォーム送信する方法を教えてください。
回答を見る
  • ベストアンサー

テキストエリアに入力された語に特定の語句を附加したい

「特定の語句+","+テキストエリアに入力された語」をフォーム送信したいと思っています。 (1)テキストエリア1(識別名=NAME1)に入力された語を調べて警告メッセージを発し、(2)この警告メッセージとテキストエリア1に入力された語を、「,」で区切った1つの文字列(識別名=NAME2)としたうえで(3)送信したいと考えています。 そこで、試行錯誤しながら、一応、下のように記述はしてみたのですが、(テキストエリア1に数字を入力した場合を除き)上手く動作しません。 つきましては、恐れ入りますが、どなたか、正しい記述をご教授いただけませんでしょうか。JAVAスクリプト全くの初心者ですが、何卒よろしくお願いいたします。 <head> <script language="JavaScript"><!-- function check() { //(1)条件にマッチしてるか判断 txt = document.myFORM.NAMAE1.value; //テキストエリア1に入力された語をtxtに data=txt.match(/a[^\&\"]*d/im); //txtが条件にマッチしてるか判断 alert1="メッセージ"; if (!data) {alert(alert1); //マッチしていない時は警告メッセージを表示 //(2)警告メッセージとテキストエリア1に入力された語を、とりあえずテキストエリア2に入れようと考えました。 n=0; n=eval(document.myFORM.NAMAE1.value); //とテキストエリア1に入力された語をnに document.myFORM.NAMAE2.value=alert1+","+n+","; //テキストエリア2に警告メッセージとnを入れようとしています //(3)そして、テキストエリア2内の語を送信 document.myFORM.submit(); } } // --></script> </head> <body> <form name="myFORM" method="post" action="**.cgi" > <A onclick="check()"><IMG src="1.gif"></A> <textarea name="NAMAE1"></textarea></td> <textarea name="NAMAE2"></textarea> </form> </body>

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

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

こんな感じですか? <head> <script language="JavaScript"><!-- function check() { //(1)条件にマッチしてるか判断 txt = document.checkForm.NAMAE1.value; //テキストエリア1に入力された語をtxtに data=txt.match(/a[^\&\"]*d/im); //txtが条件にマッチしてるか判断 alert1="メッセージ"; if (!data) {alert(alert1); //マッチしていない時は警告メッセージを表示 n=alert1 + "," + document.checkForm.NAMAE1.value; //文字列をつなげてnへ //(3)そして、送信用フォーム(myFORM)内にnを格納して送信 document.myFORM.NAME1.value=n; document.myFORM.submit(); } } // --></script> </head> <body> <form name="checkForm"> <A onclick="check()"><IMG src="1.gif"></A> <textarea name="NAMAE1"></textarea> </form> <form name="myFORM" method="post" action="***.cgi" > <input type="hidden" name="NAME1"> </form> </body>

oomiyaji
質問者

お礼

ありがとうございました。大変助かりました。やはり、チェック用と送信用の2つのフォームを用意するんですか? 実は自分でも、2つのフォームを使用して実現できないかと試みていたのですが、実際にはどのように記述すればよいのか分からず、全く動作せず途方にくれておりました。実際のスクリプトまで記述していただき、心より感謝しております。本当にありがとうございました。

関連するQ&A

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

    <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の1バイト(正規表現では\n)となります とあったので『n = txt.match(/\n/g);』として試してみたのですがこちらでもページエラーが出てしまいます ○『n = txt.match(/\r/g);』を『n = 2;』などのようにしたら alertはでるのですが『Nan行です』と表示されます サンプル紹介されているサイトでは改行3回だと『4行です』のように表示されるのですが自分でCGIファイルに組み込んでみると表示されません(><) どうしてかお分かりになる方いらっしゃいますでしょうか?

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

    いつもお世話になっております。 現在、JavaScriput勉強中の初心者です。 テキストエリアにJavaScriptでmaxlength機能を付け制限字数を超えると警告ダイアログを出す ようにしたのですがコピペで制限字数を2文字以上超えるとBackSpaceで1文字消すたびに 警告ダイアログが出るというバグが起きてしまいます。 そこで警告ダイアログの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>

  • テキストエリアの入力値からチェックボックスのON・OFF切り替え

    テキストエリアからフォーカスが外れた際、テキストエリアに入力された文字があればチェックボックスをONに、何もない場合はOFFにしたいです。 <HTML> <BODY> <SCRIPT language="javascript"> <!-- function Check(AAA,BBB) { var cTxt; cTxt = "txt" + AAA; item_txt = eval('document.form1.' + cTxt + '.value'); item_txt2 = item_txt.replace(/ /g,""); item_txt2 = item_txt2.replace(/ /g,""); if (!item_txt2){ alert("チェックを外す"); } else { alert("チェックを付ける"); } } //--> </SCRIPT> <FORM name="form1"> <TABLE> <TR> <TD><TEXTAREA name="txt029" rows="2" cols="20" onblur="Check('029','1')"></TEXTAREA></TD> <TD><INPUT type="checkbox" name="chk[]" value="029"></TD> </TR> <TR> <TD><TEXTAREA name="txt121" rows="2" cols="20" onblur="Check('121','2')"></TEXTAREA></TD> <TD><INPUT type="checkbox" name="chk[]" value="121"></TD> </TR> </TABLE> </FORM> </BODY> </HTML> <TR>~</TR>はPHPで書き出しをしており、行数は都度変化します(1行~20行)。 1つの<TR>~</TR>で、TEXTAREAのname下3桁・Checkの1つ目の引数・checkboxのvalueは全て同じ値が入ります(値は変化)。 Checkの2つ目の引数は書き出した順に0から振るようにしています。 この記述だと2つ目の引数は活用できてないのですが…使い道があるかと思って書いてはいるのですが結局わからなくてそのままになってます。 色々考えてはみたのですが、どのように対応するチェックボックスを指定していいのかがわかりません。 是非ご教授いただきたいです。

  • 2つのJavaSを使う場合・・・

    こんにちは、他の質問もさせていただいているのですが、こちらもお願いいたします! 私はホームページに関して素人なのですが、WEBで例文などをコピーしてきて利用させて頂いています。しかし元が素人なのでわからない事が多く・・・ 例えば、 <script language="JavaScript"><!-- function check() { txt = document.myFORM.TEST.value; n = txt.length; if (n > 10) alert("10文字以内にしてください"); } // --></script> </head><body><form name="myFORM"> <textarea rows="3" name="myTEXT" onChange="check()"></textarea> </form></body></html> こういうテキストボックの入力文字を規制するスクリプトと、 <SCRIPT language="JavaScript"> <!-- function Check(){ if(document.myform.TEST.value==""){ alert("コメントを入力してください。"); return false; } return true; } // --></SCRIPT> という未入力だった場合アラートを出すスクリプトを2つ使いたい時はどのように設定すればいいのでしょうか? <SCRIPT language="JavaScript"><!-- の下に両方書きますよね?で、両方とも function check() というのを使うようなのですが・・・。 素人で全くわかりません。やはり勉強しようかと思いますが、とりあえず、上記を ご存知の方、よろしくお願いいたします!

    • ベストアンサー
    • HTML
  • 入力文字のバイト数

    いつも参考にしております。 入力文字のバイト数のカウントについて質問をさせていただきます。 入力フォームなどで、入力文字数の制限をしたいと考えております。 文字を入力するたびに、バイト数がテキストボックスに常に 表示されるようにしたいと考えております。 以下を参考にできるのではないとか思っておりますが。 <script language="javascript"> <!-- function check() {  txt = document.myFORM.myTEXT.value;  n = txt.length;  if (n > 10) alert("10文字以内にしてください"); } --> </script> <form name="myFORM"> <textarea rows="3" name="myTEXT" onChange="check()"></textarea> </form> ご教授お願いいたします。

  • 半角英数字の判別

    お世話になります テキストフィールドにおいて半角英数字のチェックをしたいのですが・・・ 例えば『012ab』のような場合、 <script Language="JavaScript"> <!-- function checkText() { txt = document.myFORM.moto.value; if (txt.match(/[^a-z|^A-Z]/g)) alert("アルファベット以外が含まれてます"); } //--> </script> <form name="myFORM"> <input type="text" name="moto"> <input type="button" value="調べる" onClick="checkText()"> </form> では数字が入力されてるとalertされます function checkNum() { txt = document.myFORM.moto.value; for (i=0; i<txt.length; i++) { c = txt.charAt(i); if ("0123456789".indexOf(c,0) < 0) { alert("数値以外が含まれてます"); return; } } } //--> </script> <form name="myFORM"> <input type="text" name="moto"> <input type="button" value="調べる" onClick="checkNum()"> </form> ではアルファベットがあるとalertされてしまいます この2つをどのように組み合わせれば半角英数字以外であればalertされるようになるのでしょうか?

  • オンマウスでテキストエリアにテキスト表示

    現在、「猫」という文字にカーソルを合わせると text1のテキストエリアに 「ニャンと鳴く」と表示されるスクリプトを作成しました。 記述の一部ですが下に示します。 <form name="form1"> <TEXTAREA name="text1" rows="5" cols="40"></TEXTAREA> </form> <span onmouseover="txt_dsp('text1','ニャンと鳴く');"onmouseout="txt_dsp('text1', '');">猫</span><br> 教えていただきたいのは'ニャンと鳴く'という部分を msg.txtというテキストファイルに書かれた'ニャンと鳴く' で表示したいのですが、どのような記述にしたらよろしいでしょうか? よろしくお願い致します。

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

    はじめまして 下記内容の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> ------------------------------------------------ 例えば (月・火・水・木)とそれぞれのボタンがあるとします。 そのボタンを押すと、複数行テキストへ 月曜→○○○○ 火曜→○○○○ 水曜→○○○○ 木曜→○○○○ というように、表示させたいのです。 また、複数行テキストに入力された文字が消えず改行されて表示させたいのです。 自分でもいろいろと試してみたのですが、頭が悪く、全く思ったようにできません。 お忙しいところ大変申し訳ありませんが、 上記に記載した内容のスクリプトはありますでしょうか。 ご返答いただけると幸いです。

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

    次のスクリプトを実行すると、テキストエリア内に 01234560 と数字が表示されますが、これを 0 1 2 . というように改行も含めてテキストエリアに出力するにはどうすればよいでしょうか。 ¥nという文字を使用するのでしょうか? <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>

  • 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>