JavaScriptでのフォーム送信方法について

このQ&Aのポイント
  • JavaScriptを使用してHTMLフォームの送信ボタンをクリックした際に、フォームが送信されたことを表示する方法について教えてください。
  • HTMLソースコードに組み込んだJavaScriptプログラムを使用して、フォームの送信後に表示するページを設定したいです。
  • 初心者ですので、分かりやすい説明をお願いします。
回答を見る
  • ベストアンサー

ジャバスクリプト

   ご質問させていただきます。 私は、下記のプログラムをHTMLソースの中に組み込みました。 <HTML> <HEAD> <META HTTP-EQUIV="content-type" CONTENT="text/html; CHARSET=shift_jis"> <center> </HEAD> <BODY TEXT="#000000" BACKGROUND="background.jpg"> <FORM NAME="Form1" ACTION="mailto:3d1724@jcom.home.ne.jp/" METHOD="post" ENCTYPE="text/plain" onSubmit="location.href='thankyou.htm'"> <TABLE> <TR> <TD>貴サイトの内容説明</TD> <TD><INPUT TYPE="text" SIZE="90" ID="customer" NAME="customer"></TD> </TR> <TR> <TD>メッセージ</TD> <TD><TEXTAREA NAME="body" ROWS="7" COLS="70"></TEXTAREA> </TD> </TR> </TABLE> <BR><INPUT CLASS="submit" TYPE="submit" VALUE=" 送信 "> <INPUT TYPE="reset" VALUE=" クリア "></FORM> </BODY> </HTML>  このプログラムを利用して、  送信ボタンをクリックした時にフォームが送られたことを示すページを表示させたいのです。ですが、この状態では表示されません。 表示方法を教えていただけないでしょうか。初心者ですので(難しくない説明を)お願いできればと思います。よろしく、お願いします。

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

  • ベストアンサー
  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.1

onSubmit="location.href='thankyou.htm'" の部分を onSubmit="location.href='thankyou.htm';return true;" にしてみる 説明: onSubmitで呼び出した部分は、 return true;をすることで、submitが実行され また、return false;することで、実行がキャンセルされるので、 submit(送信)が実行されるようにするには、return trueしてやる必要がある。

g-sakura
質問者

お礼

ありがとうございました。 どうにか、問題は解決しました。失礼します。

関連するQ&A

  • 初歩的な質問です、長文ですいませんが困っております。

    初めてHP製作で掲示板を作りたいと思い、本(Perl/CGI辞典)を読みながら悪戦苦闘中です。まずは本のスレッド掲示板を作たのですが、なぜか出力されません。PERLのチェックはHPでやって異常ありませんでしたが、なぜか「500Internal Server Error」になってしまいます。まずは出力部分と思い抜粋して見たのですが、これまた出力されません。以下にその部分を貼り付けますので、どなたかお教え願えないでしょうか? #!C:\perl\bin\perl -w print<<HTML_EOF; Content-type:text/html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML LANG="ja"> <HEAD><TITLE>$bbstitle</TITLE> <META HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> </HEAD> <BODY BGCOLOR="${bgcolor}"> <BR> <B>$bbstitle</B><BR> <FORM ACTION="${cginame}" METHOD=POST> <TABLE WIDTH='90%'> <TR> <TD WIDTH=30>名前</TD> <TD><INPUT TYPE="TEXT" NAME="name" SIZE=30 VALUE="$name"></TD> </TR> <TR> <TD>Mail:</TD> <TD><INPUT TYPE="TEXT" NAME="mail" SIZE=30 VALUE="$mail"></TD> </TR> <TR> <TD>URL:</TD> <TD><INPUT TYPE="TEXT" NAME="url" SIZE=60 VALUE="$url"></TD> </TR> <TR> <TD>TITLE:</TD> <TD><INPUT TYPE="TEXT" NAME="title" SIZE=60></TD> </TR> <TR> <TD></TD> <TD><TEXTAREA NAME="comm" COLS=60 ROWS=6></TEXTAREA></TD> </TR> </TABLE> <INPUT TYPE="SUBMIT" VALUE="投稿"> <INPUT TYPE="RESET" VALUE="クリア"></FORM> <BR> </BODY> </HTML> HTML_EOF

    • ベストアンサー
    • CGI
  • PHPでのメールフォームにつてい。下記のソースで送信・受信できますか?

    それから、何処に、送信先のアドレスを入れればいいでしょうか?? <html lang="ja"> <head> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>mail</title> </head> <body> <br> <h3>Mail Form</h3> <!-- error --> <?PHPif ($error) { echo $error; }else{?><!-- form --> <form enctype="multipart/form-data" action="<?PHP echo EXE; ?>" method="post"> <table> <tr> <td>題名</td> <td><input type="text" name="subj" size="34" value="題名"></td> </tr> <tr> <td>アドレス</td> <td><input type="text" name="mail" size="34" value="あなたのアドレス"></td> </tr> <tr> <td>名前</td> <td><input type="text" name="name" size="34" value="ここに名前"</td> </tr> <tr> <td>内容</td> <td> <textarea name="???" cols="50" rows="10" wrap="soft"> ここに内容</textarea> </td> </tr> <tr> <td> File </td><td><input type="file" name="file" size="28"> <input type="submit" value="送信"> </td></tr> </table> <br> </body></html>

    • ベストアンサー
    • PHP
  • Javaサーブレット?がわかりません。

    質問です。 HTMLで作られた画面のテキストボックス(test1)に値を設定し、 ボタンを押下することによってJava(サーブレット?)に値を渡し、 Java側からHTML画面の別のテキストボックスに値を設定するのには どうしたら良いのでしょうか? 画面は <HTML><HEAD> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <TITLE></TITLE> </HEAD><BODY> <FORM name="Form" action="main"> <TR><TD><INPUT type="text" name="test1"> <INPUT type="text" name="test2"> </TD></TR><BR> <TR><TD><INPUT type="submit" value="試験"></TD></TR> </FORM></BODY></HTML> こんな感じです。 Java側のdoGetメソッドで String name = request.getParameter( "test1" ); で取得した値を画面のtest2のテキストボックスに値を設定したいのですが 新しくHTML画面を作成するのではなく、既存の画面のテキストボックスに値をいれることができるのでしょうか? よろしくお願いします

    • ベストアンサー
    • Java
  • メールフォームについて

    この中にどのようなHTMLを書けば自分のPCにメールが届く ようになりますか?よろしくお願いします。 <h2>■MAIL FORM</h2> <div class="text"> <form><table><tr><td width="100" align=right> NAME</td><td align=right><input type="text" name="Name" size="34"></td></tr><tr><td width="100" align=right> MAIL</td><td align=right><input type="text" name="Mail" size="34"></td></tr></table> <TEXTAREA NAME="Comments" ROWS="8" COLS="39" value="comments"></TEXTAREA> <br> <table><tr><td width="100" align=right> </td> </tr><tr> <td width="100" align=right> URL</td><td><input type="text" name="URL" value="http://" size="34"></td></tr><tr><td></td><td align="right"> <INPUT TYPE="reset" VALUE=" Reset "> <INPUT TYPE="submit" VALUE=" Send "></FORM> </td></tr></table><br></div>

    • ベストアンサー
    • HTML
  • ボタンクリックでフォーカス移動

    JavaScript超ビギナーなので方法がよくわかりません。 フォームにテキストボックス(配列)4個あり ボタンを押すたびに未記入のテキストボックスにカーソルを移動したいのですが。どのようにしたらいいでしょうか。 <form name="form1" method="post"> <table width="200" border="1"> <tr><td ><input type="submit" name="Submit" value="送信"></td></tr> <tr><td ><input type="text" name="name1"></td></tr> <tr><td><input type="text" name="name1"></td></tr> <tr><td><input type="text" name="name1"></td></tr> <tr><td><input type="text" name="name1"></td></tr> </table> </form>

  • フォームで確認画面を表示させるにはどうすればいいのでしょうか?

    質問をご覧下さりありがとうございます。 <form action="18add.php" method="POST" name="form1"> <table> <tr> <th>番号(半角数字)</th> <td><input type="text" name="number" value=""></td> </tr> <tr> <th>名前</th> <td><input type="text" name="name" value=""></td> </tr> <tr> <td><input type="hidden" name="mode" value="add"></td> <td><input type="submit" name="submit" value="追加"></td> </tr> </table> </form> htmlでこんなフォームを作り、phpで $table_body = ""; if( isset( $_POST['mode'] ) ){ $mode = $_POST['mode']; $number = $_POST['number']; $name =$_POST['name']; } else{ $mode = ""; $number = ""; $name = ""; } if( $mode == "add" ){ $table_body .= "<tr>"; $table_body .= "<td>"; $table_body .= $number; $table_body .= "</td>"; $table_body .= "<td>"; $table_body .= mb_convert_encoding( $name, "SJIS", "EUC-JP" ); $table_body .= "</td>"; $table_body .= "</tr>"; } で一度入力された情報を確認する画面を作りたいのですが うまくいきません。 初心者なのでわかりやすく説明をつけてくださると大変助かります。

    • 締切済み
    • PHP
  • form要素とtable要素

    元はこちらです。 http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1483846324 <table> <tr><td><input form="form1" type="text" value="text1"></td></tr> <tr><td><input form="form1" type="submit" value="submit1"></td></tr> <tr><td><input form="form2" type="text" value="text2"></td></tr> <tr><td><input form="form2" type="submit" value="submit2"></td></tr> </table> <form id="form1" action="cgi1.cgi" method="POST"></form> <form id="form2" action="cgi2.cgi" method="POST"></form> 上記はHTML5の仕様に従って書いていますが、これを、HTML4.01の仕様に反さないように書くと、どの様にすればいいのでしょうか。 添付画像は、実際のテーブルの様子です。

    • ベストアンサー
    • HTML
  • HTMLの表示内容にfor文を使用したい

    現在Perlで予約画面を作成しています。 ソースは↓のような感じです。 ============================== #! c:/perl/bin/perl #DBより取得 @type = (); @type=('シングル','ツイン'); &display; #------------------------------------------------- sub display { print "Content-type: text/html\n\n"; print <<EOM; <html> <head> <META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=Shift_JIS"> <title></title> </head> <body> <form> <table border="0"> <tr> <td>タイプ</td> ##Loop Start <td><input type="checkbox" name="kotsu" value="1"></td> <td>$type[0]</td> <td><input type="checkbox" name="kotsu" value="2"></td> <td>$type[1]</td> ##Loop End </tr> <tr> <td>お名前</td> <td colspan="4"><input type="text" size="28" name="name">(全角文字)</td> </tr> <tr> <td><input type="submit" id="submit" value=" 送 信 ">   <input type ="reset" value="リセット"></td> </tr> </table> </form> </body> </html> EOM exit; } ============================== HTMLのLoopと記述している部分にDBより取得した値をfor文で記述したいのですが、うまくいきません。 HTML内にPerlの処理を組み込むには、どうすればいいのでしょうか?

    • ベストアンサー
    • Perl
  • JSPで個人データを入力、出力

    <html> <head><title>Costomer</head></title> <body bgcolor="white"> <div align="center"> <%@ include file="header.html"%> <form method="POST"action="customer.jsp"> <TABLE> <TR> <TD>Name</TD> <TD><input type="text" name="name"></TD> </TR><br> <TR> <TD>Mail Address</TD> <TD><input type="text" name="mail address"></TD> </TR><br> <TR> <TD>TEL No</TD> <TD><input type="text" name="tel no"></TD> </TR><br> </TABLE> <br> <input type="submit"value="Submit"> <input type="reset"value="Cancel"> </form> <jsp:include page="post-response.jsp" flush ="true" /> <%@ include file="copyright.html"%> </div> </body> </html> …………………………………………………………………………………… <html> <head><title>Post-Response</head></title> <body bgcolor="white"> <div align="center"> <TABLE BORDER="1"> <TR> <TD>Name</TD> <TD></TD> </TR><br> <TR> <TD>Mail Address</TD> <TD></TD> </TR><br> <TR> <TD>TEL No</TD> <TD></TD> </TR><br> </TABLE> <form method="GET"action="customer.jsp"> <input type="reset"value="Clear"> <br> </form> </div> </body> </html> …………………………………………………………………………………… 上のcustomer.jspにName,Mail Adress,Tel no,を入力し、打ち込んだものを下のpost-response.jspに出力したいのですがどのように出力したらよいのかわかりません!何度やってもエラーが出てしまいます。 教えてください!!お願いします! ・上のcustomer.jsp内の<%@ include file="header.html"%>と<%@ include file="copyright.html"%>無視してください!

  • Servletへフォームから配列を送信できますか?

    PHPでは、下記のようにHTMLを記述することで、 フォーム内容を配列で送信及び取得できるのですが、 Servletで同じ事をするにはどうすれば良いでしょうか? <HTML><title>一括更新</title><BODY> <form action=./test.php method=post> <table> <tr><td> <input type=input name=a[0] value="1"> <input type=input name=b[0] value="2"> </td></tr> <tr><td> <input type=input name=a[1] value="1"> <input type=input name=b[1] value="2"> </td></tr> </table> <input type="submit" value="更新"> </form></BODY></HTML>

専門家に質問してみよう