フォームのvalueを変更する方法

前へ 次へ
このQ&Aのポイント
  • perlでフォームのvalueを変更する方法を教えてください。
  • perlではjavaScriptのinnerHTMLのような方法でテキストを変更することはできますか？
  • javaScriptが有効でない場合でもフォームのvalueを変更する方法を教えてください。
回答を見る
  • ベストアンサー

フォームのvalueを変更する方法

下記はjavaScriptで書いたものですが、javaScriptが有効になっていないと機能しないので perlで同じことをやりたいのですが、フォームのvalueを変更する方法とinnerHTMLの様なボタンをクリックするとテキストを変更する方法が分かりません。 ヒントでも良いので教えていただけませんか？ <HTML> <HEAD><SCRIPT language="JavaScript"> <!-- function nextA(){ var data = document.formA.data.value; data++; document.formA.data.value = data; } //--> function nextB(){ var data = document.formB.data.value; data++; document.formB.data.value = data; document.getElementById("print").innerHTML = data; } //--> </SCRIPT> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> </HEAD> <BODY> <FORM name="formA"> <input name="data" value="1"> <INPUT type="button" value="足す" onclick="nextA()"> </FORM> <FORM name="formB"> <SPAN id="print">1</SPAN> <INPUT type="button" value="足す" onclick="nextB()"> <INPUT type="hidden" name="data" value="1" > </FORM> </BODY> </HTML>

  • CGI
  • 回答数1
  • ありがとう数1

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

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

こんにちは。 Perlで書いてCGIとして動かしたいという事でしょうか？ スマートじゃない気もしますが一応、こんな感じではどうですか。 ■test.cgi（この下の　#　から　HEOF　までファイルに書く） #!/usr/bin/perl #上はPerlへのパス #初期値 $num1 = 1; $num2 = 1; #リクエスト確認 if ($ENV{'REQUEST_METHOD'} eq "POST") { if ($ENV{'CONTENT_LENGTH'} > 51200) {} read(STDIN, $buffer, $ENV{'CONTENT_LENGTH'}); } elsif ($ENV{'REQUEST_METHOD'} eq "GET") { $buffer = $ENV{'QUERY_STRING'}; } #デコード実行 if ($buffer ne "") { @pairs = split(/&/,$buffer); foreach $pair (@pairs) { ($name, $value) = split(/=/, $pair); $value =~ tr/+/ /; $value =~ s/%([a-fA-F0-9][a-fA-F0-9])/pack("C", hex($1))/eg; $FORM{$name} = $value; } } #インクリメント if ($FORM{'data1'} ne "") {$num1 = $FORM{'data1'};} if ($FORM{'data2'} ne "") {$num2 = $FORM{'data2'};} if ($FORM{'button1'} eq "足す") { $num1 = $FORM{'data1'} + 1; } elsif ($FORM{'button2'} eq "足す") { $num2 = $FORM{'data2'} + 1; } #HTMLを出力 print "Content-type: text/html\n\n"; print <<"HEOF"; <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> </head> <body> <form action="test.cgi" method="post"> <input type="text" name="data1" value="$num1"><input type="submit" name="button1" value="足す"> <br> $num2 <input type="hidden" name="data2" value="$num2"><input type="submit" name="button2" value="足す"> </form> </body> </html> HEOF

meikenpochi
質問者

お礼

GX71さん、回答ありがとうございます。 if ($FORM{'button1'} eq "足す") で条件分岐させるところと<input type="text" name="data1" value="$num1">のnameをバッファとして使ってるところがとっても参考になりました。

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

関連するQ&A

  • フォームボタンのvalueを渡すにはどうしたらいいのでしょうか？

    下記のソースのように「word」というテキストフィールドの 入力チェック後ボタンのvalueをword.phpに渡したいのですがどのようにしたらいいのでしょうか？ 入力チェックをせず input type="button"ではなくinput type="submit" にするとword.phpに渡せるのですが・・・ ようはＡ、Ｂ、Ｃそれぞれのボタンを押した時で word.phpでbtnのvalueをPOSTで受け取り 処理をvalue A、B、Cで分岐させたいんです。 よろしくお願いします。 <html> <head> <SCRIPT language="JavaScript"> <!-- function chk(chkfrm){ var tmp = chkfrm.word.value.length; if(tmp > 50 ){ alert("文字数が多すぎます"); } else{ chkfrm.submit(); } } //--> </SCRIPT> </head> <body> <form name="form" method="post" action="word.php"> <input name="word" type="text" id="word"> <input type="button" name="btn" value="A" onclick="chk(this.form);"> <input type="button" name="btn" value="B" onclick="chk(this.form);"> <input type="button" name="btn" value="C" onclick="chk(this.form);"> </form> </body> </html>

  • 複数フォームのデータ渡しについて

    http://okwave.jp/qa2522271.html で質問したのですが、質問内容が若干変更なりましたので、またご教授頂けたらありがたいです。 現在のコード <script language="JavaScript"> function send(v,fname){ var f=document.forms[fname]; f.botan.value=v; f.submit(); } </script> <form name="Form1" action="tesuto1.php" > <input type="hidden" name="botan"> 中略 </form> <form name="Form2" action="tesuto2.php" > <input type="hidden" name="botan"> 中略 </form> <form name="Form2" action="tesuto3.php" > <input type="hidden" name="botan"> 中略 </form> <form> <input type="button" value="送信" onClick="send(this.value,'Form1')"> <input type="button" value="取消" onClick="send(this.value,'Form2')"> <input type="button" value="確認" onClick="send(this.value,'Form1')"> </form> 前回と違うのは送信ボタンをクリックしたときに、どのボタンがクリックされたのかを判別して（ここは同じです）form1とform3のデータを渡したいのですが。 よろしくお願いします。

  • javascriptのonclickに関数を追加？

    現在、javascriptでinput要素に新しくonclick='hoge()'などの関数を追加したいのですができません。 色々調べたのですが、結局わからなかったので質問させていただきます。 何卒、ご教授宜しくお願いします。 ■やろうとしていること 下記ソースのボタンをどれかクリックしたら、 新しく、<input type="button" value="次へ" onclick="next()" />というのを<span>に 生成したいのですが、onclickが追加されずに困っております。 どのようにしたらよいのでしょうか？ちなみにtypeとvalueは生成されています。 <form name="test"> <input type="button" value="" id="answer_0" onclick="test(0)" /> <input type="button" value="" id="answer_1" onclick="test(1)" /> <input type="button" value="" id="answer_2" onclick="test(2)" /> </form> <span id="test2"></span> <script> function test(n) { ・・・ 中略 var nq = document.createElement('input'); nq.type = "button"; nq.value = '次へ'; nq.onclick = "nexｔ()"; document.getElementById('test2').appendChild(nq); } </script> 以上、宜しくお願い申し上げます。

  • if構文

    初心者でif構文がよくわからず質問させてください。 下記のようなボタンをつくり、 <form action="#"> <input type="button" value="うさぎ" id="txt" onclick="aGetElementById()" /> <input type="button" value="とり" id="txt" onclick=b"GetElementById()" /> </form> ボタンをクリックして、 <div><span id="box"></span>が大好きです。</div> のspanの中にvalue名（うさぎ・とり）を表示させ、『「value名」が大好きです。』と表示させたいのです。 Javascriptを下記のように書いてみたのですが、テキスト表示の切り替えがうまくいきません。 <script> <!-- function aGetElementById(){ var text=document.getElementById("txt"); var box=document.getElementById("box"); box.innerHTML=txt.value; } function bGetElementById(){ var text=document.getElementById("txt"); var box=document.getElementById("box"); box.innerHTML=txt.value; } --> </script> どうかおしえてください。 よろしくお願いします。

  • htmlのobjectタグで埋め込んだページから値を戻す方法（IEの場合）

    オブジェクト埋め込みで別のＷｅｂページを埋め込んでいます。 その埋め込まれたページのフォームに入力された値を、埋め込み元のフォームに値を戻す処理です。 ＩＥ以外（Firefox,Opera,Chrome,Safari）は正常に動きました。 これをＩＥ(IE8)でも正常に動く様にしたいのですが、ＩＥの場合の記述方法を教えていただけないでしょうか。宜しくお願いします。 因みに、これはインラインフレームで処理していたもを、objectタグに書き換える作業です。 ですのでインラインフレームなら可能という回答はなしでお願いします。 ●オブジェクトを埋め込んでいるページのhtml <form method="POST" name="formA"> <input type="text" name="fld1" size="10"> </form> <p> <object ID="bojInline" type="text/html" data="http://hogehoge/oTest.html" width="400" height="300"> <p>objectに対応していないブラウザです</p> </object> </p> ●埋め込まれるhtml（http://hogehoge/oTest.html） <script language="JavaScript"> <!--// function fRtn() { parent.document.formA.fld1.value = document.formB.fldB1.value; ＜＜＜ここの記述がＩＥではエラー } //--> </script> </head> <form method="POST" name="formB"> <input type="text" name="fldB1" size="10" value="初期値"></td> <input type="button" name="btn1" value="値を戻す" onClick="JavaScript:fRtn()"> </form>

  • レイヤー内のフォームの内容を変更するにはどうすれば？

    JavaScriptを使って,テキストボックスに書かれている内容を変更できる様にしたいいのですが,フォームがレイヤー内にあるとうまく出来ません。 こちらがソースです。あくまで例です。ボタンをクリックすると書かれている内容が変わります。 <html> <head> <script lauguage="javascript"> function Form_Write(){ document.form.box.value="Click=true"; } </script> </head> <body> <div id=layer style="position:absolute;left:50px;top:50px;"> <form name="form"> <input type="text" name="box" size=20 value="Click=false"> <input type="button" name="button" value="click" onClick="Form_Write()"> </form> </div> </body> </html> これだとIEではうまく作動するのですが,NNだとうまく動きません。 document.layer.form.box.valueにしてもダメです。 document.layer.form has no propertiesというエラーが出ます。 どうすれば出来るのでしょうか？お助け願います。

  • javascriptの計算結果をvalue=""に

    javascriptの計算結果をフォームの中のvalue=""内部に表示し、送信できるようにしたいというのが質問の趣旨です。 　　　　　　　　　　　　　　　　記 下記の2つのファイルで、フォームから入力した数値同士の「足し算の結果」を表示できます。 （HTMLファイル下段　<p id="message"></p>の部分で表示します。） ******************************************** 【HTML】 <script language="JavaScript" type="text/javascript" src="js/culc.js"></script> <form name="f1"> <input type="text" id="text1" name="text1" size="10" maxlength="10" />+ <input type="text" id="text2" name="text2" size="10" maxlength="10" /> <input type="button" value="足す" onclick="readText()" /> </form> <p id="message"></p> ******************************************* 【JAVASCRIPT(culc.js)】 function readText() { var text1 = document.getElementById("text1"); var text2 = document.getElementById("text2"); var message = document.getElementById("message"); var str_val1 = text1.value; var str_val2 = text2.value; var sum; if (isNaN(str_val1) || str_val1 == "" || isNaN(str_val2) || str_val2 == "") { textMessage = "数値以外の文字が入っています"; } else { //sum = str_val1 + str_val2; sum = parseFloat(str_val1) + parseFloat(str_val2); textMessage = "合計は、" + sum + "です"; } message.innerHTML = textMessage; } ************************************************ 【質問】 次にこのHTMLを改造し、フォームから計算値を送信することとしました。 ************************************************ 【HTML】 <script language="JavaScript" type="text/javascript" src="js/culc.js"></script> <form name="f1"> <input type="text" id="text1" name="text1" size="10" maxlength="10" />+ <input type="text" id="text2" name="text2" size="10" maxlength="10" /> <input type="button" value="足す" onclick="readText()" /> </form> <form action="form.cgi" method="post" name="form2" id="form2"> <input type="hidden" name="plus" value="<p id="message"></p>"> <input type="button" value="送信" onClick="disableButton()" name="button1"> </form> ************************************************ 問題点 上記のように、計算結果を表示出来るはずの<p id="message"></p>を送信フォームのvalue=の直後に記載しただけなのですが、なぜか送れません。 <p id="message"></p>　を独立して記載しているときは計算値をそのまま表示していたのですが、value="<p id="message"></p>">　と　value=　の中に記載した瞬間に単なる文字の羅列になってしまうようです。 value="<p id="message"></p>"> value='<p id="message"></p>'> value="<p id='message'></p>"> value='<p id='message'></p>'> と試してみましたが、いずれもうまきませんでした。 どのようにすれば、value=""　の中に計算結果が入るか教えてください。 宜しくお願い致します。

  • 名無しformの操作

    以下のような、元々名前のないformが複数ある場合にボタンイベントで発生した共通のtest()関数内で処理を行う場合、どのフォームか識別できる方法はあるのでしょうか？ テスト1、をクリックした場合、テスト1のフォームの操作を行いたいです。 <script ....... function test(???) { document.どのフォームかわからない.action="/index.cgi"; document.どのフォームかわからない.a.value="1"; document.どのフォームかわからない.submit(); } </script> <form> <input type="hidden" name="a" value=""> <input type="button" value="テスト1" onclick="javascript:test(???)"> </form> <form> <input type="hidden" name="a" value=""> <input type="button" value="テスト2" onclick="javascript:test(???)"> </form> <form> <input type="hidden" name="a" value=""> <input type="button" value="テスト3" onclick="javascript:test(???)"> </form>

  • javascript 動的フォームの追加、削除について

    JAVASCRIPTを使って、追加ボタンを押したときに、入力フォーム（textbox）を2個、3個と追加させ、入力フォーム横に設置した削除ボタンで削除ボタン横の入力フォームを削除したいと思っております。 1)delInput2()の引数でボタンごとの情報（何番目のボタンか）を渡したい。 どのようなjavascriptを書けばよいか、ご教授願えませんでしょうか。 どうぞよろしくお願い致します。 <script type="text/javascript"> var arInput = 0; var Default = arInput; function addInput() { //追加処理 arInput ++ $("#area").append('<span id=\"group'+arInput+'\"><input type=\"text\" name=\"text'+arInput+'\" value=\"入力項目'+arInput+'\" /><input type=\"button\" onclick=\"delInput2()\" name=\"button'+arInput+'\" value=\"削除'+arInput+'\" /><br></span>\n'); } function delInput() { //削除処理 $("#group"+arInput).remove(); if(arInput > Default){ arInput -- } } function delInput2() { //指定項目削除処理 } </script> <form> <fieldset id="area"> <fieldset> <input type="button" onclick="addInput()" value="一行追加" /> <input type="button" onclick="delInput()" value="一行削除" /> </fieldset> </form>

  • ボタンを動的にdisabledさせたいのですが

    お世話になります。 ある画面に複数ボタンがあって 押されたボタンをdisabledにしたいなと思っています。 ただしどのボタンがおされても同じ関数に飛んでほしいのですが いまいち解決できません。 <form name="form"> <input type="button" name="syori1" value="ボタン1" onClick="javascript:hogehoge()"> <input type="button" name="syori2" value="ボタン2" onClick="javascript:hogehoge()"> <input type="button" name="syori3" value="ボタン3" onClick="javascript:hogehoge()"> </form > とあった場合 function hogehoge(){ document.form.ボタンの名前.disabled=true; } としたいのですが 名前の部分は動的に変えることは可能なのでしょうか？ 普通に document.form.syori1.disabled=true; と書けば簡単なのですが、ボタンの数が決まっていないためボタン名を指定して書くことはできません。 ボタン名は onClick="javascript:hogehoge(document.form.ボタンの名前.name)" で、送ることができるのは確認したのですが hogehoge(ボタンの名前) の方でどうやってdisabledのところに入れればいいか解りません。 よろしくお願い致します。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する