フォーム表示消失の問題-入力フォームに文字を入れてボタンを押すと結果フォームに表示されない

前へ 次へ
このQ&Aのポイント
  • フォームの表示が消えてしまう問題について質問があります。入力フォームに文字を入力し、ボタンを押すと結果フォームに表示されるという機能がうまく機能していません。具体的な手順として、入力フォームに文字を入力し、ボタンを押すと結果フォームに入力した文字が表示されるはずですが、実際には入力フォームに文字が表示されたままで結果フォームに文字が表示されません。
  • 問題の原因は下記の記述にあると考えられます。ボタンを押すと実行されるcalcButton()関数内で、入力フォームの値を取得して結果フォームに表示する処理が行われています。しかし、この処理は正常に行われていないようです。なぜなら、ボタンを押した瞬間にすべてのフォームの文字表示が消える現象が発生しているからです。
  • 原因として考えられるのは、関数内の処理にバグやエラーがある可能性です。具体的なエラーを特定するために、JavaScriptのデバッグツールを使用することをおすすめします。また、他の要因としてHTMLの形式や要素の設定に誤りがある可能性も考えられます。HTMLのコードを確認し、正しい形式であることを確認してください。
回答を見る
  • ベストアンサー

フォームの表示が消えてしまう・・・

初歩的なことでつまづいております。 フォームを利用して「入力」フォームに文字を入れ、「入力！」ボタンを押すと「結果」フォームにその文字を表示させたいのですがうまくいきません。 やりたいことは、 １．「入力」フォームに文字を入れます（たとえば"123"） ２．「入力！」ボタンを押します ３．すると「結果」フォームに"123"と表示させたいです　 ４．また、「入力」フォームにはそのまま"123"が表示されたままにしたいです なぜか下記の記述だとボタンを押した瞬間にすべてのフォームの文字表示が消えてしまいます。 これはどうしてなのでしょうか？すみませんがよろしくお願いします。 <HTML> <HEAD> <TITLE></TITLE> <SCRIPT LANGUAGE="JavaScript"><!-- function calcButton() { var inputValue = document.calc.input.value; document.calc.result.value = inputValue; } //--></SCRIPT> </HEAD> <BODY> <FORM name="calc" action=""> 入力<INPUT type="text" size="5" name="input"><BR> 結果<INPUT type="text" size="5" name="result"><BR> <INPUT type="submit" value="入力！" onClick="calcButton()"> </FORM> </BODY></HTML>

  • suffre
  • お礼率76% (2013/2633)

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

  • ベストアンサー
  • n5123
  • ベストアンサー率66% (2/3)
回答No.1

おそらく <INPUT type="submit" value="入力！" onClick="calcButton()"> のsubmitが原因だと思います submitをbuttonに変えてみて下さい <INPUT type="button" value="入力！" onClick="calcButton()"> 上の様に変えれば両方とも表示されると思います

suffre
質問者

お礼

ありがとうございます！ 非常に単純なミスだったのですね…。 早朝なのに助かりました。感謝いたしますｍ（＿　＿）ｍ

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

関連するQ&A

  • 計算結果のテキスト表示

    JavaScript計算式で結果を表示したいのですが できません。 テキストBOXには結果を入れれるのですが、 テキストBOXでなく文字として結果を出したいのですが でません。 以下ソースです。　19行目が表示希望箇所です。 <SCRIPT language="javascript"> <!-- function calc() { with(document.f) { syoukei.value = goods1.value * goods2.value * (goods3.value * 0.01) ; syoukei.value = Math.round(syoukei.value) } } // --> </SCRIPT> <FORM name="f"> 縦<INPUT type="text" name="goods1" size="3" onChange="calc();">m * 横<INPUT type="text" name="goods2" size="3" onChange="calc();">m * 厚み<INPUT type="text" name="goods3" size="3" onChange="calc();">cm<BR> 　　　　　　60L　<INPUT type="text" name="syoukei" size="5">袋<BR> <SCRIPT language="javascript"> <!-- document.write(syoukei); } // --> </SCRIPT> </FORM>

  • java 計算フォームで未入力の場合ゼロとしたい

    java を使ってweb上で計算フォームを作成しています フォームに数値が入力された場合は問題なく計算結果に反映できますが、未入力のフォームがあると計算結果が反映されません。 未入力のフォームはゼロの値として計算結果を反映させたいのですが、どうしてもできなかったのでお力をお貸頂ければ助かります＞＜ フォームに最初からゼロの値を入れておく方法もあるのですが、ゼロが消された場合は未入力となってしまい計算結果に反映されないので、あくまで未入力の場合はゼロとして計算結果に反映させたいと思っています。 [script LANGUAGE="JavaScript"] function calc() { var s1, s2, s3, s4, ss; s1 = eval(document.form01.txt01.value); s2 = eval(document.form01.txt02.value); s3 = eval(document.form01.txt03.value); ss = s1+s2 +s3; if(ss < 30000) document.form01.txt04.value = ss*0.3; else if(s5 >= 30000) document.form01.txt04.value = ss*0.5; } [/script] <form name="form01"> <input style= type="TEXT" name="txt01" /> <input style= type="TEXT" name="txt02" /> <input style= type="TEXT" name="txt03" /> <input onclick="calc()" type="button" value="計算する" /> <input style= type="TEXT" name="txt04" /> </form> よろしくお願いします

  • 複数のフォームから送信

    複数のフォームからtextの値を送信したいのですができますか？〒番号を入力して検索ボタンをおすと住所がでてきて最後に登録をしたいです。検索だけのプログラムはできてますがフォームを二つにすると両方のsubmitが登録になります・・・ 一応自分でいろいろためしましたがだめでした。。。 html,php,javascriptです。 二つともだめでした。。。。 rei1.php ------------------------- <html> <body <form method="POST" action="1.php"> お名前：<input type="text" name="name"> <br> <br> <form method="POST" action="yubin.php"> 〒：<input type="text" name="yubin"> <input type="submit" value="検索"> <br> 住所：<input type="text" name="zyu"> <br> </form> メールアドレス：<input type="text" name="email"> <br> <input type="submit" value="登録する"> </form> </body> </html> -------------------------------------- rei2.php -------------------------------------- <html> <head> <script language="javascript"><!-- function send() { document.nform.submit(); document.nform2.submit(); document.nform3.submit(); } //--></script> </head> <body> <form name="nform" method="POST" action="1.php"> お名前：<input type="text" name="name"> <br> </form> <form name="nform2" method="POST" action="yubin.php"> 〒：<input type="text" name="yubin"> <input type="submit" value="検索"> <br> 住所：<input type="text" name="zyu"> <br> </form> <form name="nform3" method="POST" action="1.php"> メールアドレス：<input type="text" name="email"> <br> <input type="submit" value="登録する"> </form> </body> </html> ------------------------------------

  • Webフォームについて

    OCNの無料ホームページサービスで、Webフォームを作成しました。 （団体への加入申込みフォームです） 下記のフォームで、未入力欄がある場合、 　　・未入力を再度促す画面に戻るには？ 　　・入力した内容を確認して送信するには？ 　　・送信が終わって「ありがとうございました」旨を知らせる画面を表示するには？ 　　　　（OCNサービスに標準仕様でも送信thank you画面があるが、画面を閉じる機能がない） HTMLタグが判らないので、ご教授をお願いします。 <html> <head> <title> サンプルフォーム　</title> </head> <b>△○○△会加入フォーム</b></p> <FORM METHOD="post" ACTION="/cgi-bin/formmail.pl"> <INPUT TYPE="hidden" NAME="recipient" VALUE="△△@○○.ocn.ne.jp"> <INPUT type="hidden" NAME="subject" value="登録" /><BR> あなたのE-mail<BR> <INPUT TYPE="TEXT" NAME="email"><br> あなたの氏名<BR> <INPUT TYPE="TEXT" NAME="氏名"><br> 住所<BR> <INPUT TYPE="TEXT" NAME="住所" /><br> コメント<BR> <INPUT TYPE="TEXT" NAME="コメント"><br> <INPUT TYPE="submit" ACTION="/cgi-bin/formmail.pl" VALUE="送信" METHOD="post"> <INPUT TYPE="reset" VALUE="クリア"><br> </form> </div> </body> </html>

  • ブログフォームが表示されない！

    いつも大変お世話になり誠にありがとうございます。 標記の件。 form.htmlだと表示はされます。 しかし、その後のインプットの表示がされません。 index.phpでOKだったのですが、ソースコードが 表示されるようになってしまいました。 index.phpのソースコードは下記です。 どこが間違っているのでしょうか？ ご回答のほど宜しくお願い申し上げます。 <?php if( $mode=='input'){ ?> <h2>ブログフォーム</h2> <form action="blog_create.php" method=_POST> <input type="text" name="address" value="" /> <input type="text" name="name" value="ペンネーム"/> <input type="text" name="title" value="タイトル"/> <input type="text" name="name" value="カテゴリー"/> 　 <textarea name="content" id="content" cols="50" rows="80">ブログ本文</textarea><br> <input type="submit" value="確認画面へ"> </form>

    • ベストアンサー
    • PHP
  • フォームから送信されたメールアドレスの表示ですが・・

    スクリプトでメールフォームを設置したのですが、送信されるメールアドレスが下記のように表示されます。クリックしてすぐに返信したいので、アドレスだけ表示されるようにしたいのですが、どうしたらいいかご存知の方がいらっしゃいましたらよろしくお願いします。 ＜ソース＞ <INPUT TYPE=HIDDEN NAME="題名" VALUE="フォームメール"><INPUT TYPE=HIDDEN NAME="題名" VALUE="フォームメール"> <FORM ENCTYPE="text/plain" METHOD="POST" ACTION="mailto:***@******.com"><INPUT TYPE=HIDDEN NAME="題名" VALUE="フォームメール">■お名前：<BR> <INPUT TYPE=TEXT NAME="名前" SIZE=40><BR> <BR> ■E-Mail：<BR> <INPUT TYPE=TEXT NAME="e-mail" SIZE=40><BR> <BR> ■性別：<BR> <INPUT TYPE=RADIO NAME="性別" VALUE="男" CHECKED>男性　<INPUT TYPE=RADIO NAME="性別" VALUE="女">女性<BR> <BR> ■お問い合わせ内容：<BR> <TEXTAREA name="メッセージ" rows="7" cols="49"></TEXTAREA><BR> <BR> <INPUT TYPE=SUBMIT VALUE="送信する">　<INPUT type="reset" name="クリア"></FORM> このように表記すると、 題名=フォームメール 名前=***** e-mail=*****@*****.com 性別=男性 メッセージ=これはテストです これはテストです これはテストです これはテストです これはテストです これはテストです これはテストです これはテストです となり、「e-mail=*****@*****.com」がアドレスとなってしまいます。 「e-mail=」が表示されないようにするか、表示されても「e-mail=」がアドレスとして認識されないようにしたいのですが・・・よろしくお願いします。

  • フォームのリンクについて

    nyuryoku.php <form method="POST" action="kakunin.php"> <p>　</p> <p><a href="変更フォーム"><img border="0" src="henkou.gif"></a><a href="会社フォーム"><img border="0" src="kaisya.gif"></a></p> <p>変更フォーム</p> <p>名前<input type="text" name="T1" size="20"></p> <p>住所<input type="text" name="T2" size="20"></p> <p>ＴＥＬ<input type="text" name="T3" size="20"></p> 　<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <p>会社フォーム</p> <p>会社名<input type="text" name="T4" size="20"></p> <p>会社住所<input type="text" name="T5" size="20"></p> <p>会社TEL<input type="text" name="T6" size="20"></p> <p>　</p> <p><input type="submit" value="送信" name="B1"><input type="reset" value="リセット" name="B2"></p> </form> <form>から</form>の中に変更フォームと会社フォームがあり henkou.gifをクリックすると画面上に変更フォームが現れて、kaisya.gifをクリックすると会社フォームが表れるようにしたいのです。 そして入力された情報は<input type="submit" value="送信" name="B1">で一度に送信できるようにしたいのですが、 henkou.gifとkaisya.gifにどういう風にリンクをはり各フォームだけを表示するにはどうしたらいいでしょうか？

    • ベストアンサー
    • PHP
  • フォームに表示される文字をセンタリングさせたい。

    Javascriptの初心者です。宜しくお願いします。 テキストエリアが2つあったとします。 1のテキストエリアにある値を入力してボタンを押すと、 2のテキストエリアに1で入力した値をそのまま表示させ、 尚且つ表示された値をフォーム内でセンタリングさせたいのですが どうすればよいのかわかりません・・・。 ご存知の方がいらっしゃいましたら教えて下さい。 どうぞ宜しくお願い致します。 <html> <head> <script language="JavaScript"> <!-- function my1() { a=document.form1.text1.value; document.form1.text2.value=a; } //--> </script> </head> <body> <form name="form1"> <input type="texterea" name="text1"> <input type="texterea" name="text2"> <input type="button" value="CLICK!" onClick="my1()"> </form> </body> </html>

  • フォームに入力された値を計算する方法

    私はまったくの初心者なのですがどなたか教えて下さい。 ●Ａ，Ｂ，Ｃという3つの入力フォームがあるとします。 Ａのフォームに入力された数字は「Ａ÷20」という値に、 Ｂのフォームに入力された数字はそのまま、 Ｃのフォームに入力された数字は「Ｃ×10」という値に変更して、 (Ａ+Ｃ)÷Ｂ×30という計算を行なって、その答えを Ｄのフォームへ表示するというシステムをcgiやphpで作りたいのです。 あれこれと試行錯誤しながら、javascriptでなんとか出来たんですが… どなたか教えて頂けませんか？ function keiri() { a = document.takeko.case.value; a = eval(a); a = a / 20 b = document.takeko.time.value; b = eval(b); c = document.takeko.days.value; c = eval(c); c = c * 10 ans = (a + c) / c * 30; document.spec.result.value = ans; } <form name="takeko"> <input name="case" type="text" size="12"> <input name="time" type="text" size="12"> <input name="days" type="text" size="12"> <input name="button" type="button" onClick="keiri()" value="CLICK"> <input name="result" type="text" size="12"> <br></form>

    • 締切済み
    • PHP
  • フォームボタンをリンク風に表示

    <form action="mailto:"> <input type="hidden" name="subject" value="{subject}"> <input type="hidden" name="body" value="{body}"> <input type="submit" value="メール送信"> </form><br> メーラが立ち上がると、ディフォルトで件名と本文が入るようにしています。しかし、ブラウザー上でフォームの「ボタン」表示ではなく、「リンク」のような表示にしたいのですが何か方法はあるのでしょうか？ <a href="mailto:"> これだと、ディフォルトでの表示ができなくなるし。

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する