HTMLのJavaScriptが動作しない

前へ 次へ
このQ&Aのポイント
  • JavaScriptが動作せず、PHPへ渡すことになる
  • HTMLにテキストボックスを設置し、JavaScriptで空白チェックを行う仕組み
  • 質問者はJavaScriptの動作について詳しい方からの教授を希望している
回答を見る
  • ベストアンサー

HTMLのJavaScriptが動作しない

以下のプログラムのとおり、HTMLにテキストボックスを設置して、FORMタグのACTIONで次のPHP(PHTML)ファイルへ送る仕組みを作っています。 JavaScriptでテキストボックスが空白の場合にチェックするようにしているのですが、動作せずに次のPHPへ渡してしまいます。 詳しい方よりご教授頂ければと思います。 お手数お掛けして申し訳ございませんが、よろしくお願いいたします。 ・HTML # more index.html <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=EUC-JP"> <META http-equiv="Content-Style-Type" content="text/css"> </HEAD> <BODY bgcolor="#ffffff" onload="Scrmsg()"> <SCRIPT language=JavaScript type=text/javascript> function generatorCheck(){ if(document.toroku.word1.value == ""){ alert("空白です。"); return false; } if(document.toroku.word2.value == ""){ alert("空白です。"); return false; } } </SCRIPT> <form method="POST" action="result.phtml"> <TABLE cellpadding=10> <tr><td><B>入力項目1</B></td><td><input type="text" name="word1" size=34></td><td>(例：)</td></tr> <tr><td><B>入力項目2</B></td><td><input type="text" name="word2" size=34></td><td>(例：)</td></tr> </table> <BR> <input type=submit value="作成" onClick=generatorCheck()><input type=reset value="消去"> </form> </TABLE> </BODY> </HTML> ・PHP(PHTML) # more result.phtml <? require('../include/init.inc'); $word1 = $_POST{'word1'}; $word2 = $_POST{'word2'}; ?> <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=EUC-JP"> <META http-equiv="Content-Style-Type" content="text/css"> <LINK href="index.css" type="text/css" rel="stylesheet"> </HEAD> <BODY bgcolor="#ffffff" onload="Scrmsg()"> <? print ("</BR>"); print ("<B>".$word1."</B>"); print ("</BR>"); print ("<B>".$word2."</B>"); print ("</BR>"); ?> </BODY> </HTML>

  • HTML
  • 回答数2
  • ありがとう数2

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

  • ベストアンサー
  • dsuekichi
  • ベストアンサー率64% (171/265)
回答No.2

> onClick=generatorCheck() は、 > onClick="return generatorCheck();" とかでは？ それから、 > if(document.toroku.word1.value == ""){ となってますが、 > <form method="POST" action="result.phtml"> フォームに、「toroku」と言う名前はついてませんね。 名前を付けてください。

hokuhoku7
質問者

お礼

<form name="toroku" method="POST" action="result.phtml"> で動作確認できました。 初歩的なミスで大変申し訳ございません。 が、非常に助かりました。 どうもありがとうございました。

その他の回答 (1)

  • kokorone
  • ベストアンサー率38% (417/1093)
回答No.1

onload　のイベントでは、ダブルクォーテーション（"）でファンクション名を囲っていますが、onClickの時は、ダブルクォーテーションを使用されていませんが、意味でもあるのでしょうか？

hokuhoku7
質問者

補足

ありがとうございます。 つけ忘れてたんで、修正しました。 実行結果は同様です。 <input type=submit value="作成" onClick="generatorCheck()"><input type=reset value="消去">

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

関連する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
  • 表示すると文字化けします

    下記のファイルが表示されると文字化けしてエンコードを修正しないとみれませんなぜでしょうか？ 日本語EUCになってしまします。 <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=EUC-JP"> <META http-equiv="Content-Style-Type" content="text/css"> <TITLE></TITLE> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> </HEAD> <BODY> <TABLE border="1"> <TBODY> <TR> <TD bgcolor="#ffff00" width="699"><B><FONT size="+2">登録ありがとうございました</FONT></B></TD> </TR> <TR> <TD height="99" width="699"><B>■<A href="http*************************">使いこなすために</A>手順に沿って進んでください</B>→<A href="http**************************">次へ進む</A></TD> </TR> </TBODY> </TABLE> </BODY> </HTML>

    • ベストアンサー
    • HTML
  • 日付取得のJavascriptの動作不良に関して

    教えて下さい。 下記のソースの中にある日付をテキストへ表示するJavascriptがどうしても動き ません。 phpとの兼ね合いがあるのかもしれませんが、どこが悪いのか掴めず。。。 日付のJavascript は　http://www.kanaya440.com/contents/js/calendar/index.html よりダウンロードしてきてあり、ソース内に記述してあります。 恥ずかしながら、どこに不具合があるのかをご指摘頂ければ幸いです。 よろしくお願いします。 《ソース》 <?php $hiduke = "'mm/dd'"; ?> <HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript"> *********　ここにダウンロードしたカレンダーJavascript を貼る </SCRIPT> <TITLE>行動予定登録</TITLE> <META Http-Equiv="Content-Type" Content="text/html;charset=shift-jis"> </HEAD> <BODY> <CENTER> <FORM ACTION="zkoudou_update2.php" METHOD="POST"> <INPUT TYPE="hidden" NAME="item" VALUE="2"> <TABLE BORDER=1 WIDTH="70%" CELLPADDING="10" CELLSPACING="0"> <TR> <TD ALIGN="center"> <TABLE BORDER="0" WIDTH="100%"> <TD WIDTH="20%"> <FONT SIZE="2">　</FONT> </TD> <TD WIDTH="60%" ALIGN="center"> <B><U>行動予定登録</U></B> </TD> <TD WIDTH="20%" ALIGN="right"> <FONT SIZE="2">戻　る</A></FONT> </TD> </TABLE> <FONT COLOR="#FF0000"><B></B></FONT><BR> <?php print("<TABLE BORDER=0 CELLPADDING='5'>\n"); print("<TR>\n"); print("<TD NOWRAP WIDTH='20%'><FONT SIZE='2'><B>【名前】</B></FONT></TD>\n"); print("<TD WIDTH='60%'></TD>\n"); print("<TD WIDTH='20%'>\n"); print("</TD>\n"); print("</TR>\n"); print("<TR>\n"); print("<TD NOWRAP WIDTH='20%'><FONT SIZE='2'><B>【内線NO】</B></FONT></TD>\n"); print("<TD WIDTH='70%'></TD>\n"); print("<TD WIDTH='10%'>\n"); print("</TD>\n"); print("</TR>\n"); print("<TR>\n"); print("<TD NOWRAP><FONT SIZE='3'><B>【行　　先】</B></FONT></TD>\n"); print("<TD NOWRAP SIZE='30'>\n"); print("</TD>\n"); print("</TR>\n"); print("<TR>\n"); print("<TD NOWRAP><FONT SIZE='3'><B>【戻り時間】</B></FONT></TD>\n"); print("<TD>\n"); *********** このJavascripit が動かない。。。。 print("<input type='text' name='p1' id='p1' size='30' maxlength='10'> <input name='Calendar' type='button' value='日付セット' onClick='wrtCalendar(event,this.form.p1,$hiduke)'>\n"); print("</TD>\n"); print("</TR>\n"); print("<TR>\n"); print("<TD>\n"); print("</TD>\n"); print("<TD><FONT SIZE='2'> ※ 戻り時間はダブルクリック\n"); print("</FONT></TD>\n"); print("</TR>\n"); print("</TABLE>\n"); print("<INPUT TYPE='submit' NAME='exec' VALUE='登録する'>\n"); print("<INPUT TYPE='hidden' NAME='no' VALUE='$out_no'>\n"); print("<INPUT TYPE='hidden' NAME='busyo' VALUE='$out_busyo'>\n"); ?> </TD> </TR> </FORM> </TABLE> <FONT SIZE=2><I> Copyright (C) 2001-2004 All right reserved by CGI KON </I></FONT> </CENTER> </BODY> </HTML>

  • HTMLの表示内容にｆｏｒ文を使用したい

    現在Ｐｅｒｌで予約画面を作成しています。 ソースは↓のような感じです。 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ #! 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; } ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ＨＴＭＬのＬｏｏｐと記述している部分にＤＢより取得した値をｆｏｒ文で記述したいのですが、うまくいきません。 ＨＴＭＬ内にＰｅｒｌの処理を組み込むには、どうすればいいのでしょうか？

    • ベストアンサー
    • Perl
  • （超初心者）ウインドウサイズを小さくするには。

    今、HPB9.0にて、以下のページに対し、 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <TITLE></TITLE> </HEAD> <BODY> <TABLE border="0"> <TBODY> <TR> <TD height="0" align="center" width="248"><FONT color="#ff0000">パスワードが誤っています。<BR> 再度入力して下さい。</FONT></TD> </TR> </TBODY> </TABLE> </BODY> </HTML> 以下のような記述で、サイズを指定したいのですが、 <script type="text/javascript"> <!-- window.resizeTo(300, 300); // --> </script> どこに（どのように）記述をすれば良いでしょうか？ ご教示下さい。

  • 表をtext-alignで中央に出したい・・・

    こんな↓HTMLを書いているのですが、表がFirefox3.5の場合 中央に寄ってくれません。IE6なら寄ってくれるのですが・・・ CSSやHTMLの文法的な部分では誤りがないことを確認したのですが、 どうすればFirefoxでも表を中央に出せるでしょうか。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja" dir="ltr"> <head> <meta http-equiv="Content-Type" content="text/html;charset=EUC-JP"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="index" href="./"> <link rev="made" href="mail"> <style type="text/css"> <!-- .main{ text-align:center; } --> </style> <title>テーブル表示</title> </head> <body> <div class="main"> <table summary="chart 1"> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> <tr> <td>7</td> <td>8</td> <td>9</td> </tr> </table> </div> </body> </html>

    • ベストアンサー
    • HTML
  • tableの縦横センタリングについて

    お世話になります。 html4.01のhtmlのDOCTYPEですが、URL付きに変更しました。 ＜!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"＞ 　　　　↓ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> そうしたところ、tableのセンタリングがされなくなってしまいました。 css指定で、横のセンタリングはできたのですが 縦方向がどうしても、topの位置になってしまいます。 ネット検索したところ、いろいろ解決策があるのですが、どれを試しても どうしてもうまくいきません。 どこがダメなのか、アドバイスお願いできないでしょうか。 ソースコードを以下に記します。 tableのborde色を赤にしています。 この赤が、画面横縦に中央に表示されるようにしたいのです。 画面サイズを変更しても。 よろしくお願いします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8"> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Language" content="ja"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <style type="text/css"> <!-- body{ background-color:#f5f5dc; } .container { display: table; width:100%; height:100%; } .contents { display: table-cell; vertical-align: middle; } --> </style> <title>test</title> </head> <body> <div class="container"> <div class="contents"> <table style="width:100%;height:100%;border:1px solid red;" cellpadding="0" cellspacing="1" summary="test"> <tr> <td style="text-align:center;vertical-align:middle;"> 　　　<input type="button" value="新規"></td> <td style="text-align:center;vertical-align:middle;"> 　　　<input type="button" value="変更"></td> </tr> <tr> <td style="text-align:center;vertical-align:middle;" colspan="2"> 　　　<input type="button" value="戻る"></td> </tr> </table> </div> </div> </body> </html>

    • ベストアンサー
    • CSS
  • spinelzのjavascript使用方法

    javascript初心者です。 spinelzのjavascript(外部ファイル）使用方法について質問があります。 今、”Grid”のデモ(http://script.spinelz.org/index.html)をコピーして、（データの変更が可能な）テーブルを作成しようと思っています。 以下のように作成すると、テーブルのデータは表示されるのですが、デモのようには動きません。 (外部ファイルのjavascriptが呼び出されていないようです。) どなたかご教授いただけませんでしょうか。 ↓HTML↓ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <!-- #BeginTemplate "../Templates/01.dwt" --> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <meta http-equiv="content-style-type" content="text/css"> <meta http-equiv="content-script-type" content="text/javascript"> <title>TEST</title> <link href="../css/01.css" rel="stylesheet" type="text/css"> </head> <body> <!-- - ここから JavaScript 記述です。 - --> <script src="../Public\javascripts/spinelz/grid.js" type="text/javascript"></script> <script src="../Public\javascripts/spinelz/grid_resizeEx.js" type="text/javascript"></script> <script src="../Public\javascripts/spinelz/grid_sortabletableEx.js"　type="text/javascript"></script> <!-- - ここまで JavaScript 記述です。 - --> <table> <tr> <td>Column</td> <td> <input type="button" class="button" value="add" onclick="grid.addColumn(grid.targetColIndex,'new Column');" /> <input type="button" class="button" value="remove" onclick="grid.deleteColumn(grid.targetColIndex);" /> </td> </tr> 　・ 　・ 　(ボタンの記述) 　・ 　・ </table> <div id="grid_container" > <table width="100%" border="0"> <thead> <tr> <td class="top" style="height: 22px">日付</td> </tr> </thead> 　・ 　・ 　(テーブルのデータを記述) 　・ 　・ </table> </div> ↓javascriptは下記パスに保管↓ ・「Public\javascripts/spinelz/grid.js」 ・「Public\javascripts/spinelz/grid_resizeEx.js」 ・「Public\javascripts/spinelz/grid_sortabletableEx.js」 以上です。よろしくお願い致します。

  • Firefoxでテーブルの外側の背景色が出ない

    IE8では中央にテーブルが配置し外側の背景色が出るのですが、Firefoxではテーブルの位置も左側に寄り、外側の背景色がテーブル内と同じ白一色になってしまうのですが、どう直したらいいのでしょうか。 以下、ソースです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 9.0.0.0 for Windows"> <TITLE>○○○</TITLE> <STYLE TYPE="text/css"> <!-- BODY {background:'palegreen';color:#000000;text-align:center;} TABLE {background:#FFFFFF;color:#000000;} CAPTION {background:#FFFFFF;color:#000000;text-align:left;font-weight:bold;} .tmscntr {text-align:center;font-size:14px;font-family:'Times New Roman';} .tmsrght {text-align:right;font-size:14px;font-family:'Times New Roman';} .tmslft {text-align:left;font-size:14px;font-family:'Times New Roman';} SPAN {margin-left:20PX;"}}}}}}}} .cntr {text-align:center;} .rght {text-align:right;} .lft {text-align:left;} A:visited {color:#000099;} A:active {color:#FFFFFF;background:#CCCCFF;} A:hover {color:#DCDCDC;background:#000099;} --> </STYLE> </HEAD> <BODY text="#000000" bgcolor="#FFFFFF" link="#ff3535" vlink="#808080" alink="#ff8040"> <DIV><BR> <TABLE cellpadding=5 cellspacing=0><CAPTION>○○○</CAPTION><TR><TD> <TABLE border="0" cellpadding=5 cellspacing=0><CAPTION>○○○</CAPTION> <TR><TD><b>(1)○○○</b></TD><TD><b>○○○</b></TD><TD colspan="3"><b>○○○○○○</b>　<b><font color="#ff0000">○○○</b></font></TD></TR> <TR><TD></TD><TD style={text-indent:24px;}><b>○○○</TD><TD><b>○○○○○○○○○</b></TD></TR> <TR><TD><br><b>(2)○○○</b></TD><TD><br><b>○○○</b></TD><TD colspan="3"><br><b>○○○<b><font color="#008800">○○○○○○○○○</b></font></TD></TR> <TR><TD></TD><TD style={text-indent:24px;}><b>○○○</b></TD><TD><b>○○○○○○○○○</b></TD></TR> <TABLE align="center"><br><br><br> </TABLE> </TD></TR></TABLE></DIV> </BODY> </HTML>

  • クリアボタンの動作について　その３

    ご存知の方、ご教授くださいm(__)m クリアボタンの動作についてその２、の続きです。 現在、画面上で表示された表項目を消去するために表データクリアボタンを設置しており、 画面中の、表データを削除したいと考えています。 現状のHTMLは以下のようなものです。 <!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"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>test</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript"> $().ready ( function() { $('.buttons :button[name=clear]').click ( function() { alert('come!'); $('input[type="text"]').not('[disabled="disabled"]').val ( '' ); $('input[type="checkbox"]').removeAttr ( 'checked' ); }); $('.buttons :button[name=clear_table]').click ( function() { alert('come2!'); //<tbody>の中身を消すコード }); }); </script> <style type="text/css"> </style> </head> <body id="main"> <form> <input type="text" name="n1"> <input type="text" name="n2"> <input type="text" name="n1" value="3" disabled> <hr> <input type="checkbox" value="2"> <input type="checkbox" value="2"> <hr> <button type="button" name="clear">クリア</button> <button type="button" name="table_clear">表クリア</button> </form> <div class="data_area"> <table id="schedule_head_table" class="data_table" border=1> <thead> <tr> <th width="60">No.</th> <th width="100">品名コード</th> </tr> </thead> <tbody id=tbody> <tr> <td><div class=right-align>1</div></td> <td>item_code</td> </tr> </tbody> </table> 　 </div> </body> </html> 解決方法を教えていただけると助かります。 もし可能であれば、クリアボタン自体が動作しない理由も教えていただれば、今後の参考にさせていただきます。 よろしくお願いいたします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する