JavaScriptの計算結果をフォームのvalueに表示し、送信できるようにする方法

このQ&Aのポイント
  • JavaScriptの計算結果をフォームのvalue属性に表示して、送信できるようにする方法を教えてください。
  • フォームから入力した数値同士の足し算の結果を、HTMLファイル内の指定した位置に表示し、送信できるようにしたいです。
  • フォームから入力した数値をJavaScriptで計算し、その結果をフォームのvalue属性に表示して、送信する方法を教えてください。
回答を見る
  • ベストアンサー

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="" の中に計算結果が入るか教えてください。 宜しくお願い致します。

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

  • ベストアンサー
  • yuu_x
  • ベストアンサー率52% (106/202)
回答No.2
tajix14
質問者

お礼

有難うございます。 出来ました!! 感謝です。

関連するQ&A

  • AJAXの計算式の中にIF文を入れて表示したい

    下記の2つのファイルで、フォームから入力した数値同士の「足し算の結果」をAJAXで表示できます。 ******************************************** 【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; } ************************************************ 【質問】 このjavascriptを改造し、入力した数値についての「足し算の結果」が正の数だった場合には「正の数」、負の数だった場合は「負の数」と表示すべく改造しております。下記の改造を施したのですが、うまく表示されません。 下記の文のどこが誤りか修正頂けませんでしょうか? 宜しくお願い致します。 【JAVASCRIPT(culc2.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 = "(if((sum > 0) { document.write("正の数"); } else((sum <= 0) { document.write("負の数"); } ))"; } message.innerHTML = textMessage; }

    • ベストアンサー
    • AJAX
  • javascriptの計算結果をweb上に表示

    WEB上で入力した数値から複数の計算をさせ、それをフォームからcgiに送るjavascriprを組みたいと思っています。 【現在保有のスクリプト】 下記のスクリプト1では、text1 text2 欄に数値を入力した後、「計算」ボタンを押し、送信ボタンを押すと、計算結果をcgiに送ることが可能です。 (下記の場合は、「入力数値の和」と「積」の2つの数値の送信する) 【やりたいこと】 text1 text2 欄に数値を入力した後、「計算」ボタンを押したあとに、「和と積がブラウザ上に表示され、確認した後に「送信ボタン」を押せるようにしたい。 ということで、修正したのがスクリプト2です。 【質問事項】 スクリプト2では、スクリプト1をベースに javascript上に msg.innerHTML = msg; msg2.innerHTML = msg2; を加え、 HTML上に <p id="msg"></p> <p id="msg2"></p> を加えていますが、これでは動きません。 上記に加え function readText() { var text1 = document.getElementById(""); などのパーツを入力する必要があるはずだと思うのですが、いろいろな場所に試行錯誤しておりますが、うまくいきません。 ご教示いただきたくお願いいたします。 【スクリプト1】************************************************ <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>test</title> <script type="text/javascript"> <!-- //@cc_on document./*@if(1) attachEvent( 'on' + @else@*/ addEventListener( /*@end@*/ 'click', function( evt ) { var t = evt./*@if(1) srcElement @else@*/ target /*@end@*/ var v1, v2, msg, sum, msg2, sum2; if( t.type == 'button' && t.name == 'calc' && t.form.id == 'form2' ) { v1 = t.form.elements['text1'].value; v2 = t.form.elements['text2'].value; if ( isNaN( v1 ) || v1 == '' || isNaN( v2 ) || v2 == '' ) { msg = '数字以外の文字が入ってます'; } else { sum = parseFloat( v1 ) * parseFloat( v2 ); msg = '積は、' + sum + 'です'; sum2 = parseFloat( v1 ) + parseFloat( v2 ); msg2 = '和は、' + sum2 + 'です'; } t.form.elements['plus'].value = msg; t.form.elements['plus2'].value = msg2; } }, false ); //--> </script> </head> <body> <form action="form30.cgi" method="post" name="form2" id="form2"> <fieldset> <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="計算" name="calc" /> <br> <input type="hidden" name="plus" value=""> <input type="hidden" name="plus2" value=""> <input type="submit" value="送信" /> </fieldset> </form> </body> </html> **************************************************************** 【スクリプト2】上記を改造しweb上で計算結果を表示させたい******** <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>test</title> <script type="text/javascript"> <!-- //@cc_on document./*@if(1) attachEvent( 'on' + @else@*/ addEventListener( /*@end@*/ 'click', function( evt ) { var t = evt./*@if(1) srcElement @else@*/ target /*@end@*/ var v1, v2, msg, sum, msg2, sum2; if( t.type == 'button' && t.name == 'calc' && t.form.id == 'form2' ) { v1 = t.form.elements['text1'].value; v2 = t.form.elements['text2'].value; if ( isNaN( v1 ) || v1 == '' || isNaN( v2 ) || v2 == '' ) { msg = '数字以外の文字が入ってます'; } else { sum = parseFloat( v1 ) * parseFloat( v2 ); msg = '積は、' + sum + 'です'; sum2 = parseFloat( v1 ) + parseFloat( v2 ); msg2 = '和は、' + sum2 + 'です'; } t.form.elements['plus'].value = msg; t.form.elements['plus2'].value = msg2; msg.innerHTML = msg; msg2.innerHTML = msg2; } }, false ); //--> </script> </head> <body> <form action="form30.cgi" method="post" name="form2" id="form2"> <fieldset> <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="計算" name="calc" /> <br> <input type="hidden" name="plus" value=""> <input type="hidden" name="plus2" value=""> <p id="msg"></p> <p id="msg2"></p> <input type="submit" value="送信" /> </fieldset> </form> </body> </html> ****************************************************************

  • javascriptで別ファイルで変数を取得する。

    A.htmlで入力した文字をB.htmlに出るようにしたいのですが、全然出ません。 アラートは表示されるのですが、入力欄に何を打っても、 namae と出てしまいます。変数に何も入ってないようです。 これを〔javascript〕って入力すれば、アラートに〔javascript〕って出るようにしたいのですが、どうしたらよろしいでしょうか? 〔A.html〕 <script type="text/javascript"> var val=namae; window.localStorage.setItem("result", val); </script> <form action="B.htm" id="form1" method="post" onsubmit="check()"> <p>名前<br><input type="text" name="namae" id="buttom" size="28" /></p> <input type="submit" value="送信"/> </form> 〔B.html〕 <script type="text/javascript"> var val = window.localStorage.getItem("result"); alert(val); </script>

  • javascript初心者です。

    javascript初心者です。 下記のソースコードで、単純に、マウスホーバーで、テキストの内容を切り替えるものですが、 IE8ですと動作しますが、Firefox3.5だと動作しません。 なにか、原因あるのでしょうか。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>無題ドキュメント</title> <script language="javascript" type="text/javascript"> function formcalc(formobj){ var val_a= formobj.elements["para_a"].value; var val_b= formobj.elements["para_b"].value formobj.elements["answer"].value = val_a * val_b } function chktext(){ var obj = document.getElementById("id1"); obj.innerText="テキスト変更しました。"; } </script> </head> <body> <form> <input size="10" type="text" name="para_a" value="0" />× <input size="10" type="text" name="para_b" value="0" />= <input size="10" type="text" name="answer" /><br /> <input type="button" name="keisan" value="計算" onclick="formcalc(this.form)" /> </form> <br /><br /><br /><br /> <p id="id1" onMouseOver="this.innerText='受付終了'">最初のテキスト</p> </body> </html>

  • javascriptでselectboxのvalueを取得し、特定のv

    javascriptでselectboxのvalueを取得し、特定のvalue値により、「<input type="text" name~>」をブラウザに表示させたいのですが、やり方がわかりません。 javascriptについて素人です。 jQUERYを使用して、phpのようにif文を追加したらいけるのかなと思って下記のようにやってみたのですが、更新しないと変わりませんでした。。 どなたかお力を貸して下さい!どうか宜しくお願い致します! ========================================== <head> <meta http-equiv="Content-Type" content="text/html; charset=euc-jp" /> <meta name="robots" content="noindex,nofollow" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type="text/javascript" src="/admin/js/jquery-1.2.3.js" ></script> <script type="text/javascript"> $(function() { hogehoge = $("#abcdefg").val(); if(hogehoge !== '3'){ $('#hijklmn').hide(); } }); </script> </head> <body> <form method="post" action="/admin/~"> <select id="abcdefg"> <option value="1">aaaaaaaa</option> <option value="2">bbbbbbbb</option> <option value="3">cccccccc</option> </select> <div id="hijklmn"> 上のセレクトボックスが3の場合のみ、下記のフォームを表示させたい <input type="text" value="ああああああああ" /> </div> </form> </body> </html>

  • javascriptの計算フォームでカンマ区切り

    下記のようなjavascriptの計算フォームで計算結果に3ケタのカンマ区切りと小数点第2位までで切り捨てるようにしたいのですがどのようにすればよろしいでしょうか? 「javascript カンマ区切り」で検索したサイトをいろいろ見てみたのですが全然わかりません。 どなたかご教授お願い致します。 <head> <script language="JavaScript" type="text/JavaScript"> <!-- function Multiplication(form){ var test = form.ans.value = eval(form.num1.value)*eval(form.num2.value); return false; } --> </script> </head> <p>A×B×C=合計</p> <div> <form name="multiplication"> <input type="text" size="6" name="num1"> × <input type="text" size="6" name="num2" onBlur="Multiplication(this.form)"> = <input type="text" size="15" name="ans" class="txtbox">円(税別価格) <input type="reset" value="やり直し"> </form> </div> </body> </html>

  • VBSからjavascript

    下記ソースの指定の箇所からjavascriptのfunction fun1(1)をよびたいのですがどう記述したらいいでしょうか。 (ちなみにbody onload=は使わない条件です) <%@ LANGUAGE = VBSCRIPT %> <html> <head> <script type="text/javascript"> <!-- //禁止、許可 function fun1(is){ var is; var i; var jj; jj=document.form1.text2.length; for (i=0;i<jj;i++){ if (is==1) document.form1.text2[i].disabled=true; if (is==2) document.form1.text2[i].disabled=false; } } //--> </script> </head> <html> <body> <form name="form1"> <input type="text" name="text2" size="14" maxlength="8" value="ABC"> <input type="text" name="text2" size="14" maxlength="8" value="DEF"> <% <-------------------ここでfun1(1)をよびたい fun(1)と書いてもエラー >% </form> </body> </html>

  • cgiへのパラメータについて

    htmlのformで入力した名前をcgiで受け取ると"encstr"となります。 エンコードした文字列を受け取るにはどのようにすれば良いか教えてください。 <form name="js"> お名前:<input type="text" name="txtb" value=""><br> <input type="button" value="送信" onclick="gogo()"><br> </form> <script type="text/javascript" language="javascript"> <!-- function gogo() { var str1=document.js.txtb.value; var encstr = encodeURI(str1); document.write('<img src="/cgi-bin/gogo.cgi?namae=encstr">'); } // --> </script>

  • javascriptでフォームの値の計算

    javascript1か月目の初心者です。 7つのテキストフィールドに数値を代入させて合計と平均(最後には標準偏差)を計算しようと思ってます。 以下のように考えましたが、うまくいきません。 strが文字列として?扱われてしまっているようです。 strをevalで囲んでみてもダメです。 詳しい方教えてください。 <!--スクリプト1--> <SCRIPT LANGUAGE="JavaScript"> <!-- function f_check() { if(document.F1.num1.value!=""&&document.F1.num2.value!=""&&document.F1.num3.value!=""&&document.F1.num4.value!=""&&document.F1.num5.value!="" &&document.F1.num6.value!=""&&document.F1.num7.value!=""){ str=0 for(var i = 0;i<document.F1.length;i++){ str+=document.F1[i].value; } alert('合計は'+str+"です"); avrg = (str)/document.F1.length; alert('平均は'+avrg+'です'); //ここから標準偏差の計算(略)。 } // --> </SCRIPT> <form method="post" name="F1" onSubmit="return f_check()"> 数値を入れてください<input type="text" name="num1" size="5"><br> 数値を入れてください<input type="text" name="num2" size="5"><br> 数値を入れてください<input type="text" name="num3" size="5"><br> 数値を入れてください<input type="text" name="num4" size="5"><br> 数値を入れてください<input type="text" name="num5" size="5"><br> 数値を入れてください<input type="text" name="num6" size="5"><br> 数値を入れてください<input type="text" name="num7" size="5"><br> <INPUT TYPE=SUBMIT VALUE="平均をとる"></FORM>

  • 計算結果がおかしい

    計算結果がおかしい <form name="form1"> <h2>消費税計算</h2> <p>本体金額&nbsp;<input type="text" value="0" class="right" name="text4">円</p> <p>消費税率&nbsp;<input type="text" value="0" class="right" name="text5">%</p> <p>税込金額&nbsp;<input type="text" value="0" class="right" name="text6" onFocus="zei()">円</p> </form> htmlで上記のようなテキストフィールドを3つ作成し、それぞれ上から順に [text4~text6]の名前をつけています。 本体金額(text4)と消費税率(text5)に入力された値をもとに、 text6に税込金額を表示するように以下の関数をjavascriptで<head>タグ間に記述しました。 <script type="text/javascript"> <!-- function zei(){ document.form1.text6.value=document.form1.text4.value*(1+document.form1.text5.value/100); } //--> </script> 実際に値を入力してみると、計算結果が正常な場合とそうでない場合があります。 例えば、本体金額のボックスに500、消費税率の欄に10と入力すると、550と表示され 問題はないのですが、本体金額を200に変更すると 「220.00000000000003」と表示されます。 小数点以下を切り捨てれば済む話ですが・・・・・ 計算結果が違っているのが気になります。 これは何故なのでしょう? 原因がおわかりの方がおられましたら、ご教示ください。 どうか宜しくお願いいたします。

専門家に質問してみよう